简介面向JavaWeb初学者的九宫格日志网站毕业设计资料包涵盖项目源码、设计论文与汇报PPT适合正在筹备JSP课程设计或毕业设计的开发者参考。系统基于B/S结构后端采用MySQL数据库前端使用JSP动态页面技术整体围绕日记、美食、景点、新闻推荐、日志展示、论坛、留言板、收藏等核心内容展开管理员可维护用户、日记、美食、景点、新闻、日志、论坛及系统设置前台用户则可浏览、发布、收藏和留言。压缩包约25.18MB文件总数与具体类型明细暂未在下载页标注从标题可识别出JSP项目源码、设计论文与汇报PPT。目前已有58人学习浏览适合需要快速搭建同类功能模块、撰写毕业设计文档或准备答辩展示的读者通过对照源码、论文和PPT可了解完整设计思路、数据库表结构及前后台交互流程便于二次开发与论文写作。1. 九宫格日志网站这个 javaWeb 项目包里到底装了什么拿到一个“javaWeb项目源码-jsp九宫格日志网站-设计论文-汇报PPT”压缩包时多数人第一反应是先解压然后对着密密麻麻的 .java 和 .jsp 发懵。这个项目本质上是一个用 JSP Servlet MySQL 搭建的个人日志发布系统核心页面用 3x3 九宫格展示日志卡片是 JavaWeb 课程设计交付包里最常见的一种形态。它能一次性帮你解决三件事跑通一套完整 javaWeb 项目源码、看懂 JSP 页面与后端数据库的数据交互链路以及拿到一份可以直接按自己项目改写的毕业论文与答辩 PPT。适合 JavaWeb 初学者、需要交课程设计的学生以及想低成本搭一个个人日志站的开发者。接下来按“先把源码跑起来再改九宫格布局最后用论文和 PPT 收尾”的顺序拆。2. 用 IDEA 把 jsp 九宫格日志网站跑起来TomcatMySQL 最小配置这个项目的技术栈十年没大变JSP 做页面展示Servlet 接请求JDBC 连 MySQL。优点是不依赖 Spring 全家桶适合入门缺点是环境匹配稍不注意就翻车。下面这套配置是我按常见课设源码跑过很多次之后认为最稳的一条路径。2.1 拆解压缩包源码、论文、PPT 之间的依赖关系先把压缩包里的内容按用途分清避免把论文和源码搞混。常见的交付包目录大概是这样目录/文件作用交付后怎么处理src/Java 源码包含 Servlet、DAO、工具类直接导入 IDEAweb/ 或 WebContent/JSP 页面、CSS、JS、上传图片目录配置为 Web 根目录sql/ 或 db/建库建表脚本和初始数据先导入 MySQL设计论文.docx需求分析、数据库设计、系统测试改写为自己项目汇报PPT.pptx答辩演示用幻灯片改写并配合现场演示我的习惯是先看 sql 目录能不能导入再看 src 里的 db.properties 或 JDBC 工具类。原因很简单这个项目的入口不只在首页还在数据库。如果数据库脚本对不上源码里的字段名后面九宫格页面大概率查不出数据。别一上来就改代码先把“源码期望的数据库结构”搞清楚。2.2 环境约定JDK、Tomcat、MySQL 版本怎么配对版本选择上这个项目依赖的是 JSP/Servlet 老规范按最低成本配就行。我第一次跑这种课设源码时直接装了最新版 Tomcat 10结果 Tomcat 10 把 javax 包换成了 jakarta旧代码的 import javax.servlet 全部报错一整天没跑起来。所以记住一个原则看源码里 import 的是 javax 还是 jakartajavax 就用 Tomcat 8.5 或 9.0。环境推荐版本原因JDK1.8老代码兼容性最好不会遇到 module 限制IDEIntelliJ IDEA配置 Tomcat 和调试 Servlet 最顺手Tomcat8.5 或 9.0支持 javax.servlet与课设源码匹配MySQL5.7 或 8.05.7 驱动类名不同8.0 需要带时区参数MySQL 8.0 和 5.7 的差异也要提前确认5.7 的 JDBC 驱动类名是 com.mysql.jdbc.Driver8.0 之后变成 com.mysql.cj.jdbc.Driver。源码里写的是 DriverManager.getConnection连接串就会直接决定能不能连上库。先打开命令行确认环境再决定改不改代码java -version mysql --version命令输出会告诉你 JDK 和 MySQL 的大版本。如果 mysql 不是内部命令说明没把 MySQL 加进 PATH后续导入 SQL 会麻烦建议在系统环境变量的 PATH 里补上 MySQL 的 bin 目录。JDK 版本高于 8 时老 JDBC 通常也能跑但 Tomcat 还是建议按上面的表格选。2.3 IDEA 导入项目与配置 Tomcat 的完整步骤打开 IDEAFile - Open 选择解压后的目录。如果目录里有 pom.xmlIDEA 会按 Maven 方式导入如果是普通目录IDEA 只把它当作纯 Java 项目打开这时候要手动把 src 标记为 Sources Root把 web 目录标记成 Web 资源目录。标记方法右键目录 - Mark Directory as - Sources Root 或 Resources Root。这一步漏掉后面配置 Artifact 时会找不到页面文件。课程设计源码大多没有 Maven依赖的 jar 直接放在 web/WEB-INF/lib 下。IDEA 不会自动加载这个目录需要打开 Project Structure - Libraries点加号选择 lib 目录。否则编译时会出现“找不到 javax.servlet”的报错。注意如果你看到源码里有 servlet-api.jar它应该只参与编译不要把它的 jar 打进 war 包的 WEB-INF/lib 里否则 Tomcat 运行时会和自带的 servlet-api 冲突典型的症状是启动后实例化 Servlet 报 ClassCastException。配置 Tomcat 的路径是 Run - Edit Configurations点加号选 Tomcat Server - Local。关键参数有两处Deployment 里点加号选 Artifact选择项目的 war explodedApplication context 填 /jiugongge_log访问地址就是 http://localhost:8080/jiugongge_log/。如果没看到 Tomcat Server 选项先检查 IDEA 是否安装了应用服务器插件没有的话在 Plugins 里搜“Tomcat”装上。这里很多人的操作像黑匣子只知道点启动不知道 Application context 填了什么地址配错后 CSS、图片全部 404而且报错位置不在启动日志里排查半天。2.4 修改数据库连接配置并初始化数据源码里一定有一个地方放数据库连接信息常见的文件名是 db.properties、jdbc.properties或者直接在 JDBCUtil.java 里写死。找到后把连接串改成你自己的库下面是 MySQL 8.0 的标准写法jdbc.drivercom.mysql.cj.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/jiugongge_log?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8 jdbc.usernameroot jdbc.password123456这里每个参数都别删useSSLfalse 是关掉 SSL 警告serverTimezoneAsia/Shanghai 解决 MySQL 8 报的时区异常characterEncodingutf8 保证写入数据库的中文不是问号。如果你本地是 MySQL 5.7把 driver 换成 com.mysql.jdbc.DriverserverTimezone 也可以不写。username 和 password 改成你本地的值不要照抄 root/123456否则客户端连接阶段就会报 Access denied。接下来导入数据库脚本。回到命令行确认能连上 MySQL 后执行mysql -u root -p sql/jiugongge_log.sql执行后没有输出就是成功。如果不放心再查一下表是否存在mysql -u root -p -e use jiugongge_log; show tables;如果 show tables 能看到 user、log、category 等表说明脚本导入成功。注意不要在 Windows 的记事本里把 SQL 文件另存为 UTF-8 以外的编码否则表里的中文注释和初始数据会乱码这不是 SQL 语法问题是文件编码问题。课设脚本里如果有 drop database 语句导入前确认库名不是你要保留的其他库压缩包里的脚本往往会先 drop 再 create一不注意就把本地同名库覆盖了。2.5 启动并验证首页路径配置完成后点绿色三角启动控制台会输出 Tomcat 启动日志。等出现 “Server startup in [xxx] milliseconds” 说明 Tomcat 起来了。然后浏览器访问http://localhost:8080/jiugongge_log/index.jsp如果出现 404 或 500先看 IDEA 控制台的第一行报错不要直接改代码。常见的 500 错误是数据库驱动没加载回到 2.3 检查依赖 jar 是否在 Libraries 里常见的 404 是 Application context 配错了回到 2.3 检查 Deployment。建议把启动日志和数据源日志分开看Tomcat 日志只说明容器状态SQL 层面的错误要看堆栈里有没有 com.mysql 开头的行。遇到报错就按这个顺序查先确认 MySQL 服务在跑再确认连接串里库名正确最后看驱动 jar 版本而不是反复重启 Tomcat 碰运气。3. 九宫格布局与日志卡片渲染JSP 里用 CSS Grid 做定位项目跑通后九宫格页面是第一个值得动手改的地方。很多人的诉求是“jsp 图片如何对坐标定位”其实九宫格日志网站里的坐标定位不是像素级的 x/y而是把页面切成 3x3 的格子每个日志卡片落在一个格子里点击进入详情。这个“坐标”由格子编号决定。3.1 九宫格定位为什么用 CSS Grid 而不是像素坐标所谓九宫格日志首页是一个 3x3 的网格每个格子放一张日志卡片。如果直接给每张图片写死 top/left 像素值换一张不同尺寸的封面图就错位了。所以坐标定位的第一原则是用网格结构定位不要用像素手工摆放。CSS Grid 是这一步的首选Flexbox 也能实现但九宫格这种同时控制行列的结构Grid 更直观。布局核心代码如下.grid-nine { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; width: 960px; margin: 0 auto; } .grid-cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; cursor: pointer; border: 1px solid #e5e5e5; }代码逻辑是先声明一个 960px 宽的网格容器repeat(3, 1fr) 让三列平分宽度aspect-ratio: 1/1 强制每个格子是正方形这样无论屏幕多大九宫格都不会拉变形。gap 控制卡片间距overflow: hidden 配合后面的背景图裁切防止图片圆角处溢出。参数说明width 可以根据页面主体宽度改内容区是 1200px 就改成 1200pxgap 想要紧凑改 8px想要疏松改 16px1fr 的意思是等分剩余空间不要改成固定像素来对齐。九宫格的“坐标”在代码层面对应的是 grid_position 字段常用的编号规则是 1 到 9和键盘小键盘布局一致grid_position位置说明1左上第一行第一列2上中第一行第二列3右上第一行第三列4左中第二行第一列5正中第二行第二列6右中第二行第三列7左下第三行第一列8下中第三行第二列9右下第三行第三列这个编号规则后端排序要用前端也要按这个语义去理解数据。JSP 页面本身不关心编号它只需要按顺序输出九个元素CSS Grid 会自动把它们放到对应位置。3.2 图片在卡片里的坐标对齐与裁切格子是结构图片是内容。九宫格封面图的常见坑是图片比例不一致有的被拉伸有的只显示左上角。要解决“jsp 图片如何对坐标定位”最稳的做法是让图片作为背景图用 background-position 控制显示区域.cell-bg { width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; }background-size: cover 让图片等比放大铺满格子多出来的部分会被裁掉background-position: center center 定的是“裁切窗口”的位置也就是默认保留图片正中。如果你想让某类日志的封面固定显示上半部分把 background-position 改成 center top这就是最实用的坐标定位方式。另一种做法是直接用 img 标签加 object-fit: cover效果接近但旧版浏览器对 object-fit 的支持不如 background-position 好课设演示时浏览器不确定所以我一般选背景图方式。背景图的劣势是需求方想要“点击图片放大原图”时背景图拿不到原始 DOM 节点而 img 可以拖拽或放大。如果项目里有预览需求可以改成 img但裁切逻辑要换 object-fit。3.3 JSP 循环输出九宫格卡片布局写好后页面里的九个格子不能让 JSP 手写九个 div而是从数据库查日志列表循环输出。这里用 JSTL 的 forEach 最合适% taglib prefixc urihttp://java.sun.com/jsp/jstl/core % div classgrid-nine c:forEach items${logList} varlog varStatusst a classgrid-cell hrefdetail.jsp?id${log.id} div classcell-bg stylebackground-image: url(${log.coverImage}); background-position: center center; background-size: cover;/div div classcell-info h3${log.title}/h3 span${log.createTime}/span /div /a /c:forEach /div这段 JSP 的逻辑c:forEach 遍历 Servlet 放在 request 里的 logList每项是一个日志对象var“log”定义循环变量访问属性用 EL 表达式。background-image 用内联样式因为每张封面图路径不一样写死在 CSS 里做不到。href 指向 detail.jsp 并带 id 参数点击卡片进详情。注意 varStatus“st” 提供了循环下标如果某个位置需要显示“第几格”可以用 ${st.index 1} 定位比如给格子加左上角角标。更关键的是如果数据库里日志不够 9 条九宫格会缺角布局会塌。这时要在渲染前补齐空位常见做法是后端把 logList 补到 9 个元素空位元素 id 为 0前端遇到 id 为 0 时只显示占位样式不跳转c:forEach items${logList} varlog varStatusst c:choose c:when test${log.id 0} div classgrid-cell empty/div /c:when c:otherwise a classgrid-cell hrefdetail.jsp?id${log.id} !-- 卡片内容 -- /a /c:otherwise /c:choose /c:forEach这样做的好处是后端不用关心页面结构前端始终能渲染出完整的 3x3 骨架数据库数据少时也不影响视觉。补位逻辑放后端还是前端都行我习惯放后端的 Service 层因为 DAO 只负责查询补位属于组装逻辑。3.4 别用 Table 和绝对定位做九宫格很多老课设代码里九宫格是用 table 三行三列拼出来的或者每个格子一个 position: absolute 加 left/top。table 的问题是很容被内容撑变形响应式调整时很难处理绝对定位的问题是一换封面图、一改标题长度格子就对不齐。这两个方案屏幕固定时没问题一旦评委用笔记本投屏比例一变就翻车。CSS Grid 的另一个好处是移动端适配只改一行在媒体查询里把 grid-template-columns 改成 repeat(1, 1fr) 或 repeat(2, 1fr)九宫格自动变单列或两列。日志网站作为 jsp 个人信息展示页面时这个适配能力很实用media (max-width: 768px) { .grid-nine { grid-template-columns: repeat(2, 1fr); width: 100%; } }JSP 页面本身不需要关心布局容器宽度变了 Grid 自动重排这也是我推荐用它做课设的原因。答辩时如果评委问“九个格子是怎么定位的”直接回答“用的是 CSS Grid 的网格线格子的位置由 grid_position 字段对应”比说“我用绝对定位算坐标”更有说服力。4. 数据库设计与日志发布链路从 form 表单到九宫格展示九宫格只是前端展示层真正决定项目能不能答辩的是“发布日志 - 存数据库 - 查询出来填进九宫格”这条完整链路。这一章按 javaweb 项目完整案例 mysql 的标准做法往下拆。4.1 日志表、分类表与用户表怎么设计九宫格日志网站至少需要三张表用户表、分类表、日志表。日志表是核心用户表和分类表用于扩展权限和筛选。表结构设计直接影响后面的查询复杂度我第一次照着别人的表结构抄结果把图片路径和内容存在一个字段里九宫格加载慢得不行。下面是常见做法CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(64) NOT NULL, nickname VARCHAR(50), create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE category ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(30) NOT NULL ); CREATE TABLE log ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, category_id INT, title VARCHAR(100) NOT NULL, content TEXT, cover_image VARCHAR(255), grid_position TINYINT COMMENT 九宫格位置1-9, status TINYINT DEFAULT 1 COMMENT 1显示 0隐藏, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME ON UPDATE CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES user(id), FOREIGN KEY (category_id) REFERENCES category(id) );这里的关键字段按用途拆开说字段类型为什么这么设titleVARCHAR(100)日志标题100 长度足够且检索快contentTEXT正文长度不定TEXT 不会限制太长文本cover_imageVARCHAR(255)存相对路径不存二进制避免表体积膨胀grid_positionTINYINT存 1-9 的编号不存 x/y 像素值便于排序和调整statusTINYINT隐藏/显示日志答辩时可演示不删数据update_timeDATETIME配合 ON UPDATE编辑后自动刷新时间外键在这里是课设标配能加分说明有表关系意识但生产环境一般不用物理外键免得删数据时约束冲突。如果源码里没有 category 表可以只保留 user 和 log 两张表九宫格展示只需要 title、cover_image、create_time、grid_position 四个字段就够。4.2 日志发布JSP 表单提交与 Servlet 接收九宫格里的日志不是写死在页面上的是通过发布表单进来的。发布页的核心是表单提交用 multipart/form-data 是因为要带封面图片form actionpublish methodpost enctypemultipart/form-data input typetext nametitle placeholder日志标题 / textarea namecontent rows6 placeholder正文内容/textarea select namecategoryId option value1日常/option option value2旅行/option /select input typefile namecoverImage acceptimage/* / label九宫格位置 select namegridPosition option value1左上/option option value5正中/option option value9右下/option /select /label button typesubmit发布/button /form表单里 gridPosition 让用户选择日志落在哪个格子这在课设演示时很直观。action 指向 publish 这个 Servlet路径由注解决定所以没有 .do 后缀。表单提交后Servlet 的 doPost 负责接收参数、处理图片、调用 DAO 入库再重定向回首页WebServlet(/publish) public class PublishServlet extends HttpServlet { protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding(UTF-8); String title req.getParameter(title); String content req.getParameter(content); int categoryId Integer.parseInt(req.getParameter(categoryId)); int gridPosition Integer.parseInt(req.getParameter(gridPosition)); int userId (Integer) req.getSession().getAttribute(userId); Part part req.getPart(coverImage); String coverPath uploadUtil.save(part, req); Log log new Log(userId, categoryId, title, content, coverPath, gridPosition); logDao.insert(log); resp.sendRedirect(index); } }这段代码的先后顺序不能乱setCharacterEncoding 必须在第一个 getParameter 之前否则中文参数已经按 ISO-8859-1 解析完了再设置也救不回来session 里取 userId 说明发布日志前用户已经登录uploadUtil.save 是自定义工具方法负责把上传的 Part 写入磁盘最后 sendRedirect 让浏览器重新请求首页九宫格查询就能拿到刚插入的数据。常见做法是日志对象用参数构造器传进来而不是让 DAO 接收十几个散参数。如果看到 new Log() 再逐个 setter 赋值效果一样但可维护性差一些。课设答辩时能讲清楚“request - Servlet - DAO - DB”这条链就够了。注意如果表单里没传 gridPositionInteger.parseInt(null) 会抛 NumberFormatException要在后端做一个默认值兜底比如解析失败时默认给 1。4.3 首页九宫格的数据查询与渲染发布链路的后半段是查询。首页 Servlet 从数据库里取日志列表放到 request 域再 forward 到 index.jsp。查询逻辑看似简单但有个细节决定了九宫格顺序对不对public ListLog findLogsForGrid() throws SQLException { String sql SELECT id, title, cover_image, create_time, grid_position FROM log WHERE status 1 ORDER BY grid_position ASC, create_time DESC; try (PreparedStatement ps conn.prepareStatement(sql)) { ResultSet rs ps.executeQuery(); ListLog list new ArrayList(); while (rs.next()) { Log log new Log(); log.setId(rs.getInt(id)); log.setTitle(rs.getString(title)); log.setCoverImage(rs.getString(cover_image)); log.setCreateTime(rs.getTimestamp(create_time)); log.setGridPosition(rs.getInt(grid_position)); list.add(log); } return list; } }ORDER BY grid_position ASC 是九宫格布局的命脉。没有这个排序数据库按插入顺序返回位置 5 的日志可能排在第一个格子前端渲染出来就是乱的。再加 create_time DESC 作为同位置日志的排序规则保证刷新后位置稳定。status1 过滤隐藏日志这个字段在答辩时可以演示“隐藏后首页消失”比删数据安全。查询只取四个字段是有意的九宫格页面不需要正文取 content 会把大文本拉出来增加 JDBC 传输和内存开销。详情页再按 id 查一次完整内容。这种“列表页查精简字段、详情页查全量字段”的做法写进论文性能分析也是加分项。如果项目里的 log 对象有 content 属性但值为 null前端 EL 表达式输出空字符串不影响布局不用额外处理。4.4 图片上传的落盘路径与数据库存储策略图片上传是九宫格日志网站里最容易埋雷的地方。上传图片的落盘路径直接影响刷新后图片还在不在。常见方案是把图片写到 webapp 的 uploads 目录数据库只存相对路径public static String save(Part part, HttpServletRequest req) throws IOException { String dir req.getServletContext().getRealPath(/uploads); File dirFile new File(dir); if (!dirFile.exists()) { dirFile.mkdirs(); } String original part.getSubmittedFileName(); String fileName System.currentTimeMillis() _ original; part.write(dir File.separator fileName); return uploads/ fileName; }这里有两个关键点。第一文件名必须重命名。直接保留用户上传文件名两个不同用户上传同名的 a.jpg后一个会覆盖前一个九宫格里图片全糊。用 System.currentTimeMillis() 加时间戳前缀简单有效。第二数据库存相对路径 uploads/xxx.jpg页面引用时拼上项目上下文网站挪到别的端口或域名下图片路径也跟着走这是相对路径最大的好处。如果存绝对路径 D:/tomcat/uploads/xxx.jpg换机器就全 404。还有一个真实存在的坑IDEA 里用 war exploded 部署时getRealPath 返回的是 target 下的临时目录重启 Tomcat 后文件可能被清掉导致上传成功但重启后图片消失。常见补救办法有两种一是把上传目录改成外部绝对路径比如 D:/uploads然后给 Tomcat 加虚拟目录映射二是答辩前把项目打成 war 包部署到 Tomcat 的 webapps 下用生产部署方式跑。课设阶段我一般用后者保底。图片路径如果出现 404优先看数据库存的是相对路径还是绝对路径这个定位比改代码快得多。5. 运行时避坑指南乱码、图片路径与九宫格错位的 5 个排查案例前面讲的是正常链路这一章是跑项目时最常踩的坑。这些坑我基本都踩过按“现象 - 原因 - 解决”写清楚。如果项目跑不起来优先来这里对号入座。5.1 页面中文全变问号三处编码必须统一现象九宫格页面标题、日志正文在浏览器里显示正常但发布新日志后首页显示的问号一串串数据库里查出来也是乱码。原因JSP 页面用 UTF-8 接收但 Servlet 没设置请求编码Tomcat 默认按 ISO-8859-1 解析表单参数数据库连接串里没带 characterEncoding字符集在传输链路中丢失。这是 JavaWeb 老项目最常见的玄学问题其实不是玄学是三处编码各管一段。解决三处都统一成 UTF-8。第一处JSP 第一行写 % page contentTypetext/html;charsetUTF-8 pageEncodingUTF-8 %第二处Servlet 的 doPost 第一行加 req.setCharacterEncoding(UTF-8)第三处JDBC URL 末尾加 characterEncodingutf8MySQL 表结构默认字符集用 utf8mb4。改完重启 Tomcat乱码基本消失。注意不要在 JSP 里同时用 HTML 的 meta charset 和 pageEncoding 却互相矛盾IDE 有时会自己补一个造成声明编码和实际解码不一致。提示排查乱码时先用 SQL 工具直接看一下数据库里的数据。数据库正常、页面乱码问题在输出链路数据库本身乱码问题在写入链路不用两边一起改。5.2 图片上传成功但刷新后 404现象发布日志时选了封面图提示成功立即回首页能看到图浏览器一刷新图片裂了控制台报 404。原因这通常是 GET 请求的图片路径和上传落盘路径不一致。最常见的是数据库里存了完整绝对路径 C:/xxx/uploads/xx.jpg而 JSP 页面拼接时又加了一层项目上下文变成 http://localhost:8080/jiugongge_log/C:/xxx/uploads/xx.jpg另一种是 IDE 热部署把图片写进了 target 临时目录重启后文件被清。两者现象一样但解决路径完全不同。解决先把数据库里 cover_image 字段改成相对路径格式 uploads/文件名页面上用 ${pageContext.request.contextPath}/uploads/xx.jpg 拼接。然后看部署方式如果是 IDEA 的 war exploded图片写到 target 目录重启容易丢改成外部目录加虚拟映射更稳在 tomcat/conf/server.xml 的 Host 节点加Context path/uploads docBaseD:/logs/uploads /这样图片物理存储在 D:/logs/uploadsURL 走 /uploads/xx.jpg不受项目重部署影响。如果不想动 server.xml至少保证 IDEA 里 Run Configuration 的部署方式选 war exploded而不是 war。这个问题的排查顺序是先看浏览器地址栏里的图片 URL 和文件系统路径对不对得上再管部署目录。别一上来就改代码先定位 404 的路径前缀。5.3 九宫格顺序乱跳查询没按 grid_position 排序现象数据库里 grid_position 明明是 1 到 9首页九宫格却把第 8 条日志排到了第一个格子刷新一次顺序还会变。原因DAO 的查询 SQL 没有 ORDER BY grid_positionMySQL 默认按主键或插入顺序返回。如果用户编辑过日志update_time 变化配合某些 order by 条件顺序就看起来随机。还有一种情况是发布时 grid_position 传了 0多个格子都等于 0排序自然乱。解决查询 SQL 统一加上 ORDER BY grid_position ASC, create_time DESC并检查所有查询语句而不是只在首页 Servlet 里改。发布表单里的 gridPosition 下拉框要有默认值后端解析失败时给一个 1-9 范围内的默认值不能直接让 TINYINT 字段接收 null。排查时用 mysql 客户端手跑一条 SELECT id, grid_position FROM log ORDER BY grid_position; 先看数据本身乱不乱数据乱是写入问题数据不乱是查询问题。这样能少走一半弯路。5.4 IDEA 启动后访问首页 404Artifact 没部署现象Tomcat 启动日志正常控制台显示 Server startup in 500 ms但浏览器访问首页一直 404改端口也没用。原因IDEA 的 Run Configuration 里Deployment 标签页没有添加项目 ArtifactTomcat 起来后 webapps 下根本没有你的项目。另一个常见原因是 Application context 填的是 /而浏览器访问的是 /jiugongge_log两边路径对不上。解决Run - Edit Configurations找到 Tomcat 配置在 Deployment 点加号选择 Artifact选择项目 war explodedApplication context 填 /jiugongge_log。保存后重新启动。如果 Deployment 里没有可用 Artifact先打开 Project Structure - Artifacts点加号添 Web Application Exploded选择项目。还有一个伴随问题JSP 文件修改后要重新构建IDEA 有时不会自动热部署按 CtrlF9 手动 Build 一下再刷新页面。注意如果启动日志里出现 “Deployment is not assembled”说明 Artifact 里没把 web 目录加进去。回到 Project Structure - Artifacts确认 Output Layout 里有 web 下的所有文件和 WEB-INF/lib 里的 jar。5.5 MySQL 驱动加载失败与时区报错现象点击启动 Tomcat 后页面 500控制台堆栈出现 ClassNotFoundException: com.mysql.jdbc.Driver 或 CommunicationsException时区信息是一串乱码。原因前者是 MySQL 版本和驱动不匹配。MySQL 8.0 之后官方驱动类名改为 com.mysql.cj.jdbc.Driver源码里还写 com.mysql.jdbc.Driver老 jar 加载不到类。后者是 MySQL 8 的 JDBC 连接必须显式声明时区URL 里没带 serverTimezone驱动不知道用哪个时区。解决按 MySQL 版本替换驱动 jar。mysql-connector-java 5.1.x 配 MySQL 5.7 没问题配 8.0 建议换 mysql-connector-j 8.0.x代码里统一写 com.mysql.cj.jdbc.Driver。URL 补上 serverTimezoneAsia/Shanghai。改完记得把 web/WEB-INF/lib 里旧 jar 删掉两个版本同时存在会撞类。排查时优先看完整堆栈第一行是 SQLException 而不是 ClassNotFoundException多半是账号密码或端口问题先用命令行验证 mysql -u root -p 能不能连上再怀疑代码。6. 从“能跑”到“能答辩”日志网站的验证清单与 PPT 汇报节奏项目能启动只是第一步答辩时真正的差距在“能不能演示完整链路”。我给自己定的验证清单是注册新用户、登录、发表带封面的日志并选格子位置、回首页确认九宫格出现对应卡片、点卡片进详情、编辑后标题和图片更新、删除后卡片消失。这七步走完评委问“你的项目实现了什么”就有底气。一个容易被忽视的小技巧是 JSP 页面在图片加载完后自动刷新一次避免九宫格背景图首次渲染时因浏览器缓存或懒加载显示空白。做法是在 index.jsp 尾部挂一个 window.onload 判断用 session 里标记控制只刷新一次防止死循环刷屏。这个细节在演示现场很加分因为评委看到的第一眼往往是九宫格封面图有没有立即渲染出来。PPT 汇报节奏上不要从头念论文。先讲一个具体场景用户想按九宫格快速记录和浏览日志然后展示技术架构重点讲 JSP 页面、Servlet、JDBC 如何分工再现场演示发布和展示链路。每条避坑经历都是好素材讲你修过 404 或乱码的经历比讲概念更能让评委相信项目是你做的。论文和 PPT 里的截图要和源码当前状态一致我当年吃过亏论文里是旧布局截图演示时页面和论文对不上被问住了。从那以后我养成了习惯改完代码就重截关键页面图同步更新论文。希望你少走这一步弯路从拿到源码那天起就把文档和代码同步维护希望帮到你。本文还有配套的精品资源点击获取