杜建军 发布的文章

最方便好用的 linux 操作系统，我觉得应该是 ubuntu

安装 php 扩展一直是个比较难搞的活

一般流程是，从官网下载 php 源码，解压，找到扩展，用 phpize 编译。你得清楚 php 的位置

那么 ubuntu 下的步骤呢

apt install php-pear

pecl  install 扩展

最后设置下 php.ini 就完事了。。。

比如在Ubuntu里安装 mcrypt 扩展

pecl install mcrypt

然后在 /etc/php/7.2/cli/conf.d/ 里添加 mcrypt.ini 文件。文件内容如下

extension=mcrypt.so

保存。完事

网页自动刷新小助手

设计初心

  1. 为什么要写这个小助手？

    为了刷帖子的访问量

  2. 有替代方案案吗？

    有，而且有许多。如“流量精灵”， 有些浏览器自带有刷新网页的插件。

    但是，作为一个程序猿。明明知道其实现原理很简单，为什么不尝试自己做一个呢？

  3. 使用了哪些技术

    最初写的时候很粗糙，这次优化了一下下。

    1. 使用 bootstrap4 实现了响应式布局
    2. 使用 vue 框架。没办法，这框架太好用了，用一次就爱上了。

实现原理

使用 iframe 标签加载目标网页。通过多次修改 iframe 标签的 src 属性来实现多次访问目标网页。

代码

Demo

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页自动刷新小助手</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div class="navbar navbar-expand-md bg-dark text-light w-100 border-top border-warning">
    <a href="" class="nav-item text-light nav-link navbar-brand">
        网页自动刷新小助手
    </a>
</div>

<div id="app" class="container">
    <div class="row">
        <div class="card aside col-md-4 my-3">
            <div class="card-body">
                <div class="form-group">
                    <label for="">
                        链接
                        <small>(必须以 http:// 或 https:// 开头)</small>
                    </label>
                    <input type="text" v-model="src" class="form-control" placeholder="请输入链接">
                </div>
                <div class="form-group">
                    <label for="">刷新次数</label>
                    <input type="number" v-model="times" class="form-control">
                </div>
                <div class="form-group">
                    <label for="">刷新间隔时间(毫秒)</label>
                    <input type="number" v-model="interval" class="form-control">
                </div>
                <div class="btn-group-sm">
                    <button class="btn btn-primary" @click="start">开始刷</button>
                    <button class="btn btn-danger" @click="stop">停止</button>
                </div>
            </div>
        </div>
        <div class="col-md-8 my-3">
            <div class="alert alert-info">
                {{ message }}
            </div>
            <iframe class="mt-2 w-100 h-100" ref="iframe_box" frameborder="0"></iframe>
        </div>
    </div>
</div>

<script>
    let App = new Vue({
            el: '#app',
            data: {
                src: "https://api.xygeng.cn/dailywd/api/get.php",
                times: 10,
                interval: 2000,
                job_id: "",
                count: 1,
                message: '网页预览小窗口'
            },
            methods: {
                start() {
                    this.message = '任务将会在' + this.interval / 1000 + 's 后开始';

                    this.job_id = setInterval(() => {
                        this.message = '任务正在进行中 , 第' + this.count + '次'
                        if (++this.count > this.times) this.stop()
                        this.$refs.iframe_box.src = this.src
                    }, this.interval)
                },
                stop() {
                    this.message = '任务已结束'
                    clearInterval(this.job_id)
                    this.count = 1;
                }
            }
        }
    )
</script>
</body>
</html>
  1. 1
  2. ...
  3. 3
  4. 4
  5. 5
  6. 6