summary refs log tree commit diff
path: root/_posts/2019-06-22-counter.md
diff options
context:
space:
mode:
authormayx2022-01-04 20:42:55 +0800
committermayx2022-01-04 20:42:55 +0800
commitf4aa957c53cda659d026ffd23856f65a72fee739 (patch)
treeafc51b78e1ff241c955ca30910e895e02e0a1d22 /_posts/2019-06-22-counter.md
Restore deleted repositories
Diffstat (limited to '_posts/2019-06-22-counter.md')
-rw-r--r--_posts/2019-06-22-counter.md130
1 files changed, 130 insertions, 0 deletions
diff --git a/_posts/2019-06-22-counter.md b/_posts/2019-06-22-counter.md
new file mode 100644
index 0000000..e0fad06
--- /dev/null
+++ b/_posts/2019-06-22-counter.md
@@ -0,0 +1,130 @@
+---
+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(虽然我之前说我学这个),编写之中遇到了不少问题,所以在此感谢各位帮助我的各位大佬们,让我最终完成了这个计数器。