Java项目基本流程（五）

一、整体流程概述

修改功能主要实现对已有内容（如文章、资讯等）的编辑更新，涉及前端页面数据回显、参数提交，以及后端接收参数、执行数据库更新操作的完整流程。核心目标是让用户能够修改已发布的内容，并将更新后的数据持久化到数据库中。

二、前端实现（update.js）

1. 页面初始化与数据回显

   • 获取待修改内容 ID：通过 Cookie 获取当前需要修改的内容 ID（var id = $.cookie("id")），该 ID 通常在进入修改页面前从列表页传入。
   • 加载栏目列表：通过 AJAX 请求SearchChannel接口，获取所有栏目数据并渲染到下拉选择框（channelid），用于选择内容所属栏目。
   • 回显内容数据：通过 AJAX 请求SearchContent接口，传入 ID 参数，获取该 ID 对应的内容详情，包括标题、作者、发布时间、图片、内容等，并填充到页面表单中：
     • 普通输入框（标题、作者、时间）直接通过val()赋值；
     • 图片通过<img>标签展示，并将图片路径存入隐藏域（imgurl）；
     • 富文本内容（content）通过编辑器（UE）的setContent()方法回显。

1. 图片上传功能

   • 监听文件选择框（.file）的change事件，当用户选择图片后，通过FormData构建表单数据，调用upload接口上传图片。
   • 上传成功后，更新预览图片（.show）和隐藏域（imgurl）的值，记录新的图片路径。

1. 提交修改请求

   • 点击 “修改” 按钮（.update）时，收集表单数据：栏目 ID、标题、作者、发布时间、富文本内容（通过ue.getContent()获取）、图片路径、内容 ID。
   • 通过 AJAX 请求UpdateServlet接口，以 POST 方式提交数据，等待后端处理结果。
   • 接收后端返回的 “修改成功 / 失败” 提示，弹窗显示结果后跳转回内容列表页（content.html）。

三、后端实现

1. 数据查询接口（SearchContent.java）

   • 作用：根据 ID 查询待修改的内容详情，用于前端回显。
   • 逻辑：
     • 接收前端传入的id参数；
     • 构建 SQL 查询语句，关联content表和channel表（获取栏目名称），通过id筛选数据；
     • 调用MysqlUtil.getJsonBySql()执行查询，将结果转换为 JSON 格式；
     • 设置响应类型为text/json，返回 JSON 数据给前端。

2. 栏目列表接口（SearchChannel.java）

   • 作用：提供所有栏目数据，用于修改时选择内容所属栏目。
   • 逻辑：
     • 执行 SQL 查询select * from channel，获取所有栏目 ID 和名称；
     • 转换为 JSON 格式后返回给前端，供下拉框渲染使用。

3. 更新处理接口（UpdateServlet.java）

   • 作用：接收前端提交的修改参数，执行数据库更新操作。
   • 逻辑：
     • 在doPost方法中接收前端传入的所有参数（栏目 ID、标题、作者、时间、内容、图片路径、内容 ID）；
     • 处理富文本内容中的引号（content.replaceAll("\"", "\'")），避免 SQL 语法错误；
     • 构建 UPDATE 语句：update content set ... where id=?，将新参数更新到content表中对应 ID 的记录；
     • 调用MysqlUtil.update()执行 SQL，根据受影响的行数判断修改是否成功；
     • 返回 “修改成功” 或 “修改失败” 的字符串提示给前端。