当前位置: 首页 > news >正文

Java项目基本流程(三)

一、页面初始化阶段(加载即执行)

  1. 加载栏目列表(同步请求)

    • 发送同步 AJAX 请求到SearchChannel接口,获取所有栏目数据。

    • 清空下拉框(.channelid)后,先添加 “全部” 选项,再循环生成各栏目对应的下拉选项(value 为栏目 ID,显示文本为栏目名称)。

    • 若请求失败,弹出 “出错啦” 提示。

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

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

二、数据加载与展示流程(核心功能)

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

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

  • 收集查询条件:获取下拉框选中的channelid(栏目 ID)、输入框的title(标题关键词)和author(作者关键词)。

  • 发送请求:向SearchContent接口发送 GET 请求,携带参数(channelidtitleauthorpagepageSize)。

  • 渲染表格

    • 若请求成功,从返回数据中提取列表arr,清空表格 tbody 后,循环生成表格行。

    • 每行包含:复选框、ID、栏目名称、标题、创建时间(只显示日期部分)、作者、图片、修改 / 删除按钮。

  • 若请求失败,弹出 “出错啦” 提示。

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

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

  • 收集查询条件:与loadData()一致(channelidtitleauthor)。

  • 发送请求:向GetCount接口发送 GET 请求,获取符合条件的总数据条数。

  • 生成分页按钮

    • 计算总页数:count = 总条数 / pageSize(向上取整)。

    • 清空分页容器(.page)后,依次添加 “首页”“上一页” 按钮,再循环生成页码按钮(默认第一页高亮),最后添加 “下一页”“尾页” 按钮。

三、交互控制流程(用户操作响应)

1. 搜索按钮点击(.search点击事件)

  • 重置当前页码为page = 1(回到第一页)。

  • 调用loadData():根据新条件加载第一页数据。

  • 调用loadPage():根据新条件重新计算总页数并更新分页按钮。

2. 分页操作(页码、首页、尾页、上下页点击)

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

  • 点击页码(.item点击事件)

    • page设为点击的页码值,调用loadData()加载对应页数据。

    • 高亮当前页码按钮,移除其他页码的高亮样式。

  • 点击首页(.first点击事件)

    • page设为 1,调用loadData()加载第一页数据。

    • 高亮第一个页码按钮。

  • 点击尾页(.last点击事件)

    • page设为总页数(.item的数量),调用loadData()加载最后一页数据。

    • 高亮最后一个页码按钮。

  • 点击上一页(.prev点击事件)

    • 若当前是第一页,弹出提示并终止操作;否则page减 1,调用loadData()加载上一页数据。

    • 高亮当前页码对应的按钮。

  • 点击下一页(.next点击事件)

    • 若当前是最后一页,弹出提示并终止操作;否则page加 1,调用loadData()加载下一页数据。

    • 高亮当前页码对应的按钮。

一、Servlet 核心流程

  1. 请求处理入口

    • Servlet 通过 doGet/doPost 方法接收前端请求,是 Java Web 处理 HTTP 请求的基础入口

    • 需掌握 HttpServletRequest(获取参数)、HttpServletResponse(设置响应、输出数据)的核心 API

  2. 参数获取

    • request.getParameter("xxx"):获取前端通过 URL 或表单传递的参数

    • 注意参数为空判断(null 或空字符串),避免空指针异常

二、数据库操作与 SQL 拼接

  1. 动态 SQL 拼接

    • 根据前端条件(栏目、标题、作者等)动态拼接 WHERE 子句,实现条件查询

    • 分页实现:LIMIT (page-1)*pageSize, pageSize,需掌握 MySQL 分页语法

  2. 多表联查

    • SELECT content.*,channelname FROM content,channel WHERE content.channelid=channel.id

    • 关联查询需注意表连接条件(content.channelid=channel.id),避免笛卡尔积

  3. 工具类封装

    • MysqlUtil.getJsonBySql(sql, columns):封装数据库查询、结果集转 JSON 的逻辑

    • 需理解工具类如何执行 SQL、遍历 ResultSet、拼接 JSON 字符串

三、前后端交互规范

  1. 响应格式与编码

    • response.setContentType("text/json;charset=utf-8"):固定响应为 JSON 格式,UTF-8 编码防乱码

    • 前端通过 AJAX 接收 JSON 数据,需对应解析渲染

  2. 请求协同

    • 前端 AJAX 请求(SearchChannel/SearchContent)与后端 Servlet 路由一一对应

    • 参数命名规范:前后端保持一致(如 channelid/title

四、功能模块实现

  1. 分页逻辑

    • 前端传递 page/pageSize,后端计算偏移量 (page-1)*pageSize

    • 结合 LIMIT 实现分页,需理解页码与数据区间的映射关系

  2. 数据渲染闭环

    • 后端查询结果 → 转 JSON → 前端接收 → 动态渲染表格 / 下拉框

    • 掌握前端 jQuery 动态拼接 DOM(如 append 生成表格行)与后端数据返回的协同

  • 同步请求(Synchronous Request)
    指任务按照顺序执行,前一个任务完成后,后一个任务才能开始。发起请求后,发起方会阻塞等待响应结果,期间无法执行其他操作。
    类比:打电话时,必须等对方接电话并回应后,才能继续下一步交流,过程中不能同时处理其他事情。

  • 异步请求(Asynchronous Request)
    指任务无需等待前一个任务完成即可执行,发起请求后,发起方不会阻塞,而是继续处理其他任务,待请求结果返回后,再通过回调、事件等方式处理响应。
    类比:发邮件时,发送后无需等待对方回复,可以继续做其他事,收到回复后再查看即可。

http://www.dtcms.com/a/326106.html

相关文章:

  • Orange的运维学习日记--38.MariaDB详解与服务部署
  • linux安装和使用git
  • Elasticsearch 官方 Node.js 从零到生产
  • docker部署elasticsearch-8.11.1
  • 网络的基本概念、通信原理以及网络安全问题
  • YOLOv6深度解析:实时目标检测的新突破
  • 时序数据库为什么选IoTDB?
  • 爬虫与数据分析结合案例
  • STM32 HAL驱动MPU6050传感器
  • p6spy和p6spy-spring-boot-starter的SpringBoot3集成配置
  • 高性能Web服务器
  • java基础概念(二)----变量(附练习题)
  • Go 语言三大核心数据结构深度解析:数组、切片(Slice)与映射(Map)
  • Unity插件DOTween使用
  • 【GPT入门】第45课 无梯子,linux/win下载huggingface模型方法
  • 如何避免团队文件同步过程中版本信息的丢失?
  • GAI 与 Tesla 机器人的具体联动机制
  • 变频器与伺服系统的工作原理,干扰来源及治理方式
  • 软件测试关于搜索方面的测试用例
  • [AI 生成] kafka 面试题
  • 是否有必要使用 Oracle 向量数据库?
  • 【图像处理基石】UE输出渲染视频,有哪些画质相关的维度和标准可以参考?
  • OmniHuman:字节推出的AI项目,支持单张照片生成逼真全身动态视频
  • 不同FPGA开发板系统移植步骤
  • 《C++中 type_traits 的深入解析与应用》
  • 【Docker实战进阶】Docker 实战命令大全
  • “底层闭源 + Lua 脚本” 开发模式
  • 缺省路由的内容
  • 基于51单片机指纹识别管理门禁密码锁系统设计
  • “鱼书”深度学习进阶笔记(3)第四章