当前位置: 首页 > 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.lryc.cn/news/617642.html

相关文章:

  • SSM+Dubbo+Zookeeper框架和springcloud框架,写业务的时候主要区别在哪?
  • K8S学习----应用部署架构:传统、虚拟化与容器的演进与对比
  • Jenkins 搭建鸿蒙打包
  • 基于 ZooKeeper 的分布式锁实现原理是什么?
  • 车载软件架构 --- 车辆量产后怎么刷写Flash Bootloader
  • 品质检验·稽核管理·客诉管理一站式数字化平台——全星质量管理 QMS 软件系统
  • 打烊频率?阶段说了算
  • 【AI论文】R-Zero:从零数据起步的自进化推理大语言模型
  • 从源码看 Coze:Agent 的三大支柱是如何构建的?
  • AI测试平台实战:深入解析自动化评分和多模型对比评测
  • [CSP-J 2021] 小熊的果篮
  • 记录一些sonic自动化运行中的问题
  • “一车一码一池一充”:GB 17761-2024新国标下电动自行车的安全革命
  • 【C++竞赛】核桃CSP-J模拟赛题解
  • DreaMoving:基于扩散模型的可控视频生成框架
  • Android Coil3视频封面抽取封面帧存Disk缓存,Kotlin
  • 嵌入式学习的第四十八天-中断+OCP原则
  • 美股期权历史市场数据波动率分析教程
  • 软件测评中HTTP 安全头的配置与测试规范
  • U-Boot常用命令完全指南
  • 【浮点数存储】double类型注意点
  • nginx 设置二级目录-实战
  • 【LLM】OpenAI开源GPT级模型,120B及20B参数GPT-OSS
  • SQL中BETWEEN与IN的差异详解
  • 读《精益数据分析》:媒体内容平台全链路梳理
  • 【数据分析】调控网络分析:调节因子在肿瘤样本中的表达相关性与生存效应分析
  • 【k8s】k8s安装与集群部署脚本
  • 网络性能优化:Go编程视角 - 从理论到实践的性能提升之路
  • 定制化4G专网架构,满足多行业专属需求
  • 5G NR NTN 在 PHY 层和 MAC 层实现 OAI