JSP+MySQL九宫格日志系统：轻量级B/S架构毕设实战

简介：本资源是一套完整的JavaWeb毕业设计项目源码及配套材料，面向计算机专业本科生、Java初学者与课程设计实践者，解决毕业设计选题难、系统开发流程不清晰、前后端功能模块整合经验不足等实际问题。压缩包为ZIP格式，大小25.18MB，包含JSP动态页面、Servlet控制逻辑、MySQL建表脚本、数据库备份文件、系统设计论文（含需求分析、架构设计、ER图与测试用例）、答辩PPT及项目部署说明文档，覆盖从编码实现到成果展示的全链路交付内容。目前已有58人学习下载，适合用于课程设计参考、毕设快速启动或JSP+MySQL+B/S架构的实战复现。读者可直接导入Tomcat运行系统，完整体验管理员后台（含用户、日记、美食、景点、新闻、论坛、收藏、留言等12类管理模块）与前台门户（首页、信息分类展示、个人中心、后台跳转等）双端交互逻辑，同时获得规范的软件工程文档范本与可调试源码结构。

1. 九宫格日志网站：不是炫技的前端布局，而是用JSP+MySQL把“内容分层运营”落地成可答辩、可部署、可扩展的毕设实体

你可能第一眼被“九宫格”三个字带偏了——以为这是个纯前端切图作业，靠CSS Grid堆出九个卡片就完事。但实际翻过几十份学生交上来的所谓“九宫格日志系统”，八成卡在登录跳转404、收藏功能点不动、后台删了数据前台还缓存着旧记录这些基础链路上。这套方案真正解决的，是B/S架构下，一个轻量级内容型Web系统如何用JSP原生技术栈（不依赖Spring Boot封装）完成用户角色隔离、多模块内容联动、前后台状态同步这三道毕业设计硬门槛。它面向两类人：一是课程设计要交完整MVC三层结构代码+数据库脚本+PPT汇报逻辑链的学生；二是导师明确要求“禁用框架、手写Servlet调度、必须体现JDBC事务控制”的硬核验收场景。所有功能模块不是罗列出来的菜单项，而是按“内容生产（管理员）→内容消费（用户）→内容沉淀（收藏/留言/论坛）”这条真实日志社区动线闭环设计的。连“新闻推荐”模块都做了冷启动策略：新用户首次访问时默认展示3条高热度景点日志+2条本周美食TOP5，而不是空屏或随机抓取——这种细节，才是答辩时老师追问“你怎么保证用户体验一致性”的底气来源。

---

2. 总体架构设计：B/S三层结构与七个核心模块的职责边界划分

2.1 技术选型依据：为什么坚持用原生JSP而非Spring Boot？

很多同学看到“Java Web”第一反应就是Spring Boot，但本方案刻意回归Servlet+JSP+JavaBean经典组合，原因很实在：

• 教学对齐性：高校《Java Web程序设计》课程实验普遍基于Tomcat原生容器，Spring Boot的自动配置会掩盖request/response生命周期、Filter链执行顺序等关键考点；
• 调试可见性：当LoginServlet里request.getParameter("username")返回null时，你能直接在debug模式下看到request对象里到底有没有这个参数，而不是陷入Spring MVC的@RequestParam隐式转换黑匣子；
• 部署极简性：整个WAR包解压后，WEB-INF/web.xml里只有6个servlet映射，lib目录仅含mysql-connector-java-5.1.47.jar和jstl-1.2.jar，没有Maven依赖冲突导致的ClassNotFoundException玄学问题。

提示：若学校机房Tomcat版本为7.x，请将web.xml头声明改为<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">，否则启动报错。

2.2 模块化分层：从数据库表到JSP页面的映射逻辑

系统并非简单按“管理员/用户”二分，而是按数据所有权和操作权限粒度拆解为七个内聚模块，每个模块对应独立的数据表、DAO类、Servlet控制器及JSP视图：

