mirror of https://github.com/Mabbs/mabbs.github.io
				
				
				
			
			You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							130 lines
						
					
					
						
							3.4 KiB
						
					
					
				
			
		
		
	
	
							130 lines
						
					
					
						
							3.4 KiB
						
					
					
				--- | 
						|
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(虽然我之前说我学这个),编写之中遇到了不少问题,所以在此感谢各位帮助我的各位大佬们,让我最终完成了这个计数器。
 | 
						|
 |