diff options
author | mayx | 2022-01-04 20:42:55 +0800 |
---|---|---|
committer | mayx | 2022-01-04 20:42:55 +0800 |
commit | f4aa957c53cda659d026ffd23856f65a72fee739 (patch) | |
tree | afc51b78e1ff241c955ca30910e895e02e0a1d22 /_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.md | 130 |
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(虽然我之前说我学这个),编写之中遇到了不少问题,所以在此感谢各位帮助我的各位大佬们,让我最终完成了这个计数器。 |