前后端分离——新闻标题列表项目

后端用PHP写API接口，前端用JS通过Ajax请求API数据！

用PHP从数据库获取数据，再转成JSON格式，JS请求到数据，再转化JSON数据，操作DOM显示！

之前用PHP和HTML混编，一个人完成项目，现在前后端分离用PHP搞后端数据，JS搞前端逻辑！

image-20230507175037297

注意：此项目是写文章的列表页接口，详情页接口，做一个新闻网的项目！

数据库创建数据

1、创建数据库news

2、创建标题表，自增id、标题、图片、日期

3、创建文章详情表，自增id，关联id、来源信息、内容、日期等！

插入数据：

UPDATE `atctitle` SET `img` = 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0507%2Ff062ac25j00ru9gbh000jc000go00b4c.jpg&thumbnail=660x2147483647&quality=80&type=jpg' WHERE `atctitle`.`id` = 1;

先后端：写API

一、新建文章标题API文件

使用PHP查询JSON格式的数据！

参考资料：菜鸟教程PHP教程，从 MySQL 数据库读取数据

二、连接数据库：提取连接数据库的公共代码
<?php
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "news";
 
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
} 
else {
    echo "0 结果";
}

SQL语句：修改SQL语句为查询所有文章标题！倒序！

SELECT * FROM `atctitle` ORDER BY `atctitle`.`id` DESC
三、筛选文章，打印获取的结果
<?php
//连接数据库
require_once "database.php";
 
// SQL语句：获取文章标题，按倒序获取
$sql = "SELECT * FROM `atctitle` ORDER BY `atctitle`.`id` DESC";
// 执行SQL语句
$result = $conn->query($sql);
// 打印返回的结果！
print_r($result);

// 关闭数据库连接，可以省略不用
$conn->close();
?>

如下图

image-20230507193356744

通过循环语句和函数fetch_assoc()把数据打印出来！$result->fetch_assoc()是一条数组数据!

if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        var_dump($row);
    }
}

如下图

image-20230507191546342

注意：查询出来的数据，还不能称之为接口！什么格式才是接口呢？数组套对象的格式！

四、转成JSON格式去输出——数组格式

需要转码的代码！百度搜索PHP header JOSN

//声明header为json
header("Content-type:application/json");

image-20230507192343180

五、设数组形成——一列数据的数组！

使用array_push()函数，追加数组

// 在数组后面追加数据，这里在$arr数组后面，追加了两条数据，可以追加单个或多条数据
array_push($arr, 'grape', 'watermelon');

使用追加数组的方式，把获取到的数组，同信息的值传给数组！省略键，只有值了！消除了键值这种格式！只有纯粹的某一类数据，并以0开始下标的数组，而原始数据为相关数据的键值对！

// 新建一个数组，用于存放标题
$arr = [];
if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        // 逐条把标题，追加到数组内！
        array_push($arr, $row['title']);
    }
}else {
    echo "0 结果";
}
// 打印数组
print_r($arr);

image-20230507212149294

注意：这样的数组还是不能称为API，还需要转码成JSON格式才叫API

六、数组转JSON格式——最后一步JSON格式

使用json_encode函数：PHP json_encode() 用于对变量进行 JSON 编码

<?php
   $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
   echo json_encode($arr);
?>
// 要注意的是 JSON_UNESCAPED_UNICODE 选项，如果我们不希望中文被编码，可以添加该选项。

image-20230507213938081

这样就完成了一个API，后端的事就完成了，现在可以开始写前端代码了！

后前端：写网页

一、新建index.html首页文件

二、通过JS代码，请求接口数据，并展示出来

使用Ajax(Asynchronous Javascript And XML) 异步 JavaScript 和 XML 请求数据！

特别的：Ajax步骤

执行步骤:https://blog.csdn.net/weixin_50602266/article/details/121910781
1.创建xhr对象
const xhr = new XMLHttpRequest();
2.利用onreadystatechange属性，封装一个函数，用于监听 readyState的变化。
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status < 300 ){
    console.log(xhr.responseText);
    }
};
2.1在xhr对象执行收发数据的时候，它会经历五种状态：

Ajax状态码	状态
0	（未初始化）未启动
1	（启动）已经调用 open()，但尚未调用 send()
2	（发送）发送状态，已经调用 send()，但尚未接收到响应
3	（接收）已经接收到部分响应数据
4	（完成）已经接收到全部响应数据，而且已经可以在浏览器中使用了
加两句console.log()就可以看见状态码的变化了。



上述的readyStateChange事件是专门用来监听xhr对象的Ajax状态码，只要readyState（也就是Ajax状态码）发生了变化，就会触发这个事件。



2.2判断HTTP状态码是否为200-299

Ajax状态码为4是不够的，这仅仅表明收到服务器端响应的全部数据，并不能保障数据都是正确的。

所以，我们还需要判断HTTP的状态码，判断xhr对象的status属性值是否在200到300之间（200-299 用于表示请求成功）

if (xhr.status >= 200 && xhr.status < 300 ){
    console.log(xhr.responseText);
}
所以要想请求成功完成，必须要满足上面两个条件。

3.准备发送请求
xhr.open('GET','text.json', true);
参数1：选用"GET"或者“POST”的请求方式
参数2：发送请求的地址
参数3：是否异步

4.发送请求
xhr.send(null)
注意：send() 的参数是通过请求体携带的数据，而GET请求是通过请求头携带数据的，所以要把send的参数置为null

注意：AJAX 不是新的编程语言，而是一种使用现有标准的新方法。优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。XMLHttpRequest 只是实现 Ajax 的一种方式。

<script>
// JS请求API接口，使用Ajax
    // https://www.runoob.com/ajax/ajax-tutorial.html
// 新建变量用于实例化
var xmlhttp;
// 实例化对象
xmlhttp = new XMLHttpRequest();

// 判断是否请求成功
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 把请求到的数据，怎么输出展示
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "http://127.0.0.1/API/atcTitle.php", true);
xmlhttp.send();
</script>

image-20230507222746217

前端请求到数据，可以通过代码方式，把请求的数据按自己的方式展示出来！现在请求到的数据返回来的是字符串！还需要转化为数组

三、把请求到的JSON字符串转化成JSON对象格式

什么是 JSON ？

JSON: JavaScript Object Notation(JavaScript 对象表示法)

  • JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.parse(text[, reviver])

// text:必需， 一个有效的 JSON 字符串。
// reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

注意：JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。

// 把返回来的是JSON字符串转化为对象输出！
let title = JSON.parse(xmlhttp.responseText);               
document.getElementById("myDiv").innerHTML = title;

结果如下

国际原子能机构总干事：扎波罗热核电站所在城市居民开始疏散,俄罗斯称美国在乌克兰研究可引发人类疫情的病原体,乌军称首次击落俄军“匕首”导弹，高超声速导弹神话破灭？

四、把对象数据——展示到网页中

通过循环等方式把对象(object)内的数据，逐条生成页面内容

// 把请求到的数据，怎么输出展示，目前返回来的是字符串！
let title = JSON.parse(xmlhttp.responseText);
// 逐条展示到页面中
for(let i=0; i<title.length; i++){           
    document.getElementById("myDiv").innerHTML += "<li>"+title[i]+"</li>";
}

image-20230507232209469

完成：访问API为什么是GET请求？没说明呀，客户端通过JS的Ajax访问API时，执行对应PHP文件，从数据库中获取数据，处理后打印JSON格式的数据，服务器把这些数据发送给客户端，JS代码再把JSON字符转化为对象，再操作DOM显示到页面中！