一、页面初始化阶段（加载即执行）

加载栏目列表（同步请求）
- 发送同步 AJAX 请求到SearchChannel接口，获取所有栏目数据。
- 清空下拉框（.channelid）后，先添加 “全部” 选项，再循环生成各栏目对应的下拉选项（value 为栏目 ID，显示文本为栏目名称）。
- 若请求失败，弹出 “出错啦” 提示。

初始化分页参数定义全局变量page = 1（当前页码，默认第一页）和pageSize = 4（每页显示 4 条数据）。

首次加载数据和分页控件调用loadData()：加载第一页数据并渲染到表格。调用loadPage()：计算总页数并生成分页按钮（首页、上一页、页码、下一页、尾页）。

二、数据加载与展示流程（核心功能）

1. 加载数据（loadData()函数）

作用：根据当前查询条件和分页参数，从后端获取数据并渲染表格。

收集查询条件：获取下拉框选中的channelid（栏目 ID）、输入框的title（标题关键词）和author（作者关键词）。
发送请求：向SearchContent接口发送 GET 请求，携带参数（channelid、title、author、page、pageSize）。
渲染表格：
- 若请求成功，从返回数据中提取列表arr，清空表格 tbody 后，循环生成表格行。
- 每行包含：复选框、ID、栏目名称、标题、创建时间（只显示日期部分）、作者、图片、修改 / 删除按钮。
若请求失败，弹出 “出错啦” 提示。

2. 加载分页控件（loadPage()函数）

作用：根据查询条件计算总页数，动态生成分页按钮。

收集查询条件：与loadData()一致（channelid、title、author）。
发送请求：向GetCount接口发送 GET 请求，获取符合条件的总数据条数。
生成分页按钮：
- 计算总页数：count = 总条数 / pageSize（向上取整）。
- 清空分页容器（.page）后，依次添加 “首页”“上一页” 按钮，再循环生成页码按钮（默认第一页高亮），最后添加 “下一页”“尾页” 按钮。

三、交互控制流程（用户操作响应）

1. 搜索按钮点击（.search点击事件）

2. 分页操作（页码、首页、尾页、上下页点击）

所有分页操作都会同步更新数据和分页按钮样式：

点击页码（.item点击事件）：
- 将page设为点击的页码值，调用loadData()加载对应页数据。
- 高亮当前页码按钮，移除其他页码的高亮样式。

点击尾页（.last点击事件）：
- 将page设为总页数（.item的数量），调用loadData()加载最后一页数据。
- 高亮最后一个页码按钮。

点击上一页（.prev点击事件）：
- 若当前是第一页，弹出提示并终止操作；否则page减 1，调用loadData()加载上一页数据。
- 高亮当前页码对应的按钮。

点击下一页（.next点击事件）：
- 若当前是最后一页，弹出提示并终止操作；否则page加 1，调用loadData()加载下一页数据。
- 高亮当前页码对应的按钮。

一、Servlet 核心流程

请求处理入口
- Servlet 通过 doGet/doPost 方法接收前端请求，是 Java Web 处理 HTTP 请求的基础入口
- 需掌握 HttpServletRequest（获取参数）、HttpServletResponse（设置响应、输出数据）的核心 API
参数获取
- request.getParameter("xxx")：获取前端通过 URL 或表单传递的参数
- 注意参数为空判断（null 或空字符串），避免空指针异常

二、数据库操作与 SQL 拼接

动态 SQL 拼接
- 根据前端条件（栏目、标题、作者等）动态拼接 WHERE 子句，实现条件查询
- 分页实现：LIMIT (page-1)*pageSize, pageSize，需掌握 MySQL 分页语法
多表联查
- SELECT content.*,channelname FROM content,channel WHERE content.channelid=channel.id
- 关联查询需注意表连接条件（content.channelid=channel.id），避免笛卡尔积
工具类封装
- MysqlUtil.getJsonBySql(sql, columns)：封装数据库查询、结果集转 JSON 的逻辑
- 需理解工具类如何执行 SQL、遍历 ResultSet、拼接 JSON 字符串

三、前后端交互规范

响应格式与编码
- response.setContentType("text/json;charset=utf-8")：固定响应为 JSON 格式，UTF-8 编码防乱码
- 前端通过 AJAX 接收 JSON 数据，需对应解析渲染
请求协同
- 前端 AJAX 请求（SearchChannel/SearchContent）与后端 Servlet 路由一一对应
- 参数命名规范：前后端保持一致（如 channelid/title）

四、功能模块实现

分页逻辑
- 前端传递 page/pageSize，后端计算偏移量 (page-1)*pageSize
- 结合 LIMIT 实现分页，需理解页码与数据区间的映射关系
数据渲染闭环
- 后端查询结果 → 转 JSON → 前端接收 → 动态渲染表格 / 下拉框
- 掌握前端 jQuery 动态拼接 DOM（如 append 生成表格行）与后端数据返回的协同

同步请求（Synchronous Request）
指任务按照顺序执行，前一个任务完成后，后一个任务才能开始。发起请求后，发起方会阻塞等待响应结果，期间无法执行其他操作。
类比：打电话时，必须等对方接电话并回应后，才能继续下一步交流，过程中不能同时处理其他事情。
异步请求（Asynchronous Request）
指任务无需等待前一个任务完成即可执行，发起请求后，发起方不会阻塞，而是继续处理其他任务，待请求结果返回后，再通过回调、事件等方式处理响应。
类比：发邮件时，发送后无需等待对方回复，可以继续做其他事，收到回复后再查看即可。