尧图网页设计 
简介本资源是一套完整的Java毕业设计项目——基于Spring Boot与Vue开发的在线小说阅读平台源码面向计算机专业本科生及Java初学者解决课程设计、毕设选题与全栈开发实践需求。压缩包共789个文件含107个Java后端业务逻辑文件、43个Vue前端组件、164个JS交互脚本、162个SVG图标资源、53个CSS样式文件及1个SQL建表脚本配合18.06MB体量结构清晰、模块完整便于快速理解MVC分层与前后端分离架构。已有79人学习下载资源附带详尽说明文档覆盖环境配置JDK 1.8、MySQL 5.7、Navicat 11、数据库设计、RESTful接口清单及功能模块说明内容预览可见多套备份文件如*.vue.bak与标准化部署脚本1-install.bat等体现工程规范性与可复用性适合直接运行、二次开发或教学演示。1. 这不是又一个“SpringBootVue模板”而是一个能真实跑通、可二次开发、带完整业务闭环的小说阅读平台——它解决了毕业设计里最痛的三件事登录态跨域失效、章节内容富文本渲染错乱、MySQL中文全文检索查不到“修仙”“玄幻”关键词你手头这份【java毕业设计】在线小说阅读平台源码springbootvuemysql说明文档.zip不是网上泛滥的“用户管理图书列表”空壳Demo。它是一套真实上线过测试环境、含12类核心业务实体作者/作品/章节/书评/收藏/打赏/订阅/排行榜/分类/标签/阅读记录/后台审核、前后端分离部署、支持PC移动端适配、且MySQL全文索引已针对小说标题/简介/正文做过分词优化的完整系统。我去年带3个本科生用它做毕设2人答辩被问“怎么防止盗版章节爬取”1人现场演示了后台一键生成带水印的PDF试读本——这说明它不止能跑还能撑住答辩追问。适合两类人一是Java初学者想交出一份不被导师质疑“没业务深度”的毕设二是刚转岗的后端新人想用一个有真实用户路径注册→找书→试读→付费→追更→评论→分享的项目练手SpringBoot权限控制、Vue路由守卫、MySQL中文全文检索调优。别急着解压先看清它和你搜到的90%“SpringBoot小说源码”的本质区别它把“阅读”这件事当核心业务建模而不是把“CRUD小说表”当终点。2. 搭建前必须搞清的三个底层逻辑为什么用MyBatis-Plus不用JPA为什么Vue不直接嵌入SpringBoot静态资源为什么MySQL必须开innodb_ft_min_token_size22.1 MyBatis-Plus是这个项目能快速落地的关键选择它让“章节按顺序分页查”这种高频操作从15行SQLResultMap压缩到1行LambdaQueryWrapper这个项目没选JPA不是因为JPA不行而是小说阅读场景下“按章节序号分页查询”“按更新时间倒序查最新章”“按书ID查所有已发布章节”这三类查询太频繁且必须精确控制SQL执行计划。JPA的Query写原生SQL虽可行但MyBatis-Plus的LambdaQueryWrapper配合自定义XML能让你在Service层用一行代码写出带复杂WHERE条件、ORDER BY和LIMIT的语句且SQL日志清晰可查。比如查某本书的最新5章// BookChapterServiceImpl.java public ListBookChapter listLatestChapters(Long bookId, int limit) { return lambdaQuery() .eq(BookChapter::getBookId, bookId) .eq(BookChapter::getStatus, ChapterStatus.PUBLISHED.getCode()) // 只查已发布章 .orderByDesc(BookChapter::getSortOrder) // 按排序序号降序最新章sortOrder最大 .last(LIMIT limit) // 注意这里用last拼接LIMIT避免分页插件干扰 .list(); }提示last(LIMIT limit)是关键。MyBatis-Plus分页插件默认对所有查询加LIMIT但此处需精准控制条数且不走分页拦截器否则会多查1条做total计算所以用last硬拼。这是小说阅读场景的典型取巧——不需要总页数只要最新几章。2.2 Vue前端必须独立部署不是技术洁癖而是解决“登录态跨域失效”这个毕设答辩高频翻车点很多同学把Vue打包后的dist文件扔进SpringBoot的src/main/resources/static看似省事实则埋雷当用户从首页/跳转到阅读页/book/123/chapter/456时Vue Router的history模式会触发浏览器向SpringBoot发GET请求而SpringBoot没配/**路径兜底直接返回404。更致命的是若用hash模式分享链接带#微信/QQ内无法正确解析。本项目强制Vue独立部署Nginx或Vercel通过反向代理解决跨域# nginx.conf 关键配置 location /api/ { proxy_pass http://localhost:8080/; # SpringBoot后端地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { root /var/www/novel-frontend; # Vue build输出目录 try_files $uri $uri/ /index.html; # 关键让history模式正常工作 }这样前端所有API请求走/api/xxx被Nginx代理到后端页面路由由Vue Router接管/book/123这类路径不会触发后端请求。登录态靠JWT存localStorage每次请求带Authorization头彻底规避Cookie跨域问题——这招让我的学生在答辩时被问“怎么保证手机扫码登录后PC端也同步状态”直接打开DevTools Network面板指着Authorization: Bearer xxx说“状态存在前端后端只校验Token天然跨端”。2.3 MySQL中文全文检索必须调参否则“修仙”“炼丹”永远搜不到因为默认最小分词长度是4小说搜索的核心痛点不是“搜不到”而是“搜不准”。比如搜“修仙”MySQL默认全文索引FULLTEXT用ngram parserinnodb_ft_min_token_size默认为2但ngram对中文分词依赖字符长度若设为1单字分词会产生海量无意义碎片“的”“了”“在”设为2又漏掉“修仙”“炼丹”这类双音节词。本项目在my.cnf中明确配置[mysqld] # 必须重启MySQL生效 innodb_ft_min_token_size 2 innodb_ft_max_token_size 20 ft_min_word_len 2 ft_max_word_len 20 # 创建全文索引时指定parser CREATE FULLTEXT INDEX idx_book_title_intro ON book_info(title, intro) WITH PARSER ngram;注意ft_min_word_len是MyISAM引擎参数InnoDB用innodb_ft_min_token_size但某些MySQL版本如5.7需同时设两者。执行SHOW VARIABLES LIKE ft_%;和SHOW VARIABLES LIKE innodb_ft_%;确认生效。未调参前搜“修仙”MATCH(title, intro) AGAINST(修仙 IN NATURAL LANGUAGE MODE)返回空调参重建索引后秒出结果——这是答辩时展示“我真调过数据库”的硬证据。3. 启动即用的最小化部署流程从解压到首页显示“热门小说”只需6步每步附验证命令3.1 解压后先看懂目录结构novel-backend和novel-frontend是双核docs里的《部署手册》比README.md详细10倍别急着mvn clean install。先用tree -L 2扫一眼根目录├── docs/ # 重点含《数据库初始化指南》《Vue环境变量配置说明》《常见报错速查表》 ├── novel-backend/ # SpringBoot后端pom.xml里spring-boot-starter-parent是2.7.18兼容JDK8 │ ├── src/main/java/com/novel/ │ └── src/main/resources/application.yml # 数据库密码明文在此首次启动前必须改 ├── novel-frontend/ # Vue3 Element Pluspackage.json里vue版本是3.2.45 │ ├── public/ │ └── src/ └── sql/ # 包含novel_db.sql建库建表初始数据和init_data.sql测试用小说/章节提示docs/《数据库初始化指南》.md里写了novel_db.sql执行顺序——先建库CREATE DATABASE novel_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;再USE novel_db;最后source。漏掉字符集设置中文存进去是乱码后续所有调试都是白费。3.2 后端启动三步走改配置 → 清缓存 → 启动失败时看target/classes/application.yml是否生效# 进入novel-backend目录 cd novel-backend # 1. 修改数据库连接application.yml第22行 # url: jdbc:mysql://localhost:3306/novel_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai # username: root # password: your_mysql_password ← 必须改默认可能是123456 # 2. 清理Maven本地缓存避免旧jar包冲突 mvn clean # 3. 启动-DskipTests跳过测试加快启动 mvn spring-boot:run -DskipTests # 验证启动日志末尾出现Tomcat started on port(s): 8080 (http)且无ERROR # 再curl测试接口 curl -X GET http://localhost:8080/api/book/hot | jq .data[0].title # 应返回类似《万古神帝》的字符串3.3 前端启动两步装依赖 → 改API地址 → 启动注意Vue的.env.production文件# 进入novel-frontend目录 cd novel-frontend # 1. 安装依赖推荐npm因package-lock.json锁定了版本 npm install # 2. 修改API基础地址打开.env.production把VUE_APP_BASE_API改成你的后端地址 # VUE_APP_BASE_API http://localhost:8080/api ← 如果前后端同机保持此值若前端部署在Nginx此处应为/api # 3. 启动开发服务器 npm run serve # 验证浏览器访问http://localhost:8080F12看Network刷新页面应看到 # - 请求/api/book/hot 返回200Response有小说列表 # - 请求/api/user/info 返回401未登录正常3.4 数据库初始化用sql/novel_db.sql建库建表再用sql/init_data.sql灌测试数据# 登录MySQL mysql -u root -p # 执行建库建表注意路径 source /path/to/your/download/sql/novel_db.sql; # 退出后重新登录并选库 mysql -u root -p novel_db source /path/to/your/download/sql/init_data.sql; # 验证数据量应有约20本测试小说每本10-50章 SELECT COUNT(*) FROM book_info; -- 应15 SELECT COUNT(*) FROM book_chapter; -- 应300 SELECT COUNT(*) FROM user_info; -- 应3admin/testuser/testreader注意init_data.sql里INSERT INTO user_info的密码是BCrypt加密后的密文如$2a$10$...不是明文。若想改管理员密码用在线BCrypt工具生成新密文替换不要用明文直接update否则登录失败。3.5 登录测试账号admin/admin123 和 testuser/123456后台地址是 /admin前端首页右上角“登录”输入账号admin密码admin123→ 进入后台管理页含小说审核、章节发布、用户封禁账号testuser密码123456→ 进入读者页可收藏、评论、打赏后台地址http://localhost:8080/admin注意不是/api/admin这是Vue路由验证登录admin后点击“小说管理”应看到《斗破苍穹》《凡人修仙传》等测试数据点击“章节管理”可编辑某章内容。3.6 搜索功能验证搜“修仙”首页应出现《修仙归来当奶爸》等结果# 在浏览器开发者工具Console中执行模拟前端搜索逻辑 fetch(/api/book/search?keyword修仙) .then(res res.json()) .then(data console.log(data.data.map(b b.title))) // 应输出包含修仙的书名数组若返回空立刻检查MySQL是否执行了ALTER TABLE book_info ADD FULLTEXT(title, intro);application.yml中spring.jpa.properties.hibernate.dialect是否为org.hibernate.dialect.MySQL8DialectMySQL8或MySQL57DialectMySQL5.7搜索接口BookController.search()里Query注解是否用了MATCH AGAINST4. 毕设答辩必被问的5个问题及血泪答案从“怎么防止刷阅读量”到“章节内容怎么防爬”4.1 问题“用户没登录也能看前3章怎么防止机器人批量爬取”——答用“阅读令牌IP限频章节内容动态混淆”这不是靠if (usernull) return chapter.content.substring(0,500)简单截断。本项目在BookChapterController.getChapterContent()中做了三层防护阅读令牌ReadToken每次请求生成一次性的AES加密Token存Rediskeyread:${chapterId}:${userId}expire30min前端请求时必须带X-Read-Token头后端解密校验chapterId和userId匹配IP限频用Spring Boot Actuator Redis RateLimiter对/api/chapter/{id}接口限制同一IP每分钟最多10次请求内容动态混淆返回章节内容前对文字做String.replace(修, 亻休).replace(仙, 山)式无损替换仅对非VIP章节前端JS再反向还原——爬虫不执行JS就拿到乱码。// BookChapterController.java GetMapping(/{id}) public Result getChapterContent(PathVariable Long id, RequestHeader(value X-Read-Token, required false) String token, HttpServletRequest request) { // 1. 校验ReadToken略 // 2. IP限频略 // 3. 获取内容并混淆 String content chapterService.getContentById(id); if (!userHasVip(id)) { // 非VIP章 content content.replace(修, 亻休).replace(仙, 山); } return Result.success(content); }玄学经验答辩时别只说“我用了Token”要打开Postman演示第一次请求返回亻休山第二次带正确Token返回修仙第三次换IP直接429——评委立刻懂你真干了。4.2 问题“MySQL全文检索搜‘主角叫林动’为什么搜不到”——答因为没建“正文”字段的全文索引且ngram分词长度不够book_info表的全文索引只建在title和intro但用户常搜“主角名”“功法名”这些在book_chapter.content里。解决方案分三步给chapter表content字段建全文索引MySQL8ALTER TABLE book_chapter ADD FULLTEXT(content) WITH PARSER ngram;调整ngram_token_size为2已在2.3节配置此处强调搜索逻辑改用布尔模式避免自然语言模式的权重干扰SELECT DISTINCT b.id, b.title FROM book_info b JOIN book_chapter c ON b.id c.book_id WHERE MATCH(c.content) AGAINST(林 动 IN BOOLEAN MODE);血泪经验曾有学生只改了索引没改SQL模式搜“林动”返回《斗罗大陆》因“林”字高频答辩时当场执行EXPLAIN发现没走全文索引——记住MATCH...AGAINST必须和FULLTEXT索引字段严格对应且布尔模式才能用限定必需词。4.3 问题“Vue打包后放到SpringBoot static里为啥404”——答因为没配SpringBoot的WebMvcConfigurer兜底路由如果坚持把Vue放static不推荐但毕设常被要求必须在WebConfig.java里加Configuration public class WebConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { // 所有非API路径都指向index.html让Vue Router接管 registry.addViewController(/).setViewName(forward:/index.html); registry.addViewController(/book/**).setViewName(forward:/index.html); registry.addViewController(/user/**).setViewName(forward:/index.html); // ... 其他路由 } }注意addViewController只处理GET请求且必须在spring.web.resources.static-locationsclasspath:/static/生效前提下。若还404检查pom.xml是否误删了spring-boot-starter-web依赖。4.4 问题“怎么实现‘阅读进度自动保存’”——答用WebSocket实时同步本地Storage兜底不是轮询轮询太耗资源。本项目用SpringBoot集成WebSocket前端建立连接const socket new WebSocket(ws://localhost:8080/ws/progress);用户翻页时发{bookId:123,chapterId:456,position:1200}position是滚动高度像素值后端OnMessage接收存Rediskeyprogress:${userId}:${bookId}value{chapterId:456,position:1200}页面onbeforeunload时再存一次到localStorage网络断开时从local读。// ProgressWebSocket.java OnMessage public void onMessage(String message, Session session) { ProgressDto dto JSON.parseObject(message, ProgressDto.class); String key progress: getUserId(session) : dto.getBookId(); redisTemplate.opsForValue().set(key, JSON.toJSONString(dto), Duration.ofHours(24)); }翻车教训曾有学生用Scheduled每5秒查DB更新进度导致DB CPU飙到90%——WebSocket是标准解别造轮子。4.5 问题“打赏功能怎么防重复提交”——答用Redis分布式锁前端按钮置灰后端幂等校验三重保险前端点击“打赏”按钮后立即button.disabledtrue并显示“处理中…”后端生成唯一orderNoSnowflake ID用Redis锁SETNX pay:lock:${orderNo} 1 EX 30成功才执行扣款幂等pay_order表建唯一索引UNIQUE KEY uk_user_book_order (user_id, book_id, order_no)重复插入直接报错。// PayService.java public Result pay(Long userId, Long bookId, BigDecimal amount) { String orderNo IdWorker.getSnowflakeId(); // 雪花ID String lockKey pay:lock: orderNo; Boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, 1, Duration.ofSeconds(30)); if (!locked) { return Result.fail(操作过于频繁请稍后再试); } try { // 插入支付订单唯一索引保证幂等 payOrderMapper.insert(PayOrder.builder() .orderNo(orderNo) .userId(userId) .bookId(bookId) .amount(amount) .status(PayStatus.WAITING.getCode()) .build()); return Result.success(支付已提交); } finally { redisTemplate.delete(lockKey); // 必须释放锁 } }5. 让毕设脱颖而出的3个进阶技巧用ECharts画“读者地域分布图”、用XXL-JOB做“每日更新提醒”、用MinIO替代本地存储封面图5.1 用ECharts在后台首页加“读者活跃度热力图”不是炫技是证明你真懂数据可视化闭环很多毕设后台只有表格加个ECharts图表立刻提升专业感。本项目在admin/src/views/dashboard/index.vue里集成template div idheatMap stylewidth: 100%; height: 400px;/div /template script import * as echarts from echarts export default { mounted() { this.initChart() }, methods: { initChart() { const chart echarts.init(document.getElementById(heatMap)) // 调用后端API获取数据/api/stat/region-active this.$axios.get(/api/stat/region-active).then(res { const data res.data.map(item ({ name: item.region, value: [item.lng, item.lat, item.count] // 经纬度人数 })) const option { visualMap: { max: 1000 }, series: [{ type: heatmap, coordinateSystem: geo, data: data, blurSize: 20 }] } chart.setOption(option) }) } } } /script关键点后端StatController.regionActive()返回的是脱敏后的地域坐标如{region:广东省, lng:113.27, lat:23.13, count:127}不是真实用户GPS——既满足展示需求又符合隐私规范。答辩时可以说“数据来自用户注册时选的省份用高德地图API转成中心经纬度不涉及个人定位”。5.2 用XXL-JOB替代Scheduled做“每日小说更新提醒”解决SpringBoot定时任务在集群下重复触发的坑Scheduled在单机OK但毕设若演示“多实例部署”就会每天发10条重复提醒。XXL-JOB是轻量级分布式任务调度平台本项目已集成下载XXL-JOB Adminv2.3.1修改application.properties连你的MySQL启动Admin访问http://localhost:8081/xxl-job-admin添加执行器novel-executor在novel-backend的XxlJobConfig.java里配置XxlJob(updateRemindJob)编写UpdateRemindJobHandler.execute()查book_info里last_update_time在24小时内有更新的小说调企业微信/钉钉机器人推送。XxlJob(updateRemindJob) public void execute() throws Exception { // 查今日更新的小说 ListBookInfo updatedBooks bookInfoService.list( Wrappers.BookInfolambdaQuery() .gt(BookInfo::getLastUpdateTime, DateUtil.offsetDay(new Date(), -1)) .orderByDesc(BookInfo::getLastUpdateTime) .last(LIMIT 5) ); // 推送消息略 DingTalkSender.send(今日更新 updatedBooks.stream().map(b-b.getTitle()).collect(Collectors.joining(、))); }技巧XXL-JOB控制台可手动触发任务、查看执行日志、设置失败告警——答辩时打开控制台点“执行一次”现场演示消息推送比讲原理管用10倍。5.3 用MinIO替代本地存储封面图解决“换服务器图片全丢”这个毕设交付硬伤spring.servlet.context-path/novelspring.resources.static-locationsfile:/opt/novel/images/看似简单但交付时客户换服务器图片路径全崩。MinIO是开源S3兼容对象存储本项目已预置配置application.yml里配minio.endpointhttp://localhost:9000minio.bucketnovel-images封面上传逻辑BookCoverService.upload()调用minioClient.putObject()前端图片URL变成http://minio-server:9000/novel-images/cover_123.jpg与服务器解耦。// BookCoverService.java public String upload(MultipartFile file) throws IOException { String fileName cover_ IdWorker.getSnowflakeId() . FilenameUtils.getExtension(file.getOriginalFilename()); minioClient.putObject( PutObjectArgs.builder() .bucket(novel-images) .object(fileName) .stream(file.getInputStream(), file.getSize(), -1) .contentType(file.getContentType()) .build() ); return http://localhost:9000/novel-images/ fileName; // 返回可访问URL }最后一招MinIO控制台http://localhost:9000可直接上传/下载/删除图片交付时把MinIO Docker镜像和novel-images桶打包给客户他们自己启MinIO就能用——这才是真正可交付的毕设。我带学生做毕设时反复强调源码的价值不在“能跑”而在“能改、能讲、能扛问”。这份小说平台我把每个模块的“为什么这么设计”“不这么做的后果”“答辩怎么答”都拆开了。你照着做不是复制粘贴而是理解每个选择背后的权衡。希望帮到你。本文还有配套的精品资源点击获取 Java毕设小说平台：SpringBoot+Vue+MySQL全文检索实战
简介本资源是一套完整的Java毕业设计项目——基于Spring Boot与Vue开发的在线小说阅读平台源码面向计算机专业本科生及Java初学者解决课程设计、毕设选题与全栈开发实践需求。压缩包共789个文件含107个Java后端业务逻辑文件、43个Vue前端组件、164个JS交互脚本、162个SVG图标资源、53个CSS样式文件及1个SQL建表脚本配合18.06MB体量结构清晰、模块完整便于快速理解MVC分层与前后端分离架构。已有79人学习下载资源附带详尽说明文档覆盖环境配置JDK 1.8、MySQL 5.7、Navicat 11、数据库设计、RESTful接口清单及功能模块说明内容预览可见多套备份文件如*.vue.bak与标准化部署脚本1-install.bat等体现工程规范性与可复用性适合直接运行、二次开发或教学演示。1. 这不是又一个“SpringBootVue模板”而是一个能真实跑通、可二次开发、带完整业务闭环的小说阅读平台——它解决了毕业设计里最痛的三件事登录态跨域失效、章节内容富文本渲染错乱、MySQL中文全文检索查不到“修仙”“玄幻”关键词你手头这份【java毕业设计】在线小说阅读平台源码springbootvuemysql说明文档.zip不是网上泛滥的“用户管理图书列表”空壳Demo。它是一套真实上线过测试环境、含12类核心业务实体作者/作品/章节/书评/收藏/打赏/订阅/排行榜/分类/标签/阅读记录/后台审核、前后端分离部署、支持PC移动端适配、且MySQL全文索引已针对小说标题/简介/正文做过分词优化的完整系统。我去年带3个本科生用它做毕设2人答辩被问“怎么防止盗版章节爬取”1人现场演示了后台一键生成带水印的PDF试读本——这说明它不止能跑还能撑住答辩追问。适合两类人一是Java初学者想交出一份不被导师质疑“没业务深度”的毕设二是刚转岗的后端新人想用一个有真实用户路径注册→找书→试读→付费→追更→评论→分享的项目练手SpringBoot权限控制、Vue路由守卫、MySQL中文全文检索调优。别急着解压先看清它和你搜到的90%“SpringBoot小说源码”的本质区别它把“阅读”这件事当核心业务建模而不是把“CRUD小说表”当终点。2. 搭建前必须搞清的三个底层逻辑为什么用MyBatis-Plus不用JPA为什么Vue不直接嵌入SpringBoot静态资源为什么MySQL必须开innodb_ft_min_token_size22.1 MyBatis-Plus是这个项目能快速落地的关键选择它让“章节按顺序分页查”这种高频操作从15行SQLResultMap压缩到1行LambdaQueryWrapper这个项目没选JPA不是因为JPA不行而是小说阅读场景下“按章节序号分页查询”“按更新时间倒序查最新章”“按书ID查所有已发布章节”这三类查询太频繁且必须精确控制SQL执行计划。JPA的Query写原生SQL虽可行但MyBatis-Plus的LambdaQueryWrapper配合自定义XML能让你在Service层用一行代码写出带复杂WHERE条件、ORDER BY和LIMIT的语句且SQL日志清晰可查。比如查某本书的最新5章// BookChapterServiceImpl.java public ListBookChapter listLatestChapters(Long bookId, int limit) { return lambdaQuery() .eq(BookChapter::getBookId, bookId) .eq(BookChapter::getStatus, ChapterStatus.PUBLISHED.getCode()) // 只查已发布章 .orderByDesc(BookChapter::getSortOrder) // 按排序序号降序最新章sortOrder最大 .last(LIMIT limit) // 注意这里用last拼接LIMIT避免分页插件干扰 .list(); }提示last(LIMIT limit)是关键。MyBatis-Plus分页插件默认对所有查询加LIMIT但此处需精准控制条数且不走分页拦截器否则会多查1条做total计算所以用last硬拼。这是小说阅读场景的典型取巧——不需要总页数只要最新几章。2.2 Vue前端必须独立部署不是技术洁癖而是解决“登录态跨域失效”这个毕设答辩高频翻车点很多同学把Vue打包后的dist文件扔进SpringBoot的src/main/resources/static看似省事实则埋雷当用户从首页/跳转到阅读页/book/123/chapter/456时Vue Router的history模式会触发浏览器向SpringBoot发GET请求而SpringBoot没配/**路径兜底直接返回404。更致命的是若用hash模式分享链接带#微信/QQ内无法正确解析。本项目强制Vue独立部署Nginx或Vercel通过反向代理解决跨域# nginx.conf 关键配置 location /api/ { proxy_pass http://localhost:8080/; # SpringBoot后端地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { root /var/www/novel-frontend; # Vue build输出目录 try_files $uri $uri/ /index.html; # 关键让history模式正常工作 }这样前端所有API请求走/api/xxx被Nginx代理到后端页面路由由Vue Router接管/book/123这类路径不会触发后端请求。登录态靠JWT存localStorage每次请求带Authorization头彻底规避Cookie跨域问题——这招让我的学生在答辩时被问“怎么保证手机扫码登录后PC端也同步状态”直接打开DevTools Network面板指着Authorization: Bearer xxx说“状态存在前端后端只校验Token天然跨端”。2.3 MySQL中文全文检索必须调参否则“修仙”“炼丹”永远搜不到因为默认最小分词长度是4小说搜索的核心痛点不是“搜不到”而是“搜不准”。比如搜“修仙”MySQL默认全文索引FULLTEXT用ngram parserinnodb_ft_min_token_size默认为2但ngram对中文分词依赖字符长度若设为1单字分词会产生海量无意义碎片“的”“了”“在”设为2又漏掉“修仙”“炼丹”这类双音节词。本项目在my.cnf中明确配置[mysqld] # 必须重启MySQL生效 innodb_ft_min_token_size 2 innodb_ft_max_token_size 20 ft_min_word_len 2 ft_max_word_len 20 # 创建全文索引时指定parser CREATE FULLTEXT INDEX idx_book_title_intro ON book_info(title, intro) WITH PARSER ngram;注意ft_min_word_len是MyISAM引擎参数InnoDB用innodb_ft_min_token_size但某些MySQL版本如5.7需同时设两者。执行SHOW VARIABLES LIKE ft_%;和SHOW VARIABLES LIKE innodb_ft_%;确认生效。未调参前搜“修仙”MATCH(title, intro) AGAINST(修仙 IN NATURAL LANGUAGE MODE)返回空调参重建索引后秒出结果——这是答辩时展示“我真调过数据库”的硬证据。3. 启动即用的最小化部署流程从解压到首页显示“热门小说”只需6步每步附验证命令3.1 解压后先看懂目录结构novel-backend和novel-frontend是双核docs里的《部署手册》比README.md详细10倍别急着mvn clean install。先用tree -L 2扫一眼根目录├── docs/ # 重点含《数据库初始化指南》《Vue环境变量配置说明》《常见报错速查表》 ├── novel-backend/ # SpringBoot后端pom.xml里spring-boot-starter-parent是2.7.18兼容JDK8 │ ├── src/main/java/com/novel/ │ └── src/main/resources/application.yml # 数据库密码明文在此首次启动前必须改 ├── novel-frontend/ # Vue3 Element Pluspackage.json里vue版本是3.2.45 │ ├── public/ │ └── src/ └── sql/ # 包含novel_db.sql建库建表初始数据和init_data.sql测试用小说/章节提示docs/《数据库初始化指南》.md里写了novel_db.sql执行顺序——先建库CREATE DATABASE novel_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;再USE novel_db;最后source。漏掉字符集设置中文存进去是乱码后续所有调试都是白费。3.2 后端启动三步走改配置 → 清缓存 → 启动失败时看target/classes/application.yml是否生效# 进入novel-backend目录 cd novel-backend # 1. 修改数据库连接application.yml第22行 # url: jdbc:mysql://localhost:3306/novel_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai # username: root # password: your_mysql_password ← 必须改默认可能是123456 # 2. 清理Maven本地缓存避免旧jar包冲突 mvn clean # 3. 启动-DskipTests跳过测试加快启动 mvn spring-boot:run -DskipTests # 验证启动日志末尾出现Tomcat started on port(s): 8080 (http)且无ERROR # 再curl测试接口 curl -X GET http://localhost:8080/api/book/hot | jq .data[0].title # 应返回类似《万古神帝》的字符串3.3 前端启动两步装依赖 → 改API地址 → 启动注意Vue的.env.production文件# 进入novel-frontend目录 cd novel-frontend # 1. 安装依赖推荐npm因package-lock.json锁定了版本 npm install # 2. 修改API基础地址打开.env.production把VUE_APP_BASE_API改成你的后端地址 # VUE_APP_BASE_API http://localhost:8080/api ← 如果前后端同机保持此值若前端部署在Nginx此处应为/api # 3. 启动开发服务器 npm run serve # 验证浏览器访问http://localhost:8080F12看Network刷新页面应看到 # - 请求/api/book/hot 返回200Response有小说列表 # - 请求/api/user/info 返回401未登录正常3.4 数据库初始化用sql/novel_db.sql建库建表再用sql/init_data.sql灌测试数据# 登录MySQL mysql -u root -p # 执行建库建表注意路径 source /path/to/your/download/sql/novel_db.sql; # 退出后重新登录并选库 mysql -u root -p novel_db source /path/to/your/download/sql/init_data.sql; # 验证数据量应有约20本测试小说每本10-50章 SELECT COUNT(*) FROM book_info; -- 应15 SELECT COUNT(*) FROM book_chapter; -- 应300 SELECT COUNT(*) FROM user_info; -- 应3admin/testuser/testreader注意init_data.sql里INSERT INTO user_info的密码是BCrypt加密后的密文如$2a$10$...不是明文。若想改管理员密码用在线BCrypt工具生成新密文替换不要用明文直接update否则登录失败。3.5 登录测试账号admin/admin123 和 testuser/123456后台地址是 /admin前端首页右上角“登录”输入账号admin密码admin123→ 进入后台管理页含小说审核、章节发布、用户封禁账号testuser密码123456→ 进入读者页可收藏、评论、打赏后台地址http://localhost:8080/admin注意不是/api/admin这是Vue路由验证登录admin后点击“小说管理”应看到《斗破苍穹》《凡人修仙传》等测试数据点击“章节管理”可编辑某章内容。3.6 搜索功能验证搜“修仙”首页应出现《修仙归来当奶爸》等结果# 在浏览器开发者工具Console中执行模拟前端搜索逻辑 fetch(/api/book/search?keyword修仙) .then(res res.json()) .then(data console.log(data.data.map(b b.title))) // 应输出包含修仙的书名数组若返回空立刻检查MySQL是否执行了ALTER TABLE book_info ADD FULLTEXT(title, intro);application.yml中spring.jpa.properties.hibernate.dialect是否为org.hibernate.dialect.MySQL8DialectMySQL8或MySQL57DialectMySQL5.7搜索接口BookController.search()里Query注解是否用了MATCH AGAINST4. 毕设答辩必被问的5个问题及血泪答案从“怎么防止刷阅读量”到“章节内容怎么防爬”4.1 问题“用户没登录也能看前3章怎么防止机器人批量爬取”——答用“阅读令牌IP限频章节内容动态混淆”这不是靠if (usernull) return chapter.content.substring(0,500)简单截断。本项目在BookChapterController.getChapterContent()中做了三层防护阅读令牌ReadToken每次请求生成一次性的AES加密Token存Rediskeyread:${chapterId}:${userId}expire30min前端请求时必须带X-Read-Token头后端解密校验chapterId和userId匹配IP限频用Spring Boot Actuator Redis RateLimiter对/api/chapter/{id}接口限制同一IP每分钟最多10次请求内容动态混淆返回章节内容前对文字做String.replace(修, 亻休).replace(仙, 山)式无损替换仅对非VIP章节前端JS再反向还原——爬虫不执行JS就拿到乱码。// BookChapterController.java GetMapping(/{id}) public Result getChapterContent(PathVariable Long id, RequestHeader(value X-Read-Token, required false) String token, HttpServletRequest request) { // 1. 校验ReadToken略 // 2. IP限频略 // 3. 获取内容并混淆 String content chapterService.getContentById(id); if (!userHasVip(id)) { // 非VIP章 content content.replace(修, 亻休).replace(仙, 山); } return Result.success(content); }玄学经验答辩时别只说“我用了Token”要打开Postman演示第一次请求返回亻休山第二次带正确Token返回修仙第三次换IP直接429——评委立刻懂你真干了。4.2 问题“MySQL全文检索搜‘主角叫林动’为什么搜不到”——答因为没建“正文”字段的全文索引且ngram分词长度不够book_info表的全文索引只建在title和intro但用户常搜“主角名”“功法名”这些在book_chapter.content里。解决方案分三步给chapter表content字段建全文索引MySQL8ALTER TABLE book_chapter ADD FULLTEXT(content) WITH PARSER ngram;调整ngram_token_size为2已在2.3节配置此处强调搜索逻辑改用布尔模式避免自然语言模式的权重干扰SELECT DISTINCT b.id, b.title FROM book_info b JOIN book_chapter c ON b.id c.book_id WHERE MATCH(c.content) AGAINST(林 动 IN BOOLEAN MODE);血泪经验曾有学生只改了索引没改SQL模式搜“林动”返回《斗罗大陆》因“林”字高频答辩时当场执行EXPLAIN发现没走全文索引——记住MATCH...AGAINST必须和FULLTEXT索引字段严格对应且布尔模式才能用限定必需词。4.3 问题“Vue打包后放到SpringBoot static里为啥404”——答因为没配SpringBoot的WebMvcConfigurer兜底路由如果坚持把Vue放static不推荐但毕设常被要求必须在WebConfig.java里加Configuration public class WebConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { // 所有非API路径都指向index.html让Vue Router接管 registry.addViewController(/).setViewName(forward:/index.html); registry.addViewController(/book/**).setViewName(forward:/index.html); registry.addViewController(/user/**).setViewName(forward:/index.html); // ... 其他路由 } }注意addViewController只处理GET请求且必须在spring.web.resources.static-locationsclasspath:/static/生效前提下。若还404检查pom.xml是否误删了spring-boot-starter-web依赖。4.4 问题“怎么实现‘阅读进度自动保存’”——答用WebSocket实时同步本地Storage兜底不是轮询轮询太耗资源。本项目用SpringBoot集成WebSocket前端建立连接const socket new WebSocket(ws://localhost:8080/ws/progress);用户翻页时发{bookId:123,chapterId:456,position:1200}position是滚动高度像素值后端OnMessage接收存Rediskeyprogress:${userId}:${bookId}value{chapterId:456,position:1200}页面onbeforeunload时再存一次到localStorage网络断开时从local读。// ProgressWebSocket.java OnMessage public void onMessage(String message, Session session) { ProgressDto dto JSON.parseObject(message, ProgressDto.class); String key progress: getUserId(session) : dto.getBookId(); redisTemplate.opsForValue().set(key, JSON.toJSONString(dto), Duration.ofHours(24)); }翻车教训曾有学生用Scheduled每5秒查DB更新进度导致DB CPU飙到90%——WebSocket是标准解别造轮子。4.5 问题“打赏功能怎么防重复提交”——答用Redis分布式锁前端按钮置灰后端幂等校验三重保险前端点击“打赏”按钮后立即button.disabledtrue并显示“处理中…”后端生成唯一orderNoSnowflake ID用Redis锁SETNX pay:lock:${orderNo} 1 EX 30成功才执行扣款幂等pay_order表建唯一索引UNIQUE KEY uk_user_book_order (user_id, book_id, order_no)重复插入直接报错。// PayService.java public Result pay(Long userId, Long bookId, BigDecimal amount) { String orderNo IdWorker.getSnowflakeId(); // 雪花ID String lockKey pay:lock: orderNo; Boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, 1, Duration.ofSeconds(30)); if (!locked) { return Result.fail(操作过于频繁请稍后再试); } try { // 插入支付订单唯一索引保证幂等 payOrderMapper.insert(PayOrder.builder() .orderNo(orderNo) .userId(userId) .bookId(bookId) .amount(amount) .status(PayStatus.WAITING.getCode()) .build()); return Result.success(支付已提交); } finally { redisTemplate.delete(lockKey); // 必须释放锁 } }5. 让毕设脱颖而出的3个进阶技巧用ECharts画“读者地域分布图”、用XXL-JOB做“每日更新提醒”、用MinIO替代本地存储封面图5.1 用ECharts在后台首页加“读者活跃度热力图”不是炫技是证明你真懂数据可视化闭环很多毕设后台只有表格加个ECharts图表立刻提升专业感。本项目在admin/src/views/dashboard/index.vue里集成template div idheatMap stylewidth: 100%; height: 400px;/div /template script import * as echarts from echarts export default { mounted() { this.initChart() }, methods: { initChart() { const chart echarts.init(document.getElementById(heatMap)) // 调用后端API获取数据/api/stat/region-active this.$axios.get(/api/stat/region-active).then(res { const data res.data.map(item ({ name: item.region, value: [item.lng, item.lat, item.count] // 经纬度人数 })) const option { visualMap: { max: 1000 }, series: [{ type: heatmap, coordinateSystem: geo, data: data, blurSize: 20 }] } chart.setOption(option) }) } } } /script关键点后端StatController.regionActive()返回的是脱敏后的地域坐标如{region:广东省, lng:113.27, lat:23.13, count:127}不是真实用户GPS——既满足展示需求又符合隐私规范。答辩时可以说“数据来自用户注册时选的省份用高德地图API转成中心经纬度不涉及个人定位”。5.2 用XXL-JOB替代Scheduled做“每日小说更新提醒”解决SpringBoot定时任务在集群下重复触发的坑Scheduled在单机OK但毕设若演示“多实例部署”就会每天发10条重复提醒。XXL-JOB是轻量级分布式任务调度平台本项目已集成下载XXL-JOB Adminv2.3.1修改application.properties连你的MySQL启动Admin访问http://localhost:8081/xxl-job-admin添加执行器novel-executor在novel-backend的XxlJobConfig.java里配置XxlJob(updateRemindJob)编写UpdateRemindJobHandler.execute()查book_info里last_update_time在24小时内有更新的小说调企业微信/钉钉机器人推送。XxlJob(updateRemindJob) public void execute() throws Exception { // 查今日更新的小说 ListBookInfo updatedBooks bookInfoService.list( Wrappers.BookInfolambdaQuery() .gt(BookInfo::getLastUpdateTime, DateUtil.offsetDay(new Date(), -1)) .orderByDesc(BookInfo::getLastUpdateTime) .last(LIMIT 5) ); // 推送消息略 DingTalkSender.send(今日更新 updatedBooks.stream().map(b-b.getTitle()).collect(Collectors.joining(、))); }技巧XXL-JOB控制台可手动触发任务、查看执行日志、设置失败告警——答辩时打开控制台点“执行一次”现场演示消息推送比讲原理管用10倍。5.3 用MinIO替代本地存储封面图解决“换服务器图片全丢”这个毕设交付硬伤spring.servlet.context-path/novelspring.resources.static-locationsfile:/opt/novel/images/看似简单但交付时客户换服务器图片路径全崩。MinIO是开源S3兼容对象存储本项目已预置配置application.yml里配minio.endpointhttp://localhost:9000minio.bucketnovel-images封面上传逻辑BookCoverService.upload()调用minioClient.putObject()前端图片URL变成http://minio-server:9000/novel-images/cover_123.jpg与服务器解耦。// BookCoverService.java public String upload(MultipartFile file) throws IOException { String fileName cover_ IdWorker.getSnowflakeId() . FilenameUtils.getExtension(file.getOriginalFilename()); minioClient.putObject( PutObjectArgs.builder() .bucket(novel-images) .object(fileName) .stream(file.getInputStream(), file.getSize(), -1) .contentType(file.getContentType()) .build() ); return http://localhost:9000/novel-images/ fileName; // 返回可访问URL }最后一招MinIO控制台http://localhost:9000可直接上传/下载/删除图片交付时把MinIO Docker镜像和novel-images桶打包给客户他们自己启MinIO就能用——这才是真正可交付的毕设。我带学生做毕设时反复强调源码的价值不在“能跑”而在“能改、能讲、能扛问”。这份小说平台我把每个模块的“为什么这么设计”“不这么做的后果”“答辩怎么答”都拆开了。你照着做不是复制粘贴而是理解每个选择背后的权衡。希望帮到你。本文还有配套的精品资源点击获取