|
|
---
|
|
|
layout: post
|
|
|
title: 如何自己写一个博客计数器
|
|
|
tags: [计数器]
|
|
|
---
|
|
|
|
|
|
都怪LeanCloud，我得自己写计数器了！<!--more-->
|
|
|
|
|
|
# 事件起因
|
|
|
我之前用的博客计数器是用的LeanCloud作为后台制作的计数器，然后嘛……代码是抄的。结果最近[LeanCloud凉了](https://blog.avoscloud.com/6841/)，这让我无法忍受，之前的代码我也看不懂，改也不会改……
|
|
|
那好吧，我只好自己写计数器了。
|
|
|
于是我花了很长时间，自己写了一个计数器，另外还得把原来的计数器信息转移过来……
|
|
|
|
|
|
# 使用方法
|
|
|
## 前端部分
|
|
|
主页显示点击数：
|
|
|
```html
|
|
|
{% raw %}Hits: <span id="{{ post.url }}" class="visitors-index" >Loading...</span>{% endraw %}
|
|
|
```
|
|
|
内页显示点击数：
|
|
|
```html
|
|
|
{% raw %} Hits: <span id="{{ page.url }}" class="visitors" >Loading...</span>{% endraw %}
|
|
|
```
|
|
|
JS代码：（需要Jquery）
|
|
|
```js
|
|
|
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建表：
|
|
|
```sql
|
|
|
CREATE TABLE `counter` (
|
|
|
`url` char(50) NOT NULL,
|
|
|
`counter` int(11) NOT NULL,
|
|
|
UNIQUE KEY `url` (`url`)
|
|
|
);
|
|
|
```
|
|
|
PHP：
|
|
|
```php
|
|
|
<?php
|
|
|
header('Access-Control-Allow-Origin: *');
|
|
|
$con=mysqli_connect("MySQL地址","用户名","密码","数据库名");
|
|
|
if (mysqli_connect_errno($con))
|
|
|
{
|
|
|
die("连接 MySQL 失败: " . mysqli_connect_error());
|
|
|
}
|
|
|
|
|
|
$hid = md5($_GET['id']);
|
|
|
|
|
|
if ( $_GET['action'] == "show" ) {
|
|
|
|
|
|
$sql = "SELECT * FROM `counter` WHERE `url` = '".$hid."' ";
|
|
|
$result = $con->query($sql);
|
|
|
|
|
|
if ($result->num_rows > 0) {
|
|
|
while($row = $result->fetch_assoc()) {
|
|
|
echo $row["counter"];
|
|
|
}
|
|
|
} else {
|
|
|
|
|
|
$sql = "INSERT INTO `counter` (`url`, `counter`)
|
|
|
VALUES ('".$hid."', '0')";
|
|
|
|
|
|
if ($con->query($sql) === TRUE) {
|
|
|
echo "0";
|
|
|
}else{
|
|
|
echo "Error";
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
} elseif ( $_GET['action'] == "add" ) {
|
|
|
|
|
|
|
|
|
$sql = "SELECT * FROM `counter` WHERE `url` = '".$hid."' ";
|
|
|
$result = $con->query($sql);
|
|
|
if ($result->num_rows > 0) {
|
|
|
while($row = $result->fetch_assoc()) {
|
|
|
$sql = "UPDATE `counter` SET `counter` = '".($row["counter"]+1)."' WHERE `url` = '".$hid."'";
|
|
|
$con->query($sql);
|
|
|
echo ($row["counter"]+1);
|
|
|
}
|
|
|
} else {
|
|
|
|
|
|
$sql = "INSERT INTO `counter` (`url`, `counter`)
|
|
|
VALUES ('".$hid."', '1')";
|
|
|
|
|
|
if ($con->query($sql) === TRUE) {
|
|
|
echo "1";
|
|
|
}else{
|
|
|
echo "Error";
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
} else {
|
|
|
header("HTTP/1.1 301 Moved Permanently");
|
|
|
header("Location: https://mabbs.github.io");
|
|
|
}
|
|
|
mysqli_close($con);
|
|
|
```
|
|
|
|
|
|
# 结果
|
|
|
看来还是自己写代码放心，至少服务是自己维护的，不像垃圾LeanCloud坏掉之后我就无能为力了……
|
|
|
不过说实话我根本不会JS（虽然我之前说我学这个），编写之中遇到了不少问题，所以在此感谢各位帮助我的各位大佬们，让我最终完成了这个计数器。
|