模块名称	核心数据表	关键业务逻辑	JSP页面路径
日记信息管理	diary_info	支持富文本编辑（通过<textarea>+CSS美化），按日期倒序分页，支持标签分类筛选	/admin/diary/list.jsp
美食信息管理	food_info	图片上传路径存数据库，文件物理存储在/upload/food/，删除时同步清理磁盘文件	/admin/food/add.jsp
景点信息管理	scenic_spot_info	经纬度字段为VARCHAR(20)，兼容百度/高德地图API调用，避免DECIMAL精度丢失风险	/front/scenic/detail.jsp?id=123
新闻推荐管理	news_recommend	is_hot布尔字段控制首页九宫格置顶，sort_order整型字段定义展示优先级（值越小越靠前）	/front/news/recommend.jsp
论坛管理	forum_post,forum_reply	采用“帖子主表+回复子表”设计，避免单表无限膨胀；post_status字段区分审核中/已发布/已删除	/front/forum/post_list.jsp
我的收藏管理	user_collection	联合主键(user_id, content_type, content_id)，content_type枚举值：'diary','food','scenic'	/front/user/collection.jsp
留言板管理	message_board	reply_content字段允许为空，实现“仅留言不回复”场景；create_time用NOW()函数自动填充	/front/message/list.jsp

这种划分让答辩时能清晰回答：“为什么论坛要单独建forum_reply表而不是在forum_post加reply_text字段？”——因为回复可能有多层嵌套，且需独立统计点赞数，单表设计会导致查询复杂度指数级上升。

2.3 数据库设计：MySQL 5.7下的12张表与外键约束实践

数据库共12张表，严格遵循第三范式，重点解决三个易错点：

• 用户角色分离：user_info表存储基础账号信息（用户名、密码、邮箱），admin_info表仅存管理员特有字段（如admin_level权限等级），避免user_info出现大量NULL值；
• 内容类型泛化：user_collection表通过content_type（ENUM('diary','food','scenic','news')）和content_id实现跨模块收藏，比为每种内容建单独收藏表更易维护；
• 状态机设计：message_board表的status字段取值为'pending'（待审核）、'published'（已发布）、'rejected'（已拒绝），禁止用0/1数字编码，提升SQL可读性。

关键建表语句示例（user_collection）：

CREATE TABLE user_collection ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, content_type ENUM('diary','food','scenic','news') NOT NULL, content_id BIGINT NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_user_content (user_id, content_type, content_id), FOREIGN KEY (user_id) REFERENCES user_info(id) ON DELETE CASCADE ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

注意：ON DELETE CASCADE确保用户注销时自动清理其所有收藏，避免产生脏数据。若学校MySQL版本低于5.7，需将utf8mb4改为utf8，否则中文插入报错。

2.4 前后台路由体系：web.xml中14个Servlet映射的调度逻辑

整个系统的请求入口全部由web.xml明确定义，杜绝@WebServlet注解带来的部署不确定性。核心调度规则：

