分享一个纯自己搭建的一言接口

最近莫名高产...原因很简单,下半学期课比上半学期减少了很多,对追番也没啥兴趣(不知道该看啥番了QAQ),游戏目前只简单肝一下明日方舟阿米驴,有很多空余出的时间,最近又比较对各种web功能感兴趣,于是就...一发不可收拾了~先借着今天过生日发个开头~

接口实现

我的博客最近上线了这个“一言”功能,即在页面上方随机显示一句自己喜欢的话。前端使用Ajax来发送与处理请求,而接口后端用php实现,这个接口每次请求都会返回一句与上一次请求不同的话。

先说后端吧,因为前端RAW主题是dalao熊猫小A写的,修改起来比较复杂,咱先简再繁~

思路大致是这样的:

  1. 先手动建立一个名叫hitokoto的数据库,数据表的名字也叫hitokoto。
  2. 表中有三个字段,分别为id, is_display, hitokoto,其中id为自增主键。is_display默认值为0.自己用的,就不用写漂亮的提交页面了,用phpMyAdmin导入自己喜欢的语句就OK了。
  3. 创建接口,需要实现以下逻辑:随机返回一句话,并且返回的这句话与上次请求的结果不相同。我们可以设置一个is_display字段,用来保存调用状态,如果其value=1,说明上次刚刚被调用,反之亦然。在这一次调用时,随机返回除了上一次调用过的结果之外的句子,然后将上一次调用结果中的is_display的值改为0,将这次请求结果的is_display`的值改为1.其实这个逻辑有一个Bug:用户A和用户B先后请求这个接口,他们每人请求两次,这两次的结果有可能时相同的。但我这个小白的Blog流量很少,基本上影响不大。
  4. 根据上面的逻辑写出php代码。
  5. 应用到前端,使用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);
?>

前端代码:

  1. 肯定先要在合适的位置添加div标签<div id="hitokoto"></div>
  2. 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>
  1. 如果博客主题使用了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();
  1. 根据博客主题进行其他必要的修改。

过段时间我会把代码提交到GitHub上去,欢迎来Star~

Xiaomage's Blog 的后端接口的地址是https://xmgspace.me/hitokoto.php,欢迎来刷哦!

Tags:none
上一篇
没有啦~