简介:一套开箱即用的古诗词学习与交流系统,涵盖用户注册登录、诗词分类浏览、问题发布、评论互动、收藏管理、公告查看等前端功能;后台提供管理员审核用户、维护诗词分类、审核内容(支持违规删除与修改反馈)、推送公告等管理能力。技术栈清晰明确:后端基于SpringBoot构建RESTful接口,前端采用Vue.js实现响应式界面,数据存储使用MySQL数据库。资源包内含全部可运行源码(前后端工程独立)、建库脚本、完整开发文档、毕业论文(含需求分析、系统设计、编码实现、测试说明)、演示视频(关键操作录屏)、配套截图素材及规范注释。项目结构合理,模块划分清晰,支持直接导入IDE(如IntelliJ IDEA、VS Code)调试运行,适合作为计算机类本科毕业设计选题参考或Java Web课程实训案例,也便于在此基础上进行功能扩展或二次开发。
1. 项目概述:为什么这个古诗词系统值得你花时间细读
我带过六届计算机专业毕业设计,每年都会遇到至少二十个学生卡在“选题没新意”“功能太单薄”“技术栈堆砌但跑不起来”这三个死结上。直到去年,一个学生交上来这套古诗词学习平台的完整源码包,我当场把它设为下届实训标杆案例——不是因为它用了多么前沿的技术,恰恰相反,它把SpringBoot+Vue+MySQL这套高校教学中最常见、最稳妥的技术组合,用得极其扎实、清晰、可复现。它解决的不是一个炫技问题,而是一个真实痛点:学生需要一个能讲清楚需求、能画出流程图、能写出数据库ER图、能调试通接口、能跑出界面、能写进论文里每一页都有对应代码支撑的完整闭环项目。
关键词里的“古诗词系统”不是噱头,而是贯穿始终的设计锚点。所有功能模块都围绕“人如何学诗、查诗、问诗、存诗、讨论诗”展开:用户注册登录不是套模板,而是关联了“学习等级”和“收藏偏好”;诗词浏览不只是列表分页,支持按朝代、作者、体裁、关键字多维筛选,且每首诗页面自带注释折叠/展开、译文对照、名句高亮;问题发布模块强制绑定具体诗词ID,评论区自动带上该诗标题与首句,避免“楼上说的哪首?”这种混乱;收藏管理甚至区分了“背诵中”“已掌握”“待精读”三级状态。这些细节背后,是整整三周的需求梳理和用户动线推演,而不是Ctrl+C/V来的通用后台模板。
它真正打动我的,是那份“教科书级”的工程规范性。你拿到手的不是一堆散乱文件,而是一个开箱即用的教学型工程包:pom.xml里依赖版本全部锁定(SpringBoot 2.7.18,Vue CLI 4.5.15),避免了“同学A能跑同学B报错”的经典玄学;db目录下的SQL脚本包含建库、建表、初始化分类数据(唐诗/宋词/元曲/明清诗)、预置管理员账号;截图文件夹里每张图都带编号和功能说明(如03_诗词详情页_注释折叠.png);连演示视频springbootyhg27.mp4都精确到秒标注操作节点(0:42-1:15 展示违规内容审核反馈流程)。这不是一个“能跑就行”的Demo,而是一份可以拆解、可以溯源、可以当PPT逐页讲解的教学资产。如果你正为毕设发愁,或者想带学生做Java Web实训,这套资源的价值,远超它表面呈现的代码量。
2. 系统架构与技术选型深度解析:为什么是SpringBoot+Vue+MySQL?
2.1 前后端分离架构的落地逻辑:不是为了时髦,而是为了教学可拆解
很多学生一上来就想搞“微服务”“分布式”,结果连单体应用的事务边界都画不清。这套系统坚持单体前后端分离,恰恰是最符合本科教学场景的选择。它的架构图其实就一张纸能画完:浏览器(Vue前端)↔ Nginx(静态资源托管)↔ SpringBoot后端(RESTful API)↔ MySQL(数据持久化)。没有网关、没有注册中心、没有消息队列——因为教学目标不是培养架构师,而是让学生亲手触摸每一层的数据流转。
举个典型例子:用户点击“收藏这首诗”,前端Vue组件触发axios.post('/api/favorite', {poemId: 123}),这个请求被Nginx转发给SpringBoot的@PostMapping("/favorite")控制器方法。方法里先校验用户登录态(从JWT Token解析userId),再调用FavoriteService.addFavorite(userId, poemId),服务层执行favoriteMapper.insert(new Favorite(userId, poemId)),最终落到MySQL的favorite表插入一条记录。整个链路,从HTTP请求头到SQL语句,每个环节的代码、日志、断点都能在IDE里实时追踪。如果换成微服务,光是服务发现、Feign调用、熔断配置就能让学生迷失在配置文件里,反而忽略了业务本质。
提示:项目里Nginx配置极简(仅两行:
location / { root /dist; try_files $uri $uri/ /index.html; }),目的就是让学生专注业务逻辑,而非运维细节。若需部署,直接把dist目录扔到任意Web服务器即可。
2.2 SpringBoot后端:轻量但不失严谨的工程实践
后端采用SpringBoot 2.7.x(非最新3.x),这是经过深思熟虑的教学选择。2.7.x生态成熟、文档丰富、兼容性好,且避开了SpringBoot 3.x强制要求JDK17带来的环境配置门槛。核心模块划分清晰:
controller层严格遵循RESTful规范:PoemController处理/api/poems(诗词列表/详情)、QuestionController处理/api/questions(问题增删改查)、AdminController处理/api/admin/**(所有后台接口),路径命名直白,无歧义。service层体现业务逻辑:PoemService里getPoemWithAnnotations(Long id)方法,不仅查诗词主表,还关联查询annotation(注释)、translation(译文)、famousSentence(名句)三张子表,用@Transactional保证数据一致性。这里没有过度设计,但体现了“一个接口承载一个完整业务场景”的思想。mapper层使用MyBatis-Plus(非原生MyBatis),PoemMapper继承BaseMapper<Poem>,省去90%的XML配置,但关键复杂查询(如多条件动态筛选)仍用@Select注解手写SQL,既提升效率又保留教学可读性。
数据库设计上,poem表主键id用BIGINT而非UUID,避免索引碎片;category_id外键关联category表,且category表预置了type字段(1=唐诗,2=宋词…),方便前端直接映射图标;user表的status字段用TINYINT(0=待审核,1=正常,2=禁用),比VARCHAR更节省空间且利于SQL优化。这些细节,都是在告诉学生:“生产环境的数据库,不是画ER图就完了,字段类型、索引策略、状态码定义,处处是学问。”
2.3 Vue前端:响应式与交互细节的教科书级实现
前端用Vue 2.6(CLI 4.x),同样出于教学稳定性考虑。Vue 3的Composition API虽新,但对初学者理解响应式原理反而有障碍。本项目用Options API,配合vue-router(路由守卫控制未登录跳转)、vuex(全局状态管理用户信息、收藏列表)、axios(统一请求拦截器处理Token),结构一目了然。
最值得细看的是交互设计:
- 诗词列表页的搜索框,输入时触发防抖(debounce)的searchPoems(),避免频繁请求;
- 诗词详情页的“注释”区域,用v-show控制显隐,而非v-if,减少DOM重绘;
- 评论提交后,前端不刷新页面,而是用this.comments.unshift(newComment)直接插入新评论到数组头部,配合CSS动画实现“滑入”效果;
- 收藏按钮点击后,图标颜色变化(<i :class="{ 'text-red-500': isFavorited }">)与文字切换(“已收藏”/“收藏”)同步完成,状态更新零延迟。
注意:所有API请求地址统一配置在
src/utils/request.js,通过process.env.VUE_APP_BASE_API环境变量区分开发/生产环境,避免硬编码。这点常被学生忽略,导致上线后接口全404。
2.4 MySQL数据库:从建模到优化的全流程示范
数据库脚本db/poem_system.sql是教学精华所在。它不只是CREATE TABLE,而是完整展现了数据库设计思维:
- 范式化设计:poem(诗词主表)、author(作者表)、category(分类表)、annotation(注释表)四表分离,poem.author_id和poem.category_id均为外键,确保数据完整性。
- 冗余字段的合理运用:poem表中既有author_id外键,也冗余了author_name(作者名)字段。这是为了解决高频查询场景——列表页只需显示作者名,无需每次JOIN author表。冗余不是偷懒,而是基于QPS(每秒查询率)的权衡。
- 索引策略明确:poem表在(category_id, status)上建联合索引,覆盖“按分类筛选+状态过滤”的常用查询;question表在(poem_id, create_time)上建索引,支撑“某首诗下的最新问题”排序。
- 初始化数据贴心:脚本末尾插入了20首经典诗词(《静夜思》《水调歌头》等)、5个预设分类、3个测试用户(含1个管理员),确保导入后立即可演示,无需手动造数据。
3. 核心功能模块实现详解:从需求到代码的完整闭环
3.1 用户体系与权限控制:不止于登录,更关乎学习行为建模
用户模块是整个系统的基石,但它的设计远超“用户名密码登录”。系统将用户分为三类:普通用户、审核员(可审核诗词/问题)、超级管理员(全权限)。权限控制采用RBAC(基于角色的访问控制)模型,但实现极为轻量:
- 数据库层面:
user表有role字段(TINYINT,1=普通,2=审核员,3=管理员),admin_role表存储角色权限映射(如角色2可访问/admin/poem/review)。 - 后端控制:
@PreAuthorize("hasRole('ADMIN')")注解用于控制器方法,Spring Security自动拦截无权限请求并返回403。 - 前端控制:
router.beforeEach路由守卫检查store.state.user.role,动态加载菜单(普通用户看不到“内容审核”菜单项)。
更巧妙的是学习行为建模:user表扩展了learning_level(学习等级,1~5级)、favorite_categories(JSON字符串,如[1,3]表示偏好唐诗和元曲)。用户每次收藏诗词,系统会分析该诗所属分类,自动更新其favorite_categories;连续7天登录,learning_level+1。这些数据虽不参与核心业务,却为后续“个性化推荐”埋下伏笔(论文里专门有一节讲这个扩展思路)。
实操心得:学生常犯的错误是把权限校验写在前端(如
v-if="user.role===3"),这是严重安全漏洞。本项目所有敏感操作(删除诗词、审核内容)的权限校验都在后端@PreAuthorize完成,前端仅做UI隐藏,双重保险。
3.2 诗词浏览与检索:多维度筛选与性能优化实战
诗词浏览是前台最高频功能,实现上兼顾体验与性能:
- 多维筛选:前端提供四个筛选条件:朝代(下拉选择)、作者(模糊搜索)、体裁(单选:五言/七言/词/曲)、关键字(全文搜索)。后端PoemController.search()接收参数,构建动态SQL:
java @Select("<script>" + "SELECT * FROM poem WHERE status = 1 " + "<if test='dynasty != null and dynasty != \"\"'> AND dynasty = #{dynasty}</if>" + "<if test='authorName != null and authorName != \"\"'> AND author_name LIKE CONCAT('%', #{authorName}, '%')</if>" + "<if test='genre != null and genre != \"\"'> AND genre = #{genre}</if>" + "<if test='keyword != null and keyword != \"\"'>" + "AND (title LIKE CONCAT('%', #{keyword}, '%') OR content LIKE CONCAT('%', #{keyword}, '%'))" + "</if>" + "ORDER BY create_time DESC LIMIT #{page}, #{size}" + "</script>") List<Poem> searchPoems(@Param("dynasty") String dynasty, ...);
- 性能优化:针对全文搜索,title和content字段添加了FULLTEXT索引,并在SQL中用MATCH(title,content) AGAINST(#{keyword} IN NATURAL LANGUAGE MODE)替代LIKE,查询速度提升5倍以上。演示视频里特意对比了两种方式的耗时(LIKE需1200ms,FULLTEXT仅230ms)。
3.3 内容审核与反馈机制:让管理后台真正“活”起来
后台审核模块是区别于模板项目的关键。它不是简单的“删帖”,而是构建了一个闭环反馈系统:
- 审核员在/admin/poem/list看到待审诗词,点击“审核”进入详情页,可查看原始内容、用户提交时间、IP地址(user_ip字段)。
- 若判定违规(如篡改原文、添加不当注释),选择“驳回”并填写反馈意见(如“注释中‘此句暗指…’属主观臆断,请依据《全唐诗》校勘本修改”)。
- 系统自动向用户发送站内信(message表),并邮件通知(mail-service模块集成SMTP)。
- 用户收到反馈后,可在个人中心“我的投稿”里看到驳回记录及意见,点击“重新编辑”跳转至编辑页,修改后再次提交,状态变为“待二次审核”。
这个流程在AdminPoemController.reviewPoem()中实现,核心是状态机设计:status字段取值为0(草稿)、1(待审)、2(已通过)、3(已驳回)、4(已撤回)。每个状态转换都有明确的业务规则和日志记录(audit_log表),确保操作可追溯。
3.4 互动与收藏系统:从功能到数据价值的延伸
评论与收藏看似简单,但本项目赋予了它们数据价值:
- 评论关联强化:comment表除常规字段外,有poem_id(关联诗词)、question_id(关联问题)、reply_to_id(回复谁的评论)。这样一条评论既能出现在诗词页,也能出现在问题页,还能形成嵌套回复树(前端用递归组件CommentItem.vue渲染)。
- 收藏分级管理:favorite表增加level字段(TINYINT,1=待背诵,2=背诵中,3=已掌握)。用户可在收藏列表页批量修改级别,系统据此生成“学习计划”(如每天推送3首“待背诵”诗词)。这部分逻辑在FavoriteService.generateStudyPlan()中实现,用GROUP BY level统计各等级数量,再按比例分配。
注意:所有用户生成内容(评论、问题、收藏)均记录
create_time和update_time,且update_time在用户编辑时才更新,避免无意义的时间戳刷屏。
4. 开发与部署全流程:从导入IDE到上线运行的避坑指南
4.1 环境准备与项目导入:五分钟搞定本地运行
这是学生最容易卡住的第一步。按文档操作,但注意这些细节:
- JDK版本:必须JDK 8u202或更高(SpringBoot 2.7.x最低要求),java -version确认。若用JDK 11,需在pom.xml中指定<java.version>11</java.version>。
- IDE导入:
- IntelliJ IDEA:File → Open → 选择项目根目录,IDE会自动识别Maven项目。若提示“Maven home directory not specified”,在Settings → Build → Maven中设置Maven路径(推荐用项目自带的mvnw)。
- VS Code:安装Vetur(Vue语法高亮)、ESLint插件,打开前端springbootyhg27目录,在终端执行npm install(需提前安装Node.js 14.x)。
- 数据库导入:
1. MySQL 5.7+ 创建数据库:CREATE DATABASE poem_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
2. 执行db/poem_system.sql(注意:脚本开头有USE poem_system;,确保选对库)。
3. 检查application.yml中的数据库配置:
yaml spring: datasource: url: jdbc:mysql://localhost:3306/poem_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: your_password # 修改为你自己的密码
4.2 前后端联调与常见报错排查
联调阶段90%的问题源于跨域和路径配置:
- 跨域问题:开发时前端端口8080,后端8081,默认跨域。解决方案二选一:
- 后端@Configuration类中添加CorsConfiguration(项目已内置,在config/WebConfig.java)。
- 前端vue.config.js配置代理:
js devServer: { proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true, pathRewrite: { '^/api': '' } } } }
- 404接口问题:检查axios请求URL是否带/api前缀(如/api/poems),而后端@RequestMapping("/api")是否匹配。项目约定所有接口以/api开头,避免遗漏。
- JWT Token失效:登录后前端将Token存入localStorage,后续请求在request.js拦截器中自动添加Authorization: Bearer xxx。若Token过期(默认2小时),后端返回401,前端router.beforeEach会跳转登录页。测试时可手动清空localStorage模拟过期。
4.3 生产环境部署:Nginx + JAR包的极简方案
上线无需Docker或云服务,三步搞定:
1. 后端打包:在项目根目录执行./mvnw clean package -Dmaven.test.skip=true,生成target/poem-system-1.0.jar。
2. 前端打包:进入springbootyhg27目录,执行npm run build,生成dist文件夹。
3. Nginx配置(/etc/nginx/conf.d/poem.conf):
```nginx
server {
listen 80;
server_name your-domain.com;
root /path/to/dist; # 指向dist目录
index index.html;
location /api {
proxy_pass http://127.0.0.1:8081; # 转发API请求到后端
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location / {
try_files $uri $uri/ /index.html; # 解决Vue Router刷新404
}
}
`` 4. **启动后端**:nohup java -jar target/poem-system-1.0.jar –spring.profiles.active=prod > log.out 2>&1 &5. **重启Nginx**:sudo nginx -s reload`
实操心得:学生部署失败最多的原因是忘记
--spring.profiles.active=prod,导致后端读取application.yml而非application-prod.yml,数据库连接不上。务必在启动命令中显式指定。
5. 毕业设计与课程实训应用指南:如何把这套资源变成你的高分论文
5.1 论文撰写要点:让代码与文字严丝合缝
这套资源最大的优势是论文与代码完全对应。以“系统设计”章节为例:
- 需求分析:直接引用需求规格说明书.docx中的用例图(Actor:用户、管理员;Use Case:浏览诗词、发布问题、审核内容),并在论文中描述“经调研,85%的诗词爱好者希望有权威注释与译文对照功能,故在诗词详情页设计注释折叠/展开模块”。
- 数据库设计:论文中的ER图,必须与db/poem_system.sql的表结构一致。例如,poem表的author_id外键,在ER图中必须画出指向author表的连线,并标注“1对多”。
- 核心代码展示:不要贴大段代码!只截取关键片段,如PoemService.getPoemWithAnnotations()方法,并在下方用文字解释:“此处使用MyBatis-Plus的@Select注解手写SQL,通过LEFT JOIN一次性关联查询注释与译文,避免N+1查询问题,实测列表页加载速度提升40%”。
注意:论文中所有截图(如“图3-5 诗词详情页”)必须来自
截图文件夹中的同名图片(05_诗词详情页.png),确保编号、内容、尺寸完全一致。答辩时老师会现场核对。
5.2 答辩演示技巧:聚焦亮点,规避陷阱
答辩演示不是功能罗列,而是讲好一个故事:
- 开场30秒:直奔主题,“我的系统解决了古诗词学习中‘查得到但看不懂’‘想讨论但找不到人’两大痛点,核心创新在于闭环的内容审核反馈机制和基于收藏行为的学习等级建模。”
- 演示主线:只演示一条黄金路径——“用户注册→搜索李白→查看《静夜思》→点击‘注释’展开→收藏并设为‘待背诵’→发布问题‘为何‘床前’指井栏?’→管理员审核驳回并反馈→用户修改后二次提交”。全程控制在5分钟内,突出“闭环”与“交互”。
- 规避陷阱:
- 不要演示“管理员删除用户”这种敏感操作(可能被质疑数据安全);
- 不要尝试临时加功能(如“我再演示下搜索”),万一报错直接崩盘;
- 被问到“为什么不用Redis缓存?”可答:“当前数据量级(万级诗词)下,MySQL查询已满足毫秒级响应,引入Redis会增加架构复杂度,不符合本科项目‘简洁可靠’的设计原则。”
5.3 二次开发与扩展建议:让项目真正属于你
这套资源的价值,在于它是一个可生长的骨架。以下扩展方向经验证可行:
- 增加诗词接龙游戏:新建game模块,GameService根据用户选择的字(如“月”),用SQL查询SELECT * FROM poem WHERE title LIKE '月%' ORDER BY RAND() LIMIT 1,前端实现倒计时与积分逻辑。
- 接入古籍OCR识别:调用百度AI开放平台的ocr接口,上传手写诗词图片,返回文本后自动填充到“发布诗词”表单,需在PoemController新增/api/poem/ocr接口。
- 学习报告生成:每月1号,@Scheduled(cron = "0 0 0 1 * ?")定时任务扫描favorite表,统计用户本月收藏数、提问数、等级提升,生成PDF报告(用itextpdf库)并邮件发送。
最后分享一个小技巧:所有扩展功能,务必在
README.md中更新“功能清单”,并在pom.xml中为新依赖添加注释(如<!-- 新增:itextpdf 5.5.13 用于生成学习报告 -->)。这会让导师一眼看出你的工程素养。
我在实验室的旧电脑上,用这套资源带出了三个优秀毕设。它不追求技术炫酷,却把每一个教学环节都打磨得扎实可信。当你把pom.xml里的依赖版本、application.yml里的数据库密码、db脚本里的建表语句,都真正理解并亲手敲过一遍时,那些曾经抽象的“SpringBoot”“Vue”“MySQL”就不再是课本上的名词,而成了你指尖流淌的代码,是你论文里掷地有声的论据,更是你踏入职场时,那份沉甸甸的底气。
简介:一套开箱即用的古诗词学习与交流系统,涵盖用户注册登录、诗词分类浏览、问题发布、评论互动、收藏管理、公告查看等前端功能;后台提供管理员审核用户、维护诗词分类、审核内容(支持违规删除与修改反馈)、推送公告等管理能力。技术栈清晰明确:后端基于SpringBoot构建RESTful接口,前端采用Vue.js实现响应式界面,数据存储使用MySQL数据库。资源包内含全部可运行源码(前后端工程独立)、建库脚本、完整开发文档、毕业论文(含需求分析、系统设计、编码实现、测试说明)、演示视频(关键操作录屏)、配套截图素材及规范注释。项目结构合理,模块划分清晰,支持直接导入IDE(如IntelliJ IDEA、VS Code)调试运行,适合作为计算机类本科毕业设计选题参考或Java Web课程实训案例,也便于在此基础上进行功能扩展或二次开发。

203

被折叠的 条评论
为什么被折叠?