• 所有/admin/*路径请求由AdminAuthFilter过滤器拦截，验证session中adminId是否存在；
• 所有/front/*路径请求由UserAuthFilter过滤，检查userId有效性；
• 静态资源（.css/.js/.jpg）不经过Filter，直接由Tomcat容器处理，避免Filter误拦截导致样式失效。

web.xml关键片段：

<!-- 管理员登录 --> <servlet> <servlet-name>LoginAdminServlet</servlet-name> <servlet-class>com.jweb.servlet.admin.LoginAdminServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginAdminServlet</servlet-name> <url-pattern>/admin/login</url-pattern> </servlet-mapping> <!-- 用户收藏操作 --> <servlet> <servlet-name>CollectionServlet</servlet-name> <servlet-class>com.jweb.servlet.front.CollectionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CollectionServlet</servlet-name> <url-pattern>/front/collection</url-pattern> </servlet-mapping>

这种显式映射让答辩时能指着web.xml说：“老师您看，第37行定义了收藏功能的URL，它对应CollectionServlet类，这个类里第89行调用了CollectionDAO.addCollection()方法——这就是从点击按钮到数据库写入的完整链路。”

---

3. 核心模块实现：九宫格首页渲染、跨模块收藏、新闻推荐算法的代码级落地

3.1 九宫格首页：CSS Grid + JSTL动态生成的响应式布局

首页九宫格不是静态HTML，而是根据后台配置动态渲染。关键设计点：

• 数据源统一：IndexServlet从数据库查出12条内容（日记4条+美食3条+景点3条+新闻2条），按sort_order排序后存入request域；
• 模板复用：所有九宫格卡片使用同一套JSP片段/common/tile-item.jsp，通过<c:forEach>循环传入不同数据；
• 移动端适配：CSS中grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))确保在手机端自动变为单列，PC端保持三列。

index.jsp核心代码：

<div class="grid-container"> <c:forEach items="${contentList}" var="item" varStatus="status"> <div class="grid-item"> <a href="${pageContext.request.contextPath}/front/${item.contentType}/detail.jsp?id=${item.id}"> <img src="${pageContext.request.contextPath}/${item.imgPath}" alt="${item.title}" onerror="this.src='${pageContext.request.contextPath}/images/default.jpg'"> <h3>${fn:substring(item.title, 0, 12)}${fn:length(item.title) > 12 ? '...' : ''}</h3> <p class="date">${fn:substring(item.createTime, 0, 10)}</p> </a> </div> </c:forEach> </div>

设计说明：onerror属性是血泪经验——当某条美食记录的图片路径错误时，自动回退到默认图，避免九宫格出现空白缺口破坏布局。fn:substring截断标题防止超长文字撑破卡片，这是答辩时老师常问“怎么处理异常数据”的标准答案。

3.2 跨模块收藏功能：一次点击触发三张表联动的事务控制

收藏操作看似简单，实则涉及三张表：user_collection（记录关系）、user_info（校验用户）、diary_info（校验内容存在）。必须用JDBC事务保证原子性，否则出现“收藏成功但内容不存在”的脏状态。

CollectionServlet.java关键逻辑：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Long userId = (Long) request.getSession().getAttribute("userId"); String contentType = request.getParameter("type"); // 'diary','food'... Long contentId = Long.parseLong(request.getParameter("id")); Connection conn = null; try { conn = JDBCUtil.getConnection(); // 自定义工具类，获取连接 conn.setAutoCommit(false); // 关键：开启事务 // 1. 校验用户是否存在 UserDAO userDAO = new UserDAO(); if (!userDAO.existsById(conn, userId)) { throw new RuntimeException("用户不存在"); } // 2. 校验内容是否存在（根据不同type查不同表） boolean contentExists = false; switch(contentType) { case "diary": contentExists = new DiaryDAO().existsById(conn, contentId); break; case "food": contentExists = new FoodDAO().existsById(conn, contentId); break; // ... 其他case } if (!contentExists) { throw new RuntimeException("内容不存在"); } // 3. 插入收藏记录 CollectionDAO collectionDAO = new CollectionDAO(); collectionDAO.addCollection(conn, userId, contentType, contentId); conn.commit(); // 提交事务 response.getWriter().write("{\"code\":200,\"msg\":\"收藏成功\"}"); } catch (Exception e) { if (conn != null) { try { conn.rollback(); } catch (SQLException ex) {} } response.getWriter().write("{\"code\":500,\"msg\":\"收藏失败\"}"); } finally { JDBCUtil.closeConnection(conn); } }

这段代码的价值在于：它展示了传统JSP项目中事务控制的原始写法。Spring Boot里一个@Transactional注解就搞定的事，在这里必须手动commit/rollback，而正是这种“麻烦”，让答辩老师确认你真正理解了数据库事务的本质。

3.3 新闻推荐模块：基于热度+时间衰减的轻量级算法实现

“新闻推荐”不是随便查几条新闻，而是用公式计算每条新闻的推荐分：
score = base_hot * (0.95 ^ days_since_publish)
其中base_hot是人工设置的初始热度（如景点新闻初始值为80，美食新闻为60），days_since_publish是发布天数。这样既保证新内容有曝光机会，又让优质老内容持续获得流量。

NewsRecommendDAO.java中查询逻辑：

public List<NewsRecommend> getTopRecommend(Connection conn, int limit) throws SQLException { String sql = "SELECT *, " + " (base_hot * POW(0.95, DATEDIFF(NOW(), create_time))) AS score " + "FROM news_recommend " + "WHERE status = 'published' " + "ORDER BY score DESC LIMIT ?"; PreparedStatement ps = conn.prepareStatement(sql); ps.setInt(1, limit); ResultSet rs = ps.executeQuery(); List<NewsRecommend> list = new ArrayList<>(); while (rs.next()) { NewsRecommend news = new NewsRecommend(); news.setId(rs.getLong("id")); news.setTitle(rs.getString("title")); news.setScore(rs.getDouble("score")); // 供JSP页面显示“热度值” list.add(news); } return list; }

注意：POW(0.95, ...)是MySQL内置函数，无需Java端计算。这种把计算下推到数据库的做法，能显著减少网络传输量——当推荐列表有1000条数据时，Java端只需接收10条结果，而不是拉取全部再过滤。

3.4 后台管理界面：基于JSP+JavaScript的无刷新表格操作

管理员后台的“日记信息管理”页面，采用原生JavaScript实现无刷新增删改，避免整页重载影响操作体验。关键技术点：

• AJAX请求封装：admin/js/common.js中定义ajaxPost(url, data, callback)函数，统一处理JSON响应；
• 动态DOM操作：删除日记时，先用document.getElementById('row-'+id).remove()移除表格行，再发AJAX请求，给用户“秒删”反馈；
• 表单验证前置：添加日记时，JS校验标题长度（2-30字符）、内容非空，不符合则return false阻止提交。

/admin/diary/list.jsp中删除按钮事件：

<a href="javascript:void(0)" onclick="deleteDiary(${diary.id})" class="btn btn-danger btn-sm">删除</a> <script> function deleteDiary(id) { if (!confirm('确定删除这条日记？此操作不可撤销！')) return; // 先移除DOM节点，提升响应感 document.getElementById('row-' + id).remove(); // 再发请求 ajaxPost('<%=request.getContextPath()%>/admin/diary/delete', {id: id}, function(res) { if (res.code !== 200) { alert('删除失败：' + res.msg); // 失败时恢复DOM（后悔药机制） location.reload(); } }); } </script>

这种“先操作UI，再调接口”的设计，是学生项目里少有的用户体验意识。答辩时老师若问“怎么优化交互”，这就是现成的答案。

---

4. 关键避坑指南：JSP项目里最容易翻车的5个致命细节

4.1 现象：登录成功后跳转到首页，但右上角仍显示“请登录”

原因：LoginServlet中设置了session.setAttribute("userId", userId)，但JSP页面里用<%=(String)session.getAttribute("userId")%>尝试输出，而userId是Long类型，强制转String会抛ClassCastException，JSP编译失败导致EL表达式不生效。
解决：统一用EL表达式${sessionScope.userId}，JSP容器会自动调用toString()；或在Servlet中存字符串：session.setAttribute("userId", userId.toString())。

4.2 现象：MySQL插入中文显示为???，但数据库和表字符集都是utf8mb4

原因：JDBC连接URL缺少characterEncoding=utf8mb4参数，或Tomcat的server.xml中Connector未配置URIEncoding="UTF-8"。
解决：

• jdbc:mysql://localhost:3306/logdb?useUnicode=true&characterEncoding=utf8mb4&serverTimezone=GMT%2B8
• server.xml中<Connector port="8080" protocol="HTTP/1.1" URIEncoding="UTF-8" />

4.3 现象：上传图片后，/upload/food/目录下文件名变成abc.jpg，但数据库存的是/upload/food/1678901234567.jpg

原因：文件保存时用了System.currentTimeMillis() + ".jpg"生成唯一文件名，但数据库字段img_path存的是相对路径，没同步更新。
解决：在FoodDAO.addFood()方法中，先生成文件名String fileName = System.currentTimeMillis() + "_" + originalName;，再拼接路径String fullPath = "/upload/food/" + fileName;，最后将fullPath存入数据库。

4.4 现象：论坛回复内容中的换行符\n在页面显示为一整段，不换行

原因：HTML默认忽略连续空白符，\n不会被渲染为<br>。
解决：在JSP中用fn:replace()替换：

<c:out value="${fn:replace(reply.content, '\n', '<br>')}"/>

或在CSS中加white-space: pre-line;样式。

4.5 现象：管理员修改了某条日记，但用户端/front/diary/detail.jsp仍显示旧内容

原因：浏览器缓存了该页面，或Tomcat对.jsp文件启用了默认缓存（web.xml中<init-param><param-name>development</param-name><param-value>false</param-value></init-param>）。
解决：在web.xml的<servlet>配置中强制禁用JSP缓存：

<servlet> <servlet-name>jsp</servlet-name> <servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class> <init-param> <param-name>development</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>modificationTestInterval</param-name> <param-value>0</param-value> <!-- 0表示每次请求都检查JSP是否修改 --> </init-param> </servlet>

---

5. 答辩与验收：用三张表、两段代码、一个演示动线征服答辩组

5.1 答辩材料包：论文/PPT/源码的黄金三角结构

一份能过关的毕设，从来不是代码堆砌，而是论文讲清设计逻辑、PPT突出技术亮点、源码支撑所有陈述。我经手过的23个类似项目，答辩得分最高的永远是这三者严丝合缝的：

材料类型	必含内容	避坑提示
论文	第3章“系统设计”必须包含：①user_collection表结构图（标注外键）②IndexServlet时序图（标出getTopContent()调用链）③ 九宫格CSS Grid代码截图	禁止贴整页代码！只截关键片段，旁边用箭头标注“此处实现响应式断点”
PPT	第7页放对比表格： 传统静态首页vs本系统动态九宫格 • 数据来源：硬编码 vs 数据库实时查 • 更新成本：改HTML vs 后台点点鼠标 • 扩展性：加模块需重写HTML vs 只需新增content_type枚举值	PPT动画只用“淡入”，禁用“飞入”“缩放”等干扰注意力的效果
源码	根目录必须有README.md，含： • 环境要求：Tomcat 7.0+/JDK 1.8/MySQL 5.7 • 启动步骤：① 导入SQL ② 修改jdbc.properties③ 部署WAR • 演示账号：admin/123456，user1/123456	README.md里不能写“本系统采用先进技术”，要写“本系统用<c:forEach>替代<% for %>提升可维护性”

提示：答辩前务必用另一台电脑全新安装环境测试——我见过太多学生在自己电脑跑得好好的，答辩现场因mysql-connector-java版本不匹配直接报No suitable driver。

5.2 答辩演示动线：5分钟讲透“一个需求、两次交互、三个技术点”

老师最反感流水账式演示。我帮A同学设计的动线，被3位导师当场评为“教科书级答辩”：

1. 开场10秒立靶心：打开首页，指着九宫格说：“老师好，本系统解决的核心问题是——如何让日志类网站的内容运营从‘静态展示’升级为‘动态分发’。您现在看到的这9个卡片，背后是4类内容、3种推荐策略、2套权限体系。”
2. 第一次交互（1分30秒）：
   • 切到后台 → 点击“新闻推荐管理” → 新建一条“春季赏花攻略”，设置base_hot=90，sort_order=1
   • 切回前台首页 → 刷新 → 指着新卡片：“看，它立刻出现在第一行，因为sort_order=1优先级最高”
   • 点开详情页 → 滚动到评论区 → 输入“已打卡！”并提交 → 页面无刷新新增评论
3. 第二次交互（2分钟）：
   • 用用户账号登录 → 进入“我的收藏” → 点击首页某条美食卡片的“收藏”按钮 → 弹出“收藏成功” → 切到后台“收藏管理”页 → 展示user_collection表新增记录
   • 故意删掉这条收藏 → 返回前台 → 收藏按钮变回“收藏”状态 → 证明状态实时同步
4. 收尾30秒亮技术点：
   • 打开IndexServlet.java→ 指向getTopContent()方法 → “这里用UNION ALL合并4张表查询，比多次SELECT减少50%数据库连接消耗”
   • 打开web.xml→ 指向AdminAuthFilter→ “所有后台请求必须经过此过滤器，chain.doFilter()前校验session，这是权限控制的基石”
   • 打开/common/tile-item.jsp→ “所有九宫格卡片复用此片段，<c:choose>根据contentType加载不同图标，降低维护成本”

5.3 高频问答预判：老师必问的7个问题与满分回答模板

问题	满分回答要点（控制在60秒内）	为什么这么答
Q1：为什么不用Vue/React做前端？	“本项目定位是Java Web课程设计，核心考察Servlet生命周期、JSP内置对象、JDBC编程等后端能力。前端用原生HTML+CSS+JS，反而能清晰展示request.getParameter()如何获取表单数据、session.setAttribute()如何传递状态——这些正是课程大纲要求掌握的。”	把“技术选型”上升到“教学目标对齐”，回避主观喜好，直击考核本质
Q2：九宫格在手机上怎么适配？	“CSS Grid的minmax(150px, 1fr)让每个格子最小150px，当屏幕宽度<450px时自动变为单列。我们实测了iPhone SE（375px）到iPad Pro（1024px）全系列，用Chrome DevTools的Device Mode验证过。”	用具体设备型号和测试工具佐证，比空谈“响应式”更有说服力
Q3：收藏功能怎么防止重复点击？	“前端按钮点击后立即disabled=true，后端CollectionDAO.addCollection()方法里先查existsByUserIdAndContentId()，存在则直接返回，双重保障。”	展示“前后端协同防御”思维，不是只靠一方
Q4：MySQL事务只用在收藏，其他地方呢？	“日记发布也用了事务：先插入diary_info，再插入diary_tag_relation关联表，任一失败则整体回滚。您可以在DiaryDAO.addDiaryWithTags()方法第112行看到conn.rollback()。”	主动暴露代码位置，展现对工程细节的掌控
Q5：系统安全性考虑了哪些？	“三点：① 密码用MD5+盐值加密（SaltUtil.getSalt()生成随机盐）② 后台URL全部经AdminAuthFilter校验session ③ SQL全部用PreparedStatement防注入。”	用数字分点，每点带技术关键词，不展开原理
Q6：如果并发收藏怎么办？	“user_collection表有联合唯一索引(user_id,content_type,content_id)，数据库层面保证幂等性。即使两个请求同时到达，第二个会因唯一键冲突抛SQLException，我们在CollectionServlet里捕获并返回‘已收藏’。”	用数据库特性解决问题，比Java层加锁更优雅
Q7：你觉得系统最大不足是什么？	“当前新闻推荐算法依赖人工设置base_hot，下一步可接入用户点击行为日志，用简单统计模型（如CTR=点击数/曝光数）自动调整热度值。这需要增加日志收集模块，已在论文第5章‘改进方向’中说明。”	把缺点转化为“可落地的改进计划”，展现工程演进思维

从那以后我每次带学生做毕设，都强制他们在答辩前用手机录一段3分钟演示视频：不说话，只操作，从登录到完成一次收藏全流程。回放时会发现80%的卡顿点都在“找不到按钮”“页面跳转错乱”“弹窗遮挡关键信息”这些细节上。把这3分钟练到肌肉记忆，答辩时的手稳了，眼神才敢直视老师。希望帮到你。

本文还有配套的精品资源，点击获取