《构建一个具备从后端数据库获取数据并再前端显示的内容页面：前后端实现解析》

本文链接：https://blog.youkuaiyun.com/qq_69304031/article/details/143467578

一、前端页面：布局与功能

1. 页面结构

我们先来看前端页面的 HTML 结构，它主要由以下几个部分组成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/content.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/content.js" defer></script>
</head>
<body>
    <div class="container">
        <!-- 搜索框与按钮区域 -->
        <div class="top">
            <div class="searchbox">
                栏目：
                <select>
                    <option value="">全部</option>
                    <option value="">通知公告</option>
                    <option value="">军训专题</option>
                    <option value="">视频河大</option>
                </select>
                标题：
                <input type="text" placeholder="请输入标题" class="title">
                作者：
                <input type="text" placeholder="请输入作者" class="author">
                <input type="button" value="搜索" class="search">
            </div>
            <div class="btnbox">
                <input type="button" value="添加" class="add">
                <input type="button" value="批量删除" class="remove">
            </div>
        </div>
        <!-- 数据展示表格 -->
        <table border="1">
            <thead>
                <tr>
                    <td><input type="checkbox" class="check_all"></td>
                    <td>id</td>
                    <td>栏目</td>
                    <td>标题</td>
                    <td>摘要</td>
                    <td>创建时间</td>
                    <td>作者</td>
                    <td>封面图</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>id</td>
                    <td>栏目</td>
                    <td>标题</td>
                    <td>摘要</td>
                    <td>创建时间</td>
                    <td>作者</td>
                    <td><img src="img/4162a71b86c33e60f