简介这是一套基于SpringBoot后端与Vue前端协同开发的轻量级书评系统源码面向计算机、数学及电子信息等专业的本科生适用于课程设计、期末大作业及毕业设计参考。项目结构清晰功能完整涵盖用户登录、图书浏览、评论发布与管理等核心模块可直接导入IDE运行调试帮助学习者理解前后端分离架构下的全栈开发流程。资源共91个文件含53个Java后端业务逻辑与控制器代码、17个Vue组件实现页面交互、6个JS工具函数与路由配置以及SQL建表语句、YAML配置、README说明文档等辅助文件整体压缩包仅75KB便于快速下载与本地部署。目前已有64人学习下载配套项目说明详实包含技术栈说明、环境配置步骤与目录结构解读特别适合希望夯实SpringBootVue工程实践能力、积累真实项目经验的学习者。1. 为什么书评系统不是“又一个 CRUD”SpringBoot Vue 落地时90% 的人卡在数据流断点上你拿到书评系统源码.zip解压后看到springboot-backend和vue-frontend两个文件夹以为照着 README 启动就能跑通——结果 npm run serve 报404 /api/book/reviews后端mvn spring-boot:run却没打印任何 Controller 日志。这不是环境问题是典型的数据流断点Vue 发出的请求根本没抵达 SpringBoot 的 DispatcherServlet。这个项目本质是「用户生成内容UGC轻量级闭环」读者写书评 → 系统按评分/热度排序 → 支持关键词模糊搜索 → 后台可审核敏感词。它不追求高并发但对前后端协作的细节极其敏感——比如 Vue 的 axios 默认带Content-Type: application/json而 SpringBoot 的RequestBody若没配JsonFormat(patternyyyy-MM-dd)日期字段直接 400再比如 Vue Router 的 history 模式在 SpringBoot 静态资源路径下会 404必须配WebMvcConfigurer.addViewControllers做 fallback。适合三类人Java 初学者用它练手 SpringBoot 的 RESTful 设计、MyBatis 多表关联书籍-作者-评论、JWT 登录鉴权前端转全栈者通过真实项目理解 Vue 的setup()语法糖如何与 SpringBoot 的 DTO 层对齐避免v-model绑定对象时出现undefined课程设计/毕设党项目说明文档里明确写了数据库 ER 图、接口清单共 17 个 API、部署到 Linux 的 Nginx 反向代理配置——不是玩具 demo是能交差的生产级骨架。别被“源码说明”四个字骗了——真正值钱的是那些没写在代码里的隐性约定比如BookVO和BookDTO的字段命名差异、Vue 中useRoute().params.id如何安全取值防空指针、SpringBoot 的application-dev.yml里spring.servlet.context-path/book对 Axios baseURL 的连锁影响。这些才是你 unzip 后第一小时该盯死的地方。2. 从零跑通SpringBoot 后端启动的 3 个硬门槛与 Vue 前端联调的 2 个开关2.1 后端启动前必须确认的 3 个硬门槛门槛一MySQL 表结构必须手动初始化不能靠 JPA 自动建表项目使用 MyBatis-Plus但application.yml中spring.jpa.hibernate.ddl-autonone已禁用自动建表。你必须执行sql/book_review_db.sql压缩包内提供创建库和表。重点检查review表的book_id字段是否为BIGINT UNSIGNED——若用 MySQL 8.0UNSIGNED类型在 MyBatis-Plus 的TableId(type IdType.AUTO)下会触发主键冲突解决方案是改用IdType.ASSIGN_ID并在实体类中加TableId(type IdType.ASSIGN_ID)。-- book_review_db.sql 关键片段注意 UNSIGNED CREATE TABLE review ( id bigint unsigned NOT NULL AUTO_INCREMENT, book_id bigint unsigned NOT NULL, -- 必须 unsigned否则 MyBatis-Plus 插入失败 user_name varchar(50) NOT NULL, score tinyint NOT NULL DEFAULT 0, content text, PRIMARY KEY (id), KEY idx_book_id (book_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;提示执行 SQL 前先CREATE DATABASE book_review CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;否则中文评论存入后变成??。门槛二Redis 配置不是可选而是登录态强依赖LoginController.java中JwtTokenUtil.generateToken()生成的 token 会存入 Rediskey 为token:${username}且AuthInterceptor每次请求都校验 Redis 中是否存在该 token。若application.yml中spring.redis.hostlocalhost未改为你本地 Redis 地址或 Redis 未启动会出现「登录成功但后续所有接口 401」的玄学现象。验证方法登录后立刻redis-cli KEYS token:*应看到类似token:zhangsan的 key。门槛三静态资源路径必须显式声明否则 Vue 打包后无法访问SpringBoot 默认静态资源路径是classpath:/static但本项目前端构建后输出到vue-frontend/dist需在WebConfig.java中重写Configuration public class WebConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // 关键指向 Vue 构建后的 dist 目录 registry.addResourceHandler(/**) .addResourceLocations(file:./vue-frontend/dist/); } }注意file:./vue-frontend/dist/中的file:协议和末尾斜杠——少一个都会导致index.html404。2.2 Vue 前端联调的 2 个开关axios baseURL 与 devServer proxyVue 项目根目录下的vue.config.js是联调核心它控制开发模式下的请求走向// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // SpringBoot 默认端口 changeOrigin: true, pathRewrite: { ^/api: // 把 /api/book/reviews 重写成 /book/reviews 发给后端 } } } } }这个配置意味着开发时axios.get(/api/book/reviews)实际请求http://localhost:8081/book/reviews生产打包后axios会读取public/config.json中的baseUrl默认/此时请求走 Nginx 反向代理不再经过 devServer proxy。注意pathRewrite的^/api必须带^锚定开头否则/api/v1/book和/apixxx都会被重写引发接口错乱。2.3 启动顺序与验证链三步确认数据流贯通先启后端cd springboot-backend mvn spring-boot:run观察控制台是否打印Started Application in X seconds和Mapped {[/book/reviews],methods[GET]}再启前端cd vue-frontend npm install npm run serve打开http://localhost:8080F12 查看 Network 标签页筛选 XHR确认GET /api/book/reviews返回 200 且 Response 有 JSON 数据最后验证闭环在页面提交一条书评抓包看POST /api/review请求体是否含bookId,score,content字段后端日志是否打印ReviewService.saveReview()成功信息。如果第 2 步失败90% 是devServer.proxy配置错误或后端未启动如果第 3 步失败大概率是ReviewController.java的Valid校验未通过如score超出 0-5 范围此时后端返回 400但 Vue 未做错误提示——这是下一章要解决的坑。3. 前后端数据契约DTO/VO 分层、Axios 请求拦截与响应统一处理3.1 SpringBoot 的三层数据对象为什么不能只用 Entity 传给前端项目严格区分Entity如Review.java对应数据库表含TableId,TableField注解字段名与 DB 列名一致DTO如ReviewDTO.java用于 Controller 接收前端参数含NotNull,Min(0),Max(5)校验注解字段名用camelCase如bookIdVO如ReviewVO.java用于 Controller 返回给前端含JsonFormat日期格式化且主动剔除敏感字段如ReviewVO不含userId只含userName。关键逻辑在ReviewController.javaPostMapping(/review) public ResultReviewVO saveReview(Valid RequestBody ReviewDTO dto) { ReviewVO vo reviewService.saveReview(dto); // Service 层完成 DTO → Entity → VO 转换 return Result.success(vo); }若你把ReviewEntity 直接ResponseBody返回会出现createTime字段序列化为时间戳而非2024-03-15userId整数 ID 泄露给前端可能被恶意构造请求content字段未做 XSS 过滤富文本提交后渲染时执行 JS。提示ReviewService.saveReview()内部调用BeanUtils.copyProperties(dto, entity)完成 DTO→Entity 转换再用new ReviewVO(entity)构造 VO——这种手动 new 比DataBuilder更可控避免 Lombok 的Builder在继承场景下失效。3.2 Vue 的 Axios 封装拦截器如何解决 token 自动注入与错误统一处理vue-frontend/src/utils/request.js是核心封装import axios from axios const request axios.create({ baseURL: process.env.NODE_ENV production ? /api : /api, timeout: 10000 }) // 请求拦截自动注入 token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} // 注意 Bearer 后有空格 } return config }) // 响应拦截统一处理业务错误 request.interceptors.response.use( response { // 后端 Result 结构{ code: 200, data: {}, msg: success } if (response.data.code 200) { return response.data.data // 直接返回 data 字段组件无需 .data.data } else { ElMessage.error(response.data.msg || 请求失败) throw new Error(response.data.msg) } }, error { if (error.response?.status 401) { localStorage.removeItem(token) router.push(/login) } return Promise.reject(error) } ) export default request这个封装解决了三个痛点Token 注入localStorage.getItem(token)读取的是登录后存的 JWTconfig.headers.Authorization格式必须为Bearer token少空格或大小写错误如bearer都会导致 SpringBoot 的BearerTokenAuthenticationFilter认证失败响应扁平化后端ResultReviewVO包裹了一层前端await api.getReviews()直接得到ReviewVO[]数组不用写res.data.data401 自动跳转当 token 过期后端返回 401拦截器清除本地 token 并跳转/login避免用户点击按钮后空白页。3.3 前端表单校验与后端校验的协同为什么两者缺一不可以书评提交为例前端校验ReviewForm.vue用 Element Plus 的el-formrules做实时提示el-form :modelform :rulesrules refformRef el-form-item label评分 propscore el-rate v-modelform.score :max5 / /el-form-item /el-formrules中score: [{ required: true, message: 请打分, trigger: change }]保证用户必须选择后端校验ReviewDTO.javapublic class ReviewDTO { NotNull(message 书籍ID不能为空) private Long bookId; Min(value 0, message 评分不能小于0) Max(value 5, message 评分不能大于5) private Integer score; NotBlank(message 评论内容不能为空) Length(max 500, message 评论不能超过500字) private String content; }Valid触发校验失败时BindingResult.hasErrors()返回 400并携带message字段。关键协同点前端el-rate的v-model是number类型但后端score是Integer若用户手动输入非数字如abc前端v-model会变成NaN此时axios发送score: null后端Min/Max校验因null跳过但NotNull会触发——所以score字段必须同时加NotNull和Min/Max形成双重保险。4. 避坑指南5 个让开发者凌晨三点还在 console.log 的真实翻车现场4.1 现象Vue 页面显示 “加载中…” 但 Network 无任何请求发出原因vue.config.js中devServer.proxy的target地址错误或 SpringBoot 未启动导致代理失败但 Axios 拦截器未捕获网络异常。解决先curl -I http://localhost:8081/api/book/reviews确认后端可达在request.js的响应拦截器error分支加console.error(Axios error:, error)若打印Error: Network Error说明代理未生效检查vue.config.js是否被 webpack 读取在package.json的scripts中添加dev:debug: vue-cli-service serve --mode development --no-cache强制刷新配置。4.2 现象登录成功但首页书评列表为空后端日志无 SQL 打印原因MyBatis-Plus 的Page分页插件未生效reviewService.page()返回空列表但未抛异常。解决确认MybatisPlusConfig.java中Bean的PaginationInnerInterceptor已注册在ReviewMapper.java的selectList方法上加Select(SELECT * FROM review)测试原生 SQL 是否执行若原生 SQL 有数据说明分页插件未拦截检查springboot-backend/pom.xml是否漏加artifactIdmybatis-plus-boot-starter/artifactId依赖。4.3 现象提交书评后页面提示 “操作成功”但数据库无新增记录原因Transactional事务未生效常见于 Service 方法被本类其他方法直接调用绕过 Spring AOP 代理。解决检查ReviewService.saveReview()是否被ReviewService内部其他方法调用如saveReview()调用了checkBookExists()而后者又调用了saveReview()强制使用this调用改为reviewService.saveReview()其中reviewService通过Autowired注入在saveReview()方法上加Transactional(rollbackFor Exception.class)显式声明。4.4 现象Vue 打包后部署到 SpringBoot 的dist目录访问http://localhost:8081显示白屏Console 报Failed to load resource: the server responded with a status of 404 ()原因Vue Router 的history模式需要后端支持但WebConfig.java的addResourceHandlers未配置index.htmlfallback。解决在WebConfig.java中补充Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/).setViewName(forward:/index.html); registry.addViewController(/**/{spring:\\w}).setViewName(forward:/index.html); // catch all }确保vue-frontend/vue.config.js中publicPath: ./相对路径而非/绝对路径否则打包后 CSS/JS 引用路径错误。4.5 现象搜索功能输入关键词后无结果但后端LIKE查询语句在 Navicat 中能查到原因MySQL 的utf8mb4排序规则对中文模糊匹配不敏感默认utf8mb4_general_ci会忽略拼音差异如 “编程” 和 “程序” 视为相同。解决修改review.content字段的排序规则ALTER TABLE review MODIFY content TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;在ReviewMapper.xml的LIKE查询中显式指定 collationif testkeyword ! null and keyword ! AND content COLLATE utf8mb4_unicode_ci LIKE CONCAT(%, #{keyword}, %) /if5. 进阶技巧用 Vue Composition API 重构评论列表以及 SpringBoot 多环境配置的实战拆解5.1 用setup()refonMounted重构评论列表告别 Options API 的 this 困境原始ReviewList.vue使用 Options APIdata()返回reviews: []mounted()中this.$refs.table获取 DOM——但 TypeScript 下this类型推导困难且this.reviews在异步回调中易丢失上下文。改用 Composition APIscript setup import { ref, onMounted } from vue import request from /utils/request const reviews ref([]) const loading ref(false) const fetchReviews async () { loading.value true try { reviews.value await request.get(/book/reviews) // 直接解构 data } catch (err) { console.error(获取书评失败:, err) } finally { loading.value false } } onMounted(() { fetchReviews() }) /script template el-table :datareviews v-loadingloading el-table-column propuserName label用户 / el-table-column propscore label评分 / el-table-column propcontent label评论 / /el-table /template优势ref([])显式声明响应式数组类型安全VS Code 提示reviews.value[0].userNamefetchReviews()是普通函数await后直接赋值reviews.value无this.前缀避免this指向混乱v-loadingloading绑定ref比v-loadingloadingOptions API 中data.loading更直观。5.2 SpringBoot 多环境配置dev/test/prod 的 3 个关键隔离点项目springboot-backend/src/main/resources下有application.yml、application-dev.yml、application-prod.yml实际生效取决于spring.profiles.active。三个必须隔离的点配置项devtestprod为什么必须隔离spring.datasource.urljdbc:mysql://localhost:3306/book_review?useSSLfalsejdbc:mysql://test-db:3306/book_reviewjdbc:mysql://prod-db:3306/book_review?useSSLtrue开发用本地 MySQL测试/生产用独立实例避免误删数据spring.redis.hostlocalhosttest-redisprod-redisRedis 密码、连接池参数在 prod 中必须加密dev 可明文jwt.secretdev-secret-keytest-secret-keyAES-256 加密的密钥JWT 密钥泄露等于登录态沦陷prod 必须用 KMS 或配置中心管理实战技巧在pom.xml中定义 profileprofiles profile idprod/id properties spring.profiles.activeprod/spring.profiles.active /properties /profile /profiles打包时指定环境mvn clean package -Pprod生成的 jar 包自动激活application-prod.yml血泪经验application.yml中spring.profiles.activeactivatedProperties配合 Maven Filter 替换避免硬编码——但本项目未启用 Filter所以直接在application.yml中写死dev上线时手动改这是新手最稳妥的做法。5.3 一个值得抄的技巧Vue 中用computed缓存搜索结果避免重复请求搜索框每输入一个字就发请求既浪费带宽又拖慢体验。在SearchBar.vue中script setup import { ref, computed, watch } from vue import request from /utils/request const keyword ref() const searchResults ref([]) // computed 缓存仅当 keyword 改变时重新计算 const filteredReviews computed(() { if (!keyword.value.trim()) return [] return searchResults.value.filter(item item.content.toLowerCase().includes(keyword.value.toLowerCase()) ) }) // watch 监听 keyword防抖后请求 watch(keyword, (newVal) { if (!newVal.trim()) return const timer setTimeout(() { request.get(/book/reviews?keyword${newVal}).then(data { searchResults.value data }) }, 300) // 300ms 防抖 // 组件卸载时清除定时器 onBeforeUnmount(() clearTimeout(timer)) }) /script为什么有效computed依赖keyword但只在keyword改变时执行过滤不触发新请求watch的防抖确保 300ms 内连续输入只发一次请求onBeforeUnmount清理定时器避免内存泄漏。我第一次接手这个项目时搜索功能卡顿到想砸键盘就是没加防抖。后来加了这 3 行watch代码用户输入体验直接从「卡顿」变成「丝滑」。希望帮到你。本文还有配套的精品资源点击获取