如何自己写一个博客计数器 | Mayx的博客
Author: mayx
Description: 都怪LeanCloud，我得自己写计数器了！
Date: 2019-06-22T00:00:00+08:00

22 June 2019 - 字数统计：1913 - 阅读大约需要7分钟 - Hits: Loading...

# 如何自己写一个博客计数器

by mayx

这是一篇创建于 天前的文章，其中的信息可能已经有所发展或是发生改变。

AI摘要

这篇文章讲述了作者因为LeanCloud服务不再可用，决定自己动手写一个博客计数器。作者详细描述了计数器的前端显示、JS代码实现（利用Jquery调用后端接口更新点击数）、后端部分（包括MySQL数据库设计和PHP代码，用于增加和查询计数）。文章还记录了作者学习和改进过程，以及对自建计数器的信心，特别是对垃圾云服务的替代方案。

- 事件起因
- 使用方法
  - 前端部分
  - 后端部分
- 结果

都怪LeanCloud，我得自己写计数器了！

#
事件起因

我之前用的博客计数器是用的LeanCloud作为后台制作的计数器，然后嘛……代码是抄的。结果最近LeanCloud凉了，这让我无法忍受，之前的代码我也看不懂，改也不会改……

那好吧，我只好自己写计数器了。

于是我花了很长时间，自己写了一个计数器，另外还得把原来的计数器信息转移过来……

#
使用方法

##
前端部分

主页显示点击数：

    Hits: <span id="{{ post.url }}" class="visitors-index" >Loading...</span>

内页显示点击数：

     Hits: <span id="{{ page.url }}" class="visitors" >Loading...</span>

JS代码：（需要Jquery）

    var auxiliaryHost = "你的域名";
    function showHitS(hits){
        $.get(auxiliaryHost+"/counter.php?action=show&id="+hits.id,function(data){
                hits.innerHTML=Number(data);
            });
    }
    function showHitCount() {
        var visitors=$(".visitors-index");
        for(var i = 0; i < visitors.length; i++){
            showHitS(visitors[i]);
        }

    }
    function addCount() {
    var visitors=$(".visitors");
        $.get(auxiliaryHost+"/counter.php?action=add&id="+visitors[0].id,function(data){
            visitors[0].innerHTML=Number(data);
        });
    }
    if ($('.visitors').length == 1) {
        addCount();
    } else if ($('.visitors-index').length > 0){
        showHitCount();
    }

2021.03.23更新：修复了一些BUG并且支持异步了

##
后端部分

MySQL建表：

    CREATE TABLE `counter` (
      `url` char(50) NOT NULL,
      `counter` int(11) NOT NULL,
      UNIQUE KEY `url` (`url`)
    );

PHP：

    <?php
    header('Access-Control-Allow-Origin: *');
    $db = new PDO("mysql:host=MySQL地址;dbname=数据库名", "用户名", "密码", array(PDO::ATTR_PERSISTENT => true));

    if (isset($_GET['id'])){
        $hid = (string)md5($_GET['id']);
    } else {
        header("HTTP/1.1 301 Moved Permanently");
        header("Location: https://mabbs.github.io");
        exit(0);
    }
    $select = $db->prepare("SELECT IFNULL((SELECT `counter` FROM `counter` WHERE `url` = ?), 0) count");
    $select->execute(array($hid));
    $counter = $select->fetch(PDO::FETCH_ASSOC)['count'];
    if (isset($_GET['action'])){
        if ($_GET['action'] == "add") {
            $counter = $counter + 1;
            $insert = $db->prepare("INSERT INTO `counter` (`url`, `counter`) VALUES (?, ?) ON DUPLICATE KEY UPDATE `counter` = ?");
            $insert->execute(array($hid, $counter, $counter));
        }
    }
    echo $counter;

2022.07.26更新：之前的代码实在是太垃圾了，现在最起码PHP也会的差不多了，稍微优化一下。

#
结果

看来还是自己写代码放心，至少服务是自己维护的，不像垃圾LeanCloud坏掉之后我就无能为力了……

不过说实话我根本不会JS（虽然我之前说我学这个），编写之中遇到了不少问题，所以在此感谢各位帮助我的各位大佬们，让我最终完成了这个计数器。

tags: 计数器 查看原始文件

#### 推荐文章

Loading...

上一篇：Jekyll也可以加密文章啦！
下一篇：如何利用MySQL数据库制作一个图站
想问这篇文章
召唤伊斯特瓦尔