最近莫名高产...原因很简单,下半学期课比上半学期减少了很多,对追番也没啥兴趣(不知道该看啥番了QAQ),游戏目前只简单肝一下明日方舟
迫害阿米驴,有很多空余出的时间,最近又比较对各种web功能感兴趣,于是就...一发不可收拾了~先借着今天过生日发个开头~
接口实现
我的博客最近上线了这个“一言”功能,即在页面上方假随机显示一句自己喜欢的话。前端使用Ajax来发送与处理请求,而接口后端用php实现,这个接口每次请求都会返回一句与上一次请求不同的话。
先说后端吧,因为前端RAW主题是dalao熊猫小A写的,修改起来比较复杂,咱先简再繁~
思路大致是这样的:
- 先手动建立一个名叫hitokoto的数据库,数据表的名字也叫hitokoto。
- 表中有三个字段,分别为
id, is_display, hitokoto
,其中id为自增主键。is_display
默认值为0.自己用的,就不用写漂亮的提交页面了,用phpMyAdmin导入自己喜欢的语句就OK了。 - 创建接口,需要实现以下逻辑:随机返回一句话,并且返回的这句话与上次请求的结果不相同。我们可以设置一个
is_display
字段,用来保存调用状态,如果其value=1,说明上次刚刚被调用,反之亦然。在这一次调用时,随机返回除了上一次调用过的结果之外的句子,然后将上一次调用结果中的is_display
的值改为0,将这次请求结果的is_display`的值改为1.其实这个逻辑有一个Bug:用户A和用户B先后请求这个接口,他们每人请求两次,这两次的结果有可能时相同的。但我这个小白的Blog流量很少,基本上影响不大。 - 根据上面的逻辑写出php代码。
- 应用到前端,使用Ajax来发送与处理请求。
代码分享
后端hitokoto.php代码:
<?php
$sql_server = "sql_server";
$sql_user = "sql_user";
$sql_pass = "sql_pass";
//上面三项肯定保密啦~
$sql_dbname = "hitokoto";
class dataBase {
public function connectSql($sql_server,$sql_user,$sql_pass,$sql_dbname) {
$conn = new mysqli("$sql_server","$sql_user","$sql_pass","$sql_dbname");
mysqli_set_charset($conn,"utf8");
date_default_timezone_set("PRC");
return $conn;
}
public function sqlQuery($sql,$conn) {
$sql_query = $conn->query($sql);
return $sql_query;
}
public function getHitokotos($sql,$conn) {
$data = $conn->query($sql);
$data_arrays = [];
while ( $data_array = $data->fetch_array( MYSQLI_ASSOC ) ) {
$data_arrays[] = $data_array;
}
return $data_arrays;
}
public function getTotal($sql,$conn) {
$data1 = $conn->query($sql);
$total = $data1->fetch_array();
$totals = $total[0];
return $totals;
}
}
$dataBase = new dataBase();
$conn = $dataBase->connectSql($sql_server,$sql_user,$sql_pass,$sql_dbname);
$sql_hitokoto = "SELECT * FROM hitokoto WHERE is_display != 1";
$sql_total = "SELECT COUNT(*) FROM hitokoto WHERE is_display != 1";
$hitokotos = $dataBase->getHitokotos($sql_hitokoto,$conn);
$total = $dataBase->getTotal($sql_total,$conn);
$rand = rand(0,$total-1);
$id = $hitokotos[$rand]['id'];
$sql_dislpay1 = "UPDATE hitokoto SET is_display = 0 WHERE is_display = 1";
$sql_dislpay2 = "UPDATE hitokoto SET is_display = 1 WHERE id = '$id'";
$display_query1 = $dataBase->sqlQuery($sql_dislpay1,$conn);
$display_query2 = $dataBase->sqlQuery($sql_dislpay2,$conn);
echo($hitokotos[$rand]['hitokoto']);
mysqli_close($conn);
?>
前端代码:
- 肯定先要在合适的位置添加div标签
<div id="hitokoto"></div>
- JavaScript代码,用来发起Ajax请求:
<script>
function showHitokoto() {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./hitokoto.php", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
document.getElementById('hitokoto').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send();
}
window.onload = showHitokoto()//加载时自动执行
</script>
- 如果博客主题使用了Pjax无刷新,还需要指定Pjax重载函数,有很多跟上面的相同:
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./hitokoto.php", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
document.getElementById('hitokoto').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send();
- 根据博客主题进行其他必要的修改。
过段时间我会把代码提交到GitHub上去,欢迎来Star~
Xiaomage's Blog 的后端接口的地址是https://xmgspace.me/hitokoto.php,欢迎来刷哦!
评论