尧图网页设计 
简介这份资源是面向高校计算机相关专业毕业设计场景的在线图书阅读系统完整源码包采用SpringBoot后端与Vue前端分离架构并整合图书管理、图书创作与社区互动于一体适合需要完成毕设选题、课程设计或全栈项目练手的同学参考。压缩包共1777个文件约23.01MB其中274个Java文件承载后端业务逻辑314个Vue组件与379个JavaScript脚本构成前端页面与交互另含114个properties配置、88个JSON数据文件及SQL建库脚本并附带安装部署文档与字体资源便于快速还原运行环境。已有150人学习下载。资源提供数据库脚本、Redis与Druid配置说明及前后端启动流程读者可据此掌握权限管理、图书阅读、创作发布与社区交流等模块的实现思路并借助现成目录结构完成二次开发与功能扩展。1. 从一份毕业设计源码说起SpringBootVue 在线图书阅读系统到底包含什么每年毕业季总有一批同学拿着「基于 SpringBootVue 的在线图书阅读系统」这个题目来找我开口第一句往往是有没有现成的源代码和数据库能跑起来。这个题目的确经典——它把图书管理系统、在线阅读、创作社区三块业务揉在一起既能体现后端 CRUD 功底又能展示前端交互能力答辩时也好讲。但真正动手才会发现坑不在业务逻辑而在环境配置、前后端联调、数据库设计和部署文档这四件事上。这篇笔记就按一线实操的顺序把 SpringBoot 后端、Vue 前端、MySQL 数据库、部署文档这条链路拆开讲清楚让你拿到源代码后能真正跑通而不是卡在npm install报错或者跨域 403 上。适合正在做毕设的本科生也适合想拿这套架构练手全栈的初中级开发者。2. 技术选型与项目结构为什么是 SpringBoot Vue 而不是别的2.1 后端选 SpringBoot 的三个现实理由毕业设计选 SpringBoot最直接的原因是生态成熟、资料多、出问题能搜到答案。但更实际的理由是它把 Tomcat 内嵌了打成 jar 包直接java -jar就能跑省去了配 Tomcat 的麻烦。对于图书阅读系统这种以 REST 接口为主的场景SpringBoot 的spring-boot-starter-web加上 MyBatis-Plus基本能覆盖 90% 的增删改查需求。版本选择上有个血泪经验别追最新。热搜里「springboot版本太高」这个问题非常真实SpringBoot 3.x 要求 JDK 17而很多学校机房还是 JDK 8。我一般建议用 SpringBoot 2.7.x 配 JDK 8稳定且和大多数教程兼容。如果非要用 3.x先确认javax到jakarta的包名迁移否则启动就报ClassNotFoundException。项目结构上标准的四层分包足够用com.library ├── controller // 接口层 ├── service // 业务层 │ └── impl ├── mapper // 数据访问层 ├── entity // 实体类 ├── config // 配置类跨域、拦截器 └── common // 统一返回、工具类这个结构的好处是答辩时老师一眼能看懂维护时也知道改哪一层。别搞太多花哨的 DDD 分层毕设阶段够用就行。2.2 前端选 Vue 的考量与版本坑Vue 这边热搜里「vue安装及环境配置」「vue项目源码怎么发给别人」出现频率很高说明大家卡在环境上的不少。Vue 2 和 Vue 3 的差异在毕设里其实不大但生态有区别Vue 2 配 Element UIVue 3 配 Element Plus。如果你拿到的源代码是 Vue 2 写的别硬升 Vue 3语法和依赖都会崩。前端目录一般长这样src ├── api // 接口封装 ├── views // 页面 ├── components // 公共组件 ├── router // 路由配置 ├── store // 状态管理 └── utils // 请求封装「vue路由」和「vue动态路由」是阅读系统里必须处理的点——不同角色读者、作者、管理员看到的菜单不一样动态路由要根据后端返回的权限来生成。这块后面会细讲。2.3 数据库表设计的核心几张表图书阅读系统的数据库核心表其实就七八张但设计好坏直接影响后面写代码顺不顺。我一般会这样分表名作用关键字段user用户读者/作者/管理员id, username, password, rolebook图书信息id, title, author, cover, category_idchapter章节内容id, book_id, title, content, sortbookshelf书架收藏id, user_id, book_idcomment评论id, user_id, book_id, contentcreation创作作品id, author_id, title, status注意chapter表的content字段用LONGTEXT别用VARCHAR否则长章节存不下。role字段用TINYINT存 0/1/2 比存字符串省事前端判断也快。3. 后端落地从建库到接口跑通的最小步骤3.1 数据库建表与初始化数据拿到源代码后第一步永远是建库。先确认 MySQL 版本5.7 和 8.0 在驱动类名上有区别5.7 用com.mysql.jdbc.Driver8.0 用com.mysql.cj.jdbc.Driver写错了启动就报错。CREATE DATABASE library_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE library_db; CREATE TABLE user ( id INT NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL COMMENT 用户名, password VARCHAR(100) NOT NULL COMMENT 密码, role TINYINT DEFAULT 0 COMMENT 0读者 1作者 2管理员, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;字符集一定用utf8mb4不然存中文书名或者 emoji 评论会乱码。建完表把源代码里的library_db.sql导入注意导入时如果报Unknown collation: utf8mb4_0900_ai_ci说明你的 MySQL 是 5.7而 sql 文件是 8.0 导出的把文件里的utf8mb4_0900_ai_ci全局替换成utf8mb4_general_ci即可。3.2 application.yml 里必须改的四个配置配置文件是新手翻车重灾区。下面这份是精简后的关键配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/library_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true四个必改点url里的数据库名、username、password、serverTimezone。时区不写Asia/Shanghai插入时间会差 8 小时这个坑我见过太多人踩。map-underscore-to-camel-case打开后数据库的create_time能自动映射到实体的createTime省去手写 resultMap。3.3 跨域配置前后端联调的第一道坎前端跑在 8081后端跑在 8080浏览器同源策略直接拦请求。热搜里「vue打包放进springboot中」是一种解法但开发阶段更推荐配跨域。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 允许所有来源 .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) // 允许携带cookie .maxAge(3600); } }注意allowedOrigins(*)和allowCredentials(true)在旧版本 Spring 里会冲突用allowedOriginPatterns替代。配完重启后端前端请求如果还报跨域检查是不是拦截器里又拦了一道或者 Nginx 转发时把 header 丢了。3.4 图书列表接口的完整实现以图书列表为例走一遍 Controller 到 Mapper 的链路RestController RequestMapping(/api/book) public class BookController { Autowired private BookService bookService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size, RequestParam(required false) String keyword) { PageBook result bookService.pageQuery(page, size, keyword); return Result.success(result); } }Result是统一返回封装包含code、msg、data三个字段。分页用 MyBatis-Plus 的Page对象keyword做书名模糊查询。这里的关键是RequestParam的defaultValue前端不传分页参数时给默认值避免空指针。Service 层调bookMapper.selectPageMapper 继承BaseMapperBook即可简单查询不用写 XML。4. 前端落地Vue 项目跑起来与核心页面实现4.1 环境配置与依赖安装的常见报错拿到前端源码先看package.json里的依赖版本。热搜里「vue安装依赖」失败八成是 node 版本和依赖不匹配。Vue 2 项目建议 node 14 或 16Vue 3 项目建议 node 16 以上。node 版本用nvm管理最省心。# 查看当前 node 版本 node -v # 安装依赖国内建议换源 npm config set registry https://registry.npmmirror.com npm install # 启动开发服务器 npm run serve如果npm install卡在某个包不动多半是网络问题换源后重试。如果报node-sass编译错误那是 node 版本太高降到 14 或换成sassdart-sass。「vue项目源码怎么发给别人」这个问题正确做法是把node_modules删掉再打包发对方拿到后自己npm install因为node_modules里有些包是平台相关的直接拷过去可能跑不起来。4.2 请求封装与 token 拦截前端所有请求走一个统一的 axios 实例方便加 token 和统一处理错误import axios from axios const request axios.create({ baseURL: http://localhost:8080/api, timeout: 5000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { // token 失效跳登录 window.location.href /login } return Promise.reject(error) } ) export default requestbaseURL指向后端地址开发阶段直接写死上线时改成相对路径配合 Nginx。请求拦截器负责塞 token响应拦截器负责处理 401 跳登录。注意后端返回的结构要和前端约定好response.data直接取到Result对象页面里再判断code。4.3 动态路由与权限菜单阅读系统里三种角色看到的菜单不同动态路由是必须的。思路是登录后拿到角色前端根据角色过滤路由表// router/index.js const asyncRoutes [ { path: /reader, component: Layout, meta: { roles: [0] }, children: [...] }, { path: /author, component: Layout, meta: { roles: [1] }, children: [...] }, { path: /admin, component: Layout, meta: { roles: [2] }, children: [...] } ] // 登录后过滤 function filterRoutes(routes, role) { return routes.filter(route { if (route.meta route.meta.roles) { return route.meta.roles.includes(role) } return true }) }过滤后的路由用router.addRoutesVue 2或router.addRouteVue 3动态添加。这里有个坑刷新页面后动态路由会丢失需要在路由守卫里重新拉取用户信息并添加路由否则刷新就白屏。4.4 阅读器页面的章节切换与进度保存阅读器是在线阅读系统的核心页面。章节内容从后端按book_id和sort拉取切换章节时更新 URL 参数。进度保存用localStorage记录当前章节 id下次打开直接跳转methods: { async loadChapter(chapterId) { const res await getChapterDetail(chapterId) this.content res.data.content this.currentChapterId chapterId localStorage.setItem(book_${this.bookId}_progress, chapterId) }, nextChapter() { const next this.chapterList.find(c c.sort this.currentSort 1) if (next) this.loadChapter(next.id) } }chapterList在进入阅读页时一次性拉取只含章节标题和 id不含正文避免首屏加载太慢。正文按需加载切换时给个 loading 状态。进度存localStorage而不是后端是因为毕设阶段没必要为阅读进度单独建表前端存足够用。5. 避坑与排查部署和联调中最容易翻车的五个点5.1 现象后端启动报数据库连接失败原因通常是三选一MySQL 服务没启动、账号密码错、时区或驱动类名不对。先mysql -u root -p手动登录确认服务正常再核对application.yml里的密码有没有被引号包错。如果报The server time zone value ???ú±ê×??±?? is unrecognized就是时区没配在 url 后加serverTimezoneAsia/Shanghai。5.2 现象前端请求返回 404 但后端日志没记录原因多半是baseURL写错或者代理没配。开发阶段如果用了vue.config.js的devServer.proxy检查pathRewrite有没有把/api去掉。另一种情况是后端接口路径带了/api前缀前端又加了一遍变成/api/api/book/list。解决方法是前后端约定好前缀只加一次或者用代理统一处理。5.3 现象npm install 报 ERESOLVE 依赖冲突这是 npm 7 以上版本的严格 peer 依赖检查导致的。临时解法是加--legacy-peer-depsnpm install --legacy-peer-deps根治方法是看package.json里哪个依赖版本冲突手动对齐。毕设项目里常见的是vue和vue-template-compiler版本不一致两个必须完全相同。5.4 现象打包后页面空白控制台报资源 404vue.config.js里publicPath默认是/如果部署到子目录下会找不到资源。改成./用相对路径module.exports { publicPath: ./, outputDir: dist }另外路由模式如果是historyNginx 要配try_files $uri $uri/ /index.html否则刷新页面 404。毕设阶段图省事可以用hash模式URL 带#但不会出这问题。5.5 现象中文乱码书名和评论显示问号三个地方要统一数据库字符集utf8mb4、连接 url 加characterEncodingutf8、前端页面meta charsetutf-8。如果数据库已经是utf8mb4还乱码检查建表时有没有单独指定CHARSETlatin1有的话ALTER TABLE改回来。还有一种情况是导入 sql 文件时用了source命令但客户端编码不对用mysql --default-character-setutf8mb4重新导入。6. 进阶技巧把创作社区和阅读系统真正打通前面讲的都是「跑起来」这一章讲怎么让这套系统在答辩时显得有深度。创作集社区和阅读系统如果只是两个独立模块老师一眼就看出是拼凑的。真正打通的做法是让创作作品能直接转为可阅读的图书。具体实现上在creation表加一个book_id字段作者发布作品并通过审核后后端自动在book表插入一条记录并把creation.book_id关联过去。这样读者在书城能看到这部作品作者在创作中心也能看到自己的作品被阅读的数据。Transactional public void publishCreation(Long creationId) { Creation creation creationMapper.selectById(creationId); if (creation.getStatus() ! 1) { throw new BusinessException(作品未通过审核); } Book book new Book(); book.setTitle(creation.getTitle()); book.setAuthorId(creation.getAuthorId()); book.setSourceType(1); // 1 表示来自创作社区 bookMapper.insert(book); creation.setBookId(book.getId()); creationMapper.updateById(creation); }Transactional保证两步操作要么都成功要么都回滚避免出现作品发布了但书城没有的情况。sourceType字段用来区分是原创作品还是导入图书前端可以据此显示「原创」标签。验证这套逻辑是否跑通我一般会走一遍完整链路注册一个作者账号发布作品用管理员账号审核通过再切到读者账号去书城搜索看能不能搜到并正常阅读。这条链路走通答辩时演示效果比单纯展示 CRUD 强得多。还有个细节是阅读量统计。别每次打开章节就update book set views views 1高并发下会锁行。毕设阶段量小无所谓但可以顺手用 Redis 的incr做计数定时同步回数据库答辩时提一句就是加分项。最后说个我自己的习惯拿到任何一套源代码先别急着改业务先把「启动 → 登录 → 一个完整业务流」跑通跑不通就先解决环境问题。环境问题解决了代码逻辑问题都是小问题。这套 SpringBootVue 的图书阅读系统真正值钱的地方不是代码本身而是你把它跑通、改通、讲通的过程。希望帮到你。本文还有配套的精品资源点击获取 SpringBoot+Vue在线图书阅读系统毕业设计实战：从源码到部署全链路
简介这份资源是面向高校计算机相关专业毕业设计场景的在线图书阅读系统完整源码包采用SpringBoot后端与Vue前端分离架构并整合图书管理、图书创作与社区互动于一体适合需要完成毕设选题、课程设计或全栈项目练手的同学参考。压缩包共1777个文件约23.01MB其中274个Java文件承载后端业务逻辑314个Vue组件与379个JavaScript脚本构成前端页面与交互另含114个properties配置、88个JSON数据文件及SQL建库脚本并附带安装部署文档与字体资源便于快速还原运行环境。已有150人学习下载。资源提供数据库脚本、Redis与Druid配置说明及前后端启动流程读者可据此掌握权限管理、图书阅读、创作发布与社区交流等模块的实现思路并借助现成目录结构完成二次开发与功能扩展。1. 从一份毕业设计源码说起SpringBootVue 在线图书阅读系统到底包含什么每年毕业季总有一批同学拿着「基于 SpringBootVue 的在线图书阅读系统」这个题目来找我开口第一句往往是有没有现成的源代码和数据库能跑起来。这个题目的确经典——它把图书管理系统、在线阅读、创作社区三块业务揉在一起既能体现后端 CRUD 功底又能展示前端交互能力答辩时也好讲。但真正动手才会发现坑不在业务逻辑而在环境配置、前后端联调、数据库设计和部署文档这四件事上。这篇笔记就按一线实操的顺序把 SpringBoot 后端、Vue 前端、MySQL 数据库、部署文档这条链路拆开讲清楚让你拿到源代码后能真正跑通而不是卡在npm install报错或者跨域 403 上。适合正在做毕设的本科生也适合想拿这套架构练手全栈的初中级开发者。2. 技术选型与项目结构为什么是 SpringBoot Vue 而不是别的2.1 后端选 SpringBoot 的三个现实理由毕业设计选 SpringBoot最直接的原因是生态成熟、资料多、出问题能搜到答案。但更实际的理由是它把 Tomcat 内嵌了打成 jar 包直接java -jar就能跑省去了配 Tomcat 的麻烦。对于图书阅读系统这种以 REST 接口为主的场景SpringBoot 的spring-boot-starter-web加上 MyBatis-Plus基本能覆盖 90% 的增删改查需求。版本选择上有个血泪经验别追最新。热搜里「springboot版本太高」这个问题非常真实SpringBoot 3.x 要求 JDK 17而很多学校机房还是 JDK 8。我一般建议用 SpringBoot 2.7.x 配 JDK 8稳定且和大多数教程兼容。如果非要用 3.x先确认javax到jakarta的包名迁移否则启动就报ClassNotFoundException。项目结构上标准的四层分包足够用com.library ├── controller // 接口层 ├── service // 业务层 │ └── impl ├── mapper // 数据访问层 ├── entity // 实体类 ├── config // 配置类跨域、拦截器 └── common // 统一返回、工具类这个结构的好处是答辩时老师一眼能看懂维护时也知道改哪一层。别搞太多花哨的 DDD 分层毕设阶段够用就行。2.2 前端选 Vue 的考量与版本坑Vue 这边热搜里「vue安装及环境配置」「vue项目源码怎么发给别人」出现频率很高说明大家卡在环境上的不少。Vue 2 和 Vue 3 的差异在毕设里其实不大但生态有区别Vue 2 配 Element UIVue 3 配 Element Plus。如果你拿到的源代码是 Vue 2 写的别硬升 Vue 3语法和依赖都会崩。前端目录一般长这样src ├── api // 接口封装 ├── views // 页面 ├── components // 公共组件 ├── router // 路由配置 ├── store // 状态管理 └── utils // 请求封装「vue路由」和「vue动态路由」是阅读系统里必须处理的点——不同角色读者、作者、管理员看到的菜单不一样动态路由要根据后端返回的权限来生成。这块后面会细讲。2.3 数据库表设计的核心几张表图书阅读系统的数据库核心表其实就七八张但设计好坏直接影响后面写代码顺不顺。我一般会这样分表名作用关键字段user用户读者/作者/管理员id, username, password, rolebook图书信息id, title, author, cover, category_idchapter章节内容id, book_id, title, content, sortbookshelf书架收藏id, user_id, book_idcomment评论id, user_id, book_id, contentcreation创作作品id, author_id, title, status注意chapter表的content字段用LONGTEXT别用VARCHAR否则长章节存不下。role字段用TINYINT存 0/1/2 比存字符串省事前端判断也快。3. 后端落地从建库到接口跑通的最小步骤3.1 数据库建表与初始化数据拿到源代码后第一步永远是建库。先确认 MySQL 版本5.7 和 8.0 在驱动类名上有区别5.7 用com.mysql.jdbc.Driver8.0 用com.mysql.cj.jdbc.Driver写错了启动就报错。CREATE DATABASE library_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE library_db; CREATE TABLE user ( id INT NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL COMMENT 用户名, password VARCHAR(100) NOT NULL COMMENT 密码, role TINYINT DEFAULT 0 COMMENT 0读者 1作者 2管理员, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;字符集一定用utf8mb4不然存中文书名或者 emoji 评论会乱码。建完表把源代码里的library_db.sql导入注意导入时如果报Unknown collation: utf8mb4_0900_ai_ci说明你的 MySQL 是 5.7而 sql 文件是 8.0 导出的把文件里的utf8mb4_0900_ai_ci全局替换成utf8mb4_general_ci即可。3.2 application.yml 里必须改的四个配置配置文件是新手翻车重灾区。下面这份是精简后的关键配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/library_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true四个必改点url里的数据库名、username、password、serverTimezone。时区不写Asia/Shanghai插入时间会差 8 小时这个坑我见过太多人踩。map-underscore-to-camel-case打开后数据库的create_time能自动映射到实体的createTime省去手写 resultMap。3.3 跨域配置前后端联调的第一道坎前端跑在 8081后端跑在 8080浏览器同源策略直接拦请求。热搜里「vue打包放进springboot中」是一种解法但开发阶段更推荐配跨域。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 允许所有来源 .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) // 允许携带cookie .maxAge(3600); } }注意allowedOrigins(*)和allowCredentials(true)在旧版本 Spring 里会冲突用allowedOriginPatterns替代。配完重启后端前端请求如果还报跨域检查是不是拦截器里又拦了一道或者 Nginx 转发时把 header 丢了。3.4 图书列表接口的完整实现以图书列表为例走一遍 Controller 到 Mapper 的链路RestController RequestMapping(/api/book) public class BookController { Autowired private BookService bookService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size, RequestParam(required false) String keyword) { PageBook result bookService.pageQuery(page, size, keyword); return Result.success(result); } }Result是统一返回封装包含code、msg、data三个字段。分页用 MyBatis-Plus 的Page对象keyword做书名模糊查询。这里的关键是RequestParam的defaultValue前端不传分页参数时给默认值避免空指针。Service 层调bookMapper.selectPageMapper 继承BaseMapperBook即可简单查询不用写 XML。4. 前端落地Vue 项目跑起来与核心页面实现4.1 环境配置与依赖安装的常见报错拿到前端源码先看package.json里的依赖版本。热搜里「vue安装依赖」失败八成是 node 版本和依赖不匹配。Vue 2 项目建议 node 14 或 16Vue 3 项目建议 node 16 以上。node 版本用nvm管理最省心。# 查看当前 node 版本 node -v # 安装依赖国内建议换源 npm config set registry https://registry.npmmirror.com npm install # 启动开发服务器 npm run serve如果npm install卡在某个包不动多半是网络问题换源后重试。如果报node-sass编译错误那是 node 版本太高降到 14 或换成sassdart-sass。「vue项目源码怎么发给别人」这个问题正确做法是把node_modules删掉再打包发对方拿到后自己npm install因为node_modules里有些包是平台相关的直接拷过去可能跑不起来。4.2 请求封装与 token 拦截前端所有请求走一个统一的 axios 实例方便加 token 和统一处理错误import axios from axios const request axios.create({ baseURL: http://localhost:8080/api, timeout: 5000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { // token 失效跳登录 window.location.href /login } return Promise.reject(error) } ) export default requestbaseURL指向后端地址开发阶段直接写死上线时改成相对路径配合 Nginx。请求拦截器负责塞 token响应拦截器负责处理 401 跳登录。注意后端返回的结构要和前端约定好response.data直接取到Result对象页面里再判断code。4.3 动态路由与权限菜单阅读系统里三种角色看到的菜单不同动态路由是必须的。思路是登录后拿到角色前端根据角色过滤路由表// router/index.js const asyncRoutes [ { path: /reader, component: Layout, meta: { roles: [0] }, children: [...] }, { path: /author, component: Layout, meta: { roles: [1] }, children: [...] }, { path: /admin, component: Layout, meta: { roles: [2] }, children: [...] } ] // 登录后过滤 function filterRoutes(routes, role) { return routes.filter(route { if (route.meta route.meta.roles) { return route.meta.roles.includes(role) } return true }) }过滤后的路由用router.addRoutesVue 2或router.addRouteVue 3动态添加。这里有个坑刷新页面后动态路由会丢失需要在路由守卫里重新拉取用户信息并添加路由否则刷新就白屏。4.4 阅读器页面的章节切换与进度保存阅读器是在线阅读系统的核心页面。章节内容从后端按book_id和sort拉取切换章节时更新 URL 参数。进度保存用localStorage记录当前章节 id下次打开直接跳转methods: { async loadChapter(chapterId) { const res await getChapterDetail(chapterId) this.content res.data.content this.currentChapterId chapterId localStorage.setItem(book_${this.bookId}_progress, chapterId) }, nextChapter() { const next this.chapterList.find(c c.sort this.currentSort 1) if (next) this.loadChapter(next.id) } }chapterList在进入阅读页时一次性拉取只含章节标题和 id不含正文避免首屏加载太慢。正文按需加载切换时给个 loading 状态。进度存localStorage而不是后端是因为毕设阶段没必要为阅读进度单独建表前端存足够用。5. 避坑与排查部署和联调中最容易翻车的五个点5.1 现象后端启动报数据库连接失败原因通常是三选一MySQL 服务没启动、账号密码错、时区或驱动类名不对。先mysql -u root -p手动登录确认服务正常再核对application.yml里的密码有没有被引号包错。如果报The server time zone value ???ú±ê×??±?? is unrecognized就是时区没配在 url 后加serverTimezoneAsia/Shanghai。5.2 现象前端请求返回 404 但后端日志没记录原因多半是baseURL写错或者代理没配。开发阶段如果用了vue.config.js的devServer.proxy检查pathRewrite有没有把/api去掉。另一种情况是后端接口路径带了/api前缀前端又加了一遍变成/api/api/book/list。解决方法是前后端约定好前缀只加一次或者用代理统一处理。5.3 现象npm install 报 ERESOLVE 依赖冲突这是 npm 7 以上版本的严格 peer 依赖检查导致的。临时解法是加--legacy-peer-depsnpm install --legacy-peer-deps根治方法是看package.json里哪个依赖版本冲突手动对齐。毕设项目里常见的是vue和vue-template-compiler版本不一致两个必须完全相同。5.4 现象打包后页面空白控制台报资源 404vue.config.js里publicPath默认是/如果部署到子目录下会找不到资源。改成./用相对路径module.exports { publicPath: ./, outputDir: dist }另外路由模式如果是historyNginx 要配try_files $uri $uri/ /index.html否则刷新页面 404。毕设阶段图省事可以用hash模式URL 带#但不会出这问题。5.5 现象中文乱码书名和评论显示问号三个地方要统一数据库字符集utf8mb4、连接 url 加characterEncodingutf8、前端页面meta charsetutf-8。如果数据库已经是utf8mb4还乱码检查建表时有没有单独指定CHARSETlatin1有的话ALTER TABLE改回来。还有一种情况是导入 sql 文件时用了source命令但客户端编码不对用mysql --default-character-setutf8mb4重新导入。6. 进阶技巧把创作社区和阅读系统真正打通前面讲的都是「跑起来」这一章讲怎么让这套系统在答辩时显得有深度。创作集社区和阅读系统如果只是两个独立模块老师一眼就看出是拼凑的。真正打通的做法是让创作作品能直接转为可阅读的图书。具体实现上在creation表加一个book_id字段作者发布作品并通过审核后后端自动在book表插入一条记录并把creation.book_id关联过去。这样读者在书城能看到这部作品作者在创作中心也能看到自己的作品被阅读的数据。Transactional public void publishCreation(Long creationId) { Creation creation creationMapper.selectById(creationId); if (creation.getStatus() ! 1) { throw new BusinessException(作品未通过审核); } Book book new Book(); book.setTitle(creation.getTitle()); book.setAuthorId(creation.getAuthorId()); book.setSourceType(1); // 1 表示来自创作社区 bookMapper.insert(book); creation.setBookId(book.getId()); creationMapper.updateById(creation); }Transactional保证两步操作要么都成功要么都回滚避免出现作品发布了但书城没有的情况。sourceType字段用来区分是原创作品还是导入图书前端可以据此显示「原创」标签。验证这套逻辑是否跑通我一般会走一遍完整链路注册一个作者账号发布作品用管理员账号审核通过再切到读者账号去书城搜索看能不能搜到并正常阅读。这条链路走通答辩时演示效果比单纯展示 CRUD 强得多。还有个细节是阅读量统计。别每次打开章节就update book set views views 1高并发下会锁行。毕设阶段量小无所谓但可以顺手用 Redis 的incr做计数定时同步回数据库答辩时提一句就是加分项。最后说个我自己的习惯拿到任何一套源代码先别急着改业务先把「启动 → 登录 → 一个完整业务流」跑通跑不通就先解决环境问题。环境问题解决了代码逻辑问题都是小问题。这套 SpringBootVue 的图书阅读系统真正值钱的地方不是代码本身而是你把它跑通、改通、讲通的过程。希望帮到你。本文还有配套的精品资源点击获取