简介基于Spring Boot与Vue.js的图书个性化推荐系统完整源码定位为可供直接使用的高分毕业设计项目面向计算机相关专业正在准备毕设的学生以及需要项目实战练习的开发者同时适用于课程设计、期末大作业等场景。项目采用前后端分离架构前端由Vue实现页面交互后端由Spring Boot提供接口服务全部代码均经过严格调试并验证可用整体可直接导入运行。压缩包共769个文件大小约14.67MB主要包含Java后端源码、Vue组件、JavaScript逻辑、CSS样式、HTML页面、XML配置以及SVG、PNG、GIF等界面素材还配有安装与启动脚本、Bak备份文件和Maven构建配置便于快速部署、运行与二次开发。从文件结构看后台管理页面组件、密码修改页面、面包屑导航等模块均已覆盖并附带说明文档可辅助理解整个项目的模块划分、调用关系与二次开发思路。目前已有206人学习便于快速理解、复现并在此基础上做功能扩展。1. 图书个性化推荐Spring Boot 后端与 Vue 前端的项目边界答辩时最躲不开的问题往往不是「系统有哪些页面」而是「你的推荐到底怎么算的」。这份图书个性化推荐系统源码把 Spring Boot 后端、Vue 前端和基于协同过滤的推荐逻辑串成了一条完整链路用户在前端页面给图书打分、收藏后端拿到行为数据后计算相似用户把「和你口味相近的人还在读的书」推回页面。工程里能看到IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak这类 vue-element-admin 的组件备份说明前端是从成熟后台模板改造的页面结构完整适合直接当毕设提交也可以拆出来当课程设计或 Spring Boot 全栈练手项目。对正在做毕设的学生来说跑通只是起点能讲清楚 UserCF 为什么选它、相似度怎么算、Top-N 怎么调才是 98 分和 80 分的差别所在。2. 后端Spring Boot 推荐引擎的表结构、相似度计算与 API 设计推荐系统在后端做的事本质上就是把「用户-图书-评分」三类数据读出来算相似度再排序取前 N 本。下面先说清楚表结构与选取理由再给出一版可直接落地的 UserCF 核心实现最后说明这些能力如何通过 REST API 暴露给前端。2.1 数据表设计用户、图书、评分三张核心表从源码的文件结构推断项目是典型的单体应用数据库用 MySQL后端通过 MyBatis 或 JPA 访问。推荐系统最少需要三张表user、book、rating。其中rating表是整个推荐算法的数据源头user_id和book_id必须建立联合唯一索引防止同一用户对同一本书重复打分导致相似度计算失真。CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE book ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(200) NOT NULL, author VARCHAR(100), category VARCHAR(50), cover_url VARCHAR(255), avg_score DECIMAL(3, 2) DEFAULT 0.00 ); CREATE TABLE rating ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, book_id INT NOT NULL, score TINYINT NOT NULL COMMENT 1-5分, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_user_book (user_id, book_id) );score用TINYINT而不是INT是因为推荐场景下评分范围固定为 1~5占用空间更小也避免应用层传入非法分值。book.avg_score可以在每次插入评分时用UPDATE book SET avg_score (SELECT AVG(score) FROM rating WHERE book_id ?)同步也可以定时离线计算。在毕设答辩时主动说明「平均分是冗余字段为的是避免每次列表页都做聚合查询」会比单纯说「我建了三张表」更有说服力。2.2 基于用户的协同过滤 UserCF 核心实现UserCF 的思路是找到与当前用户行为最相似的一批用户把这些用户喜欢过、而当前用户没读过的书按加权得分排序。选它而不是 ItemCF是因为图书的消费频次低、用户口味稳定性强用户相似比物品相似更有解释力——「和你读同一类书的人」比「这本书和你看过的书相似」在答辩时更容易讲清楚。核心实现可以简化为四个步骤读取目标用户的评分记录、计算与其他用户的相似度、过滤已读图书、加权排序取 Top-N。投到实际工程里一般会写成一个RecommendServiceService public class RecommendServiceImpl implements RecommendService { private final RatingMapper ratingMapper; private final BookMapper bookMapper; public RecommendServiceImpl(RatingMapper ratingMapper, BookMapper bookMapper) { this.ratingMapper ratingMapper; this.bookMapper bookMapper; } Override public ListBook recommend(Integer userId, Integer topN, Double simThreshold) { // 1. 目标用户的评分表 MapInteger, Double targetRatings ratingMapper.selectByUserId(userId) .stream().collect(Collectors.toMap(Rating::getBookId, Rating::getScore)); if (targetRatings.isEmpty()) { return bookMapper.selectHotBooks(topN); // 冷启动兜底 } // 2. 取出所有其他用户的评分逐个计算皮尔逊相似度 ListSimilarUser neighbors new ArrayList(); for (MapInteger, Double other : ratingMapper.selectAllUserRatings()) { double sim pearsonSimilarity(targetRatings, other); if (sim simThreshold) { neighbors.add(new SimilarUser(extractUserId(other), sim)); } } // 3. 邻居的评分按相似度加权作为候选图书得分 MapInteger, Double candidateScores new HashMap(); for (SimilarUser neighbor : neighbors) { ListRating neighborRatings ratingMapper.selectByUserId(neighbor.userId); for (Rating r : neighborRatings) { if (targetRatings.containsKey(r.getBookId())) continue; // 过滤已读 candidateScores.merge(r.getBookId(), neighbor.similarity * r.getScore(), Double::sum); } } // 4. 排序取前 N 本 return candidateScores.entrySet().stream() .sorted(Map.Entry.Integer, DoublecomparingByValue().reversed()) .limit(topN) .map(e - bookMapper.selectById(e.getKey())) .collect(Collectors.toList()); } }这段代码把推荐流程拆成了四个清晰阶段参数topN和simThreshold从接口传入方便后续调参。其中皮尔逊相似度的实现是精度重点不能只算向量内积因为每个用户打分的松紧尺度不同有人给高分起步有人只会打 2-3 分。先把各自评分减去均值再做点积才能衡量「相对偏好」的一致性。private double pearsonSimilarity(MapInteger, Double a, MapInteger, Double b) { // 只取两者都评过分的图书 ListInteger common a.keySet().stream() .filter(b::containsKey).collect(Collectors.toList()); if (common.size() 2) return 0.0; // 共同评分数太少相似度不可信 double avgA a.values().stream().mapToDouble(Double::doubleValue).average().orElse(0.0); double avgB b.values().stream().mapToDouble(Double::doubleValue).average().orElse(0.0); double numerator 0, denomA 0, denomB 0; for (Integer bookId : common) { double da a.get(bookId) - avgA; double db b.get(bookId) - avgB; numerator da * db; denomA da * da; denomB db * db; } return numerator / (Math.sqrt(denomA) * Math.sqrt(denomB)); }common.size() 2这个判断容易被忽略但它是相似度可信度的底线只共同评过一本书的两个用户算出的皮尔逊系数一定是 1.0会误导推荐。阈值取 2 是工程上最常见的做法。分母为零时用户所有打分完全相同返回 0避免计算出 NaN。这两处边界处理在答辩演示时主动讲出来会让评委认为你不是照抄代码。2.3 REST API 设计与推荐参数暴露推荐能力通过 Spring Boot 的 Controller 暴露给前端。接口路径和参数需要同时考虑前端调用方便和后续调优所以我一般把topN、simThreshold都作为查询参数而不是硬编码在 Service 里。这样换一组参数测试推荐效果时不需要改代码重启。RestController RequestMapping(/api/recommend) public class RecommendController { private final RecommendService recommendService; public RecommendController(RecommendService recommendService) { this.recommendService recommendService; } GetMapping(/{userId}) public ResultListBook recommend(PathVariable Integer userId, RequestParam(defaultValue 10) Integer topN, RequestParam(defaultValue 0.3) Double simThreshold) { ListBook books recommendService.recommend(userId, topN, simThreshold); return Result.success(books); } }ResultT是统一响应封装里面包含code、message、data三个字段。RequestParam(defaultValue 10)意味着前端不传topN时后端默认给 10 本书这与前端「猜你喜欢」列表每页展示 10 条的设定是对齐的。推荐接口写好后可以用 Postman 直接验证GET /api/recommend/1?topN10simThreshold0.3观察返回的图书列表是否排除了已读评分过的书。到这里后端这条链路的表结构、算法实现、接口就闭环了。需要特别提醒的是如果使用 IDEA 创建 springboot 项目并导入这份源码要注意mvnw.cmd和pom.xml里的 Java 版本声明Spring Boot 2.x 对 JDK 8 兼容最好升级到 17 时容易出现反射相关的警告。3. 前端Vue 组件的路由、状态与推荐结果渲染前端部分从文件清单能看出明显的 vue-element-admin 血统IndexAsideStatic.vue是静态侧边栏组件、BreadCrumbs.vue是面包屑、IndexHeader.vue是顶栏。这些.bak备份文件说明项目在模板基础上做过大量改动而改动最大的一块就是用推荐页替换掉了原本的示例列表页。下面沿着「路由注册 → 接口请求 → 组件渲染」这条线把前端数据流拆开。3.1 vue-element-admin 骨架与前端路由注册打开前端的src/router/index.js推荐页面需要作为独立路由挂到主布局下。vue-element-admin 使用动态路由和静态路由结合的方式像推荐页这种登录后可见的页面通常注册在constantRoutes中保证刷新后依然能定位到// src/router/index.js import Layout from /layout const constantRoutes [ { path: /recommend, component: Layout, redirect: /recommend/index, children: [ { path: index, name: BookRecommend, component: () import(/views/recommend/index.vue), meta: { title: 图书推荐, icon: el-icon-reading, activeMenu: /recommend/index } } ] } ]component: () import(...)是路由懒加载打包后推荐页会单独拆成一个 chunk首屏只加载当前路由需要的 JS。meta.title会被BreadCrumbs.vue和IndexHeader.vue读取并渲染为面包屑和标签页标题所以这里的中文名不要随便写用户实际看到的就是它。如果你的路由路径包含查询参数比如从图书详情页「查看相似推荐」跳过来vue 路由参数要用this.$route.query接收这属于组件内部的跳转逻辑和静态路由注册不冲突。3.2 axios 请求封装与推荐接口对接前端调用后端接口一般不会直接axios.get而是先封装一层request。vue-element-admin 自带基于 axios 的封装里面统一处理了baseURL、超时时间和 401 跳转。推荐模块的 API 文件通常单独放一个api/recommend.js// src/api/recommend.js import request from /utils/request export function getRecommendBooks(userId, params) { return request({ url: /api/recommend/ userId, method: get, params: { topN: params.topN, simThreshold: params.simThreshold }, timeout: 5000 }) }timeout: 5000是必须加的因为推荐计算在数据量大的时候可能超过默认的 10 秒但如果后端长时间不返回前端不能无限等。params对象里的topN和simThreshold与后端RequestParam一一对应前端改动这两个值就能在页面上切换推荐结果的条数和相似度门槛不需要动后端代码。封装好 API 之后在推荐页面的mounted钩子里调用并渲染。这里有一个常见的坑用户刚登录时vuex里的用户信息还没加载完this.$store.state.user.id可能是undefined所以要先判空再请求// src/views/recommend/index.vue export default { data() { return { bookList: [], loading: false, topN: 10, simThreshold: 0.3 } }, mounted() { this.fetchRecommend() }, methods: { async fetchRecommend() { const userId this.$store.getters.userId if (userId undefined) { this.$message.warning(用户信息加载中请稍后重试) return } this.loading true try { const { data } await getRecommendBooks(userId, { topN: this.topN, simThreshold: this.simThreshold }) this.bookList data } finally { this.loading false } } } }这个组件里的loading状态必须与el-table或卡片列表的v-loading绑定否则接口慢的时候用户会以为页面卡死。try...finally保证即使请求失败也能把 loading 关掉这是前端健壮性的基本要求。3.3 推荐结果卡片渲染与评分布局拿到bookList后页面渲染可以放在一个GridCard风格的容器中。文件清单里的app.296817e3.css是打包产物中的样式文件正式开发时样式直接写在组件style scoped里即可。推荐卡片除了展示书名、作者、封面还会暴露一个五角星评分组件用户点选后把评分push到rating表为下一次推荐提供数据。template div classrecommend-grid el-card v-forbook in bookList :keybook.id classbook-card img :srcbook.coverUrl :altbook.title classbook-cover errorhandleCoverError / div classbook-title{{ book.title }}/div div classbook-author{{ book.author }}/div el-rate v-modelbook.userScore :max5 changesubmitRating(book)/el-rate /el-card /div /templatev-modelbook.userScore直接把评分结果绑定到当前图书对象上change触发评分提交。errorhandleCoverError用于封面图 404 时替换为本地的默认占位图这在本地开发时几乎必现——很多书的封面 URL 是外链内网跑不通图片就会裂。如果图片用的是后端静态资源路径你要检查WebMvcConfig里是否配置了/uploads/**的静态资源映射否则前端会收到 404。至此从路由注册到接口调用再到渲染和评分回写前端的数据闭环就通了。前端开发者在接手这种 Spring Boot 项目时最需要容忍的是字段命名差异后端返回coverUrl前端请求体里写cover_url就匹配不上。遇到这种问题不要急着熬夜找 bug先打开浏览器 Network 面板看接口返回的 JSON 字段名再对照组件里的字段引用是最快的排查路径。4. 本地部署从 1-install.bat 到 2-run.bat 的运行链路与排错项目根目录下的1-install.bat和2-run.bat是作者留给使用者的免命令入口。两个脚本把前后端安装和启动串成了「双击即用」但对不熟悉这套工程的人来说脚本背后发生了什么、报错时看哪里才是真正决定能否顺利跑起来的关键。4.1 依赖安装阶段npm install 与 Maven 构建1-install.bat的逻辑通常分两段先在前端目录执行npm install安装 Vue 依赖再在后端目录用 Maven 编译打包最常见的写法是echo off echo [1/2] 安装前端依赖... cd /d %~dp0frontend call npm install --registryhttps://registry.npmmirror.com echo [2/2] 编译后端模块... cd /d %~dp0backend call mvnw.cmd clean package -DskipTests -q echo 安装完成请双击 2-run.bat pause--registry指定的是 npm 镜像源如果脚本里没写这一行而你本地的 npm 默认源访问很慢安装会卡在node-sass或electron这类二进制包的下载上。mvnw.cmd是 Maven Wrapper它会读取项目根目录的.mvn/wrapper/maven-wrapper.properties自动下载对应版本的 Maven。这也解释了为什么文件清单里有mvnw.cmd而没有全局安装要求——它的存在就是为了让没有配 Maven 环境变量的机器也能构建。如果npm install失败先看报错是在resolving阶段还是reify阶段。前者通常换镜像源可解后者多数是 node 版本太高导致依赖不兼容vue-element-admin 这类老项目对 Node 14/16 最友好Node 18 装旧依赖会有大量ERESOLVE报错这时npm install --legacy-peer-deps可以绕过依赖冲突检查。4.2 后端启动、数据库初始化与 springboot 配置核对2-run.bat的作用是同时拉起后端和前端两个进程典型实现是各开一个窗口echo off start springboot-backend /D %~dp0backend cmd /k mvnw.cmd spring-boot:run start vue-frontend /D %~dp0frontend cmd /k npm run dev后端启动最常卡在数据库连接上。项目里的application.yml默认配置的是本机 MySQL你要确认三件事MySQL 服务已启动、数据库library已创建、username和password与本地一致。如果连接报错优先看spring.datasource.url里的serverTimezoneAsia/Shanghai是否配置——使用 MySQL 8 的驱动时没有时区参数会直接拒绝连接。前端npm run dev启动后默认监听localhost:9527后端 Spring Boot 项目默认监听8080。前端调用后端接口需要解决跨域vue-element-admin 的vue.config.js里通常已经配置好了 devServer 代理// vue.config.js module.exports { devServer: { port: 9527, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }changeOrigin: true会把请求头里的Host改为localhost:8080后端的 CORS 过滤器就不会拦截同源请求。如果你的接口路径不是/api开头代理规则就匹配不上前端会一直请求http://localhost:9527/api/...然后报 404这是最容易被忽略的配置点。4.3 常见报错对照端口占用、版本冲突与打包布局异常毕设演示现场最容易翻车的就是环境问题。这里把常见的几类报错按症状、原因、解决方案整理成表方便在答辩前逐项自检症状可能原因快速处理8080端口被占用之前启动的后端进程未关闭netstat -ano | findstr 8080查到 PIDtaskkill /PID 进程号 /Fmvnw.cmd执行报错JAVA_HOME 未配置或指向 JDK 11确认java -versionSpring Boot 2.7 建议 JDK 8 或 11前端请求接口返回 404代理路径没匹配上或后端路由前缀不一致查看浏览器 Network 请求 URL检查/api前缀Redis 连接超时项目引入了 Redis 但本机没启动若无缓存强需求可临时注释redis依赖和配置Vue 打包后布局异常history 路由模式下刷新页面 404 或样式错乱在后端加forward转发到index.html或改用hash模式数据库中文乱码MySQL 字符集不是 utf8mb4建库时指定CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ciVue 打包后布局异常是线上部署独有的坑npm run build产出的dist放入 Spring Boot 的static目录后刷新/recommend页面会 404原因是前端路由用的是 history 模式后端不认识这个路径。解决方式是在后端加一个转发Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{spring:[a-zA-Z0-9-_]}) .setViewName(forward:/index.html); registry.addViewController(/**/{spring:[a-zA-Z0-9-_]}) .setViewName(forward:/index.html); } }这两条视图控制器的意思是凡是后端没有显式映射的路径一律交给index.html处理由前端路由接管。但要留意这个配置会把静态资源请求也转发掉所以 CSS/JS/图片应该放在/static或/assets这类带前缀的路径下避免被前一条规则拦截。5. 效果调优Top-N、相似度阈值与冷启动的处理技巧推荐系统上线后评委或导师问的最多的就是「效果怎么样」。这个项目没有真实用户行为数据所以调优的核心是让「少数几条测试数据也能产生合理结果」并且能把每一步调整的依据讲清楚。Top-N 的N值不是越大越好。图书推荐列表在页面上超过 20 本就会出现明显滚动成本后端计算候选集时N 过大还会把相似度很低的邻居产生的噪声也带进来。我一般会把默认topN设为 10对应首页推荐位同时在接口里保留一个topN20的参数用于比对。相似度阈值simThreshold的默认值 0.3 是经验值皮尔逊相关系数在只有 2-3 本共同评分时很容易虚高阈值调高到 0.5 后推荐结果会变少但相关性更强如果页面出现「推荐为空」多半是阈值设太高了。冷启动是这套系统最明显的短板这也是答辩时最容易被追问的点。新用户rating表里没有记录targetRatings为空代码直接调用了bookMapper.selectHotBooks(topN)兜底——这就是「热门榜推荐」逻辑。热门榜的计算不能简单按评分数量排因为新书永远没机会上榜我会用(avg_score 评论数权重)做个综合热度分SELECT id, title, author, avg_score * 0.7 LOG(comment_count 1) * 1.5 AS hot_score FROM book ORDER BY hot_score DESC LIMIT #{topN}LOG(comment_count 1)用对数压缩评论量级避免《三体》这种评论数破万的书永远垄断榜首。avg_score * 0.7保证质量分占大头这套公式里两个权重系数可以调演示时手动改一下参数再展示榜单变化说服力远大于口述。最后给你一个可操作的验证技巧手动构造两三个用户的评分数据在纸上算出期望推荐结果再对比接口返回。比如用户 A 给《深入理解计算机系统》《CSAPP》打 5 分用户 B 给这两本打 4 分并额外给《计算机网络自顶向下方法》打 5 分那么 A 的推荐列表里应当包含《计算机网络》且排位靠前。如果接口没有返回它检查pearsonSimilarity里common.size()是否等于 2、阈值是否筛掉了 B或者rating表是否出现了重复评分记录。把这套「人工样本 → 预期结果 → 接口对比」的验证流程跑通比写一万字设计说明都更能证明系统是可信的。本文还有配套的精品资源点击获取 Spring Boot图书推荐系统：协同过滤UserCF算法与Vue全栈实战解析
简介基于Spring Boot与Vue.js的图书个性化推荐系统完整源码定位为可供直接使用的高分毕业设计项目面向计算机相关专业正在准备毕设的学生以及需要项目实战练习的开发者同时适用于课程设计、期末大作业等场景。项目采用前后端分离架构前端由Vue实现页面交互后端由Spring Boot提供接口服务全部代码均经过严格调试并验证可用整体可直接导入运行。压缩包共769个文件大小约14.67MB主要包含Java后端源码、Vue组件、JavaScript逻辑、CSS样式、HTML页面、XML配置以及SVG、PNG、GIF等界面素材还配有安装与启动脚本、Bak备份文件和Maven构建配置便于快速部署、运行与二次开发。从文件结构看后台管理页面组件、密码修改页面、面包屑导航等模块均已覆盖并附带说明文档可辅助理解整个项目的模块划分、调用关系与二次开发思路。目前已有206人学习便于快速理解、复现并在此基础上做功能扩展。1. 图书个性化推荐Spring Boot 后端与 Vue 前端的项目边界答辩时最躲不开的问题往往不是「系统有哪些页面」而是「你的推荐到底怎么算的」。这份图书个性化推荐系统源码把 Spring Boot 后端、Vue 前端和基于协同过滤的推荐逻辑串成了一条完整链路用户在前端页面给图书打分、收藏后端拿到行为数据后计算相似用户把「和你口味相近的人还在读的书」推回页面。工程里能看到IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak这类 vue-element-admin 的组件备份说明前端是从成熟后台模板改造的页面结构完整适合直接当毕设提交也可以拆出来当课程设计或 Spring Boot 全栈练手项目。对正在做毕设的学生来说跑通只是起点能讲清楚 UserCF 为什么选它、相似度怎么算、Top-N 怎么调才是 98 分和 80 分的差别所在。2. 后端Spring Boot 推荐引擎的表结构、相似度计算与 API 设计推荐系统在后端做的事本质上就是把「用户-图书-评分」三类数据读出来算相似度再排序取前 N 本。下面先说清楚表结构与选取理由再给出一版可直接落地的 UserCF 核心实现最后说明这些能力如何通过 REST API 暴露给前端。2.1 数据表设计用户、图书、评分三张核心表从源码的文件结构推断项目是典型的单体应用数据库用 MySQL后端通过 MyBatis 或 JPA 访问。推荐系统最少需要三张表user、book、rating。其中rating表是整个推荐算法的数据源头user_id和book_id必须建立联合唯一索引防止同一用户对同一本书重复打分导致相似度计算失真。CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE book ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(200) NOT NULL, author VARCHAR(100), category VARCHAR(50), cover_url VARCHAR(255), avg_score DECIMAL(3, 2) DEFAULT 0.00 ); CREATE TABLE rating ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, book_id INT NOT NULL, score TINYINT NOT NULL COMMENT 1-5分, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_user_book (user_id, book_id) );score用TINYINT而不是INT是因为推荐场景下评分范围固定为 1~5占用空间更小也避免应用层传入非法分值。book.avg_score可以在每次插入评分时用UPDATE book SET avg_score (SELECT AVG(score) FROM rating WHERE book_id ?)同步也可以定时离线计算。在毕设答辩时主动说明「平均分是冗余字段为的是避免每次列表页都做聚合查询」会比单纯说「我建了三张表」更有说服力。2.2 基于用户的协同过滤 UserCF 核心实现UserCF 的思路是找到与当前用户行为最相似的一批用户把这些用户喜欢过、而当前用户没读过的书按加权得分排序。选它而不是 ItemCF是因为图书的消费频次低、用户口味稳定性强用户相似比物品相似更有解释力——「和你读同一类书的人」比「这本书和你看过的书相似」在答辩时更容易讲清楚。核心实现可以简化为四个步骤读取目标用户的评分记录、计算与其他用户的相似度、过滤已读图书、加权排序取 Top-N。投到实际工程里一般会写成一个RecommendServiceService public class RecommendServiceImpl implements RecommendService { private final RatingMapper ratingMapper; private final BookMapper bookMapper; public RecommendServiceImpl(RatingMapper ratingMapper, BookMapper bookMapper) { this.ratingMapper ratingMapper; this.bookMapper bookMapper; } Override public ListBook recommend(Integer userId, Integer topN, Double simThreshold) { // 1. 目标用户的评分表 MapInteger, Double targetRatings ratingMapper.selectByUserId(userId) .stream().collect(Collectors.toMap(Rating::getBookId, Rating::getScore)); if (targetRatings.isEmpty()) { return bookMapper.selectHotBooks(topN); // 冷启动兜底 } // 2. 取出所有其他用户的评分逐个计算皮尔逊相似度 ListSimilarUser neighbors new ArrayList(); for (MapInteger, Double other : ratingMapper.selectAllUserRatings()) { double sim pearsonSimilarity(targetRatings, other); if (sim simThreshold) { neighbors.add(new SimilarUser(extractUserId(other), sim)); } } // 3. 邻居的评分按相似度加权作为候选图书得分 MapInteger, Double candidateScores new HashMap(); for (SimilarUser neighbor : neighbors) { ListRating neighborRatings ratingMapper.selectByUserId(neighbor.userId); for (Rating r : neighborRatings) { if (targetRatings.containsKey(r.getBookId())) continue; // 过滤已读 candidateScores.merge(r.getBookId(), neighbor.similarity * r.getScore(), Double::sum); } } // 4. 排序取前 N 本 return candidateScores.entrySet().stream() .sorted(Map.Entry.Integer, DoublecomparingByValue().reversed()) .limit(topN) .map(e - bookMapper.selectById(e.getKey())) .collect(Collectors.toList()); } }这段代码把推荐流程拆成了四个清晰阶段参数topN和simThreshold从接口传入方便后续调参。其中皮尔逊相似度的实现是精度重点不能只算向量内积因为每个用户打分的松紧尺度不同有人给高分起步有人只会打 2-3 分。先把各自评分减去均值再做点积才能衡量「相对偏好」的一致性。private double pearsonSimilarity(MapInteger, Double a, MapInteger, Double b) { // 只取两者都评过分的图书 ListInteger common a.keySet().stream() .filter(b::containsKey).collect(Collectors.toList()); if (common.size() 2) return 0.0; // 共同评分数太少相似度不可信 double avgA a.values().stream().mapToDouble(Double::doubleValue).average().orElse(0.0); double avgB b.values().stream().mapToDouble(Double::doubleValue).average().orElse(0.0); double numerator 0, denomA 0, denomB 0; for (Integer bookId : common) { double da a.get(bookId) - avgA; double db b.get(bookId) - avgB; numerator da * db; denomA da * da; denomB db * db; } return numerator / (Math.sqrt(denomA) * Math.sqrt(denomB)); }common.size() 2这个判断容易被忽略但它是相似度可信度的底线只共同评过一本书的两个用户算出的皮尔逊系数一定是 1.0会误导推荐。阈值取 2 是工程上最常见的做法。分母为零时用户所有打分完全相同返回 0避免计算出 NaN。这两处边界处理在答辩演示时主动讲出来会让评委认为你不是照抄代码。2.3 REST API 设计与推荐参数暴露推荐能力通过 Spring Boot 的 Controller 暴露给前端。接口路径和参数需要同时考虑前端调用方便和后续调优所以我一般把topN、simThreshold都作为查询参数而不是硬编码在 Service 里。这样换一组参数测试推荐效果时不需要改代码重启。RestController RequestMapping(/api/recommend) public class RecommendController { private final RecommendService recommendService; public RecommendController(RecommendService recommendService) { this.recommendService recommendService; } GetMapping(/{userId}) public ResultListBook recommend(PathVariable Integer userId, RequestParam(defaultValue 10) Integer topN, RequestParam(defaultValue 0.3) Double simThreshold) { ListBook books recommendService.recommend(userId, topN, simThreshold); return Result.success(books); } }ResultT是统一响应封装里面包含code、message、data三个字段。RequestParam(defaultValue 10)意味着前端不传topN时后端默认给 10 本书这与前端「猜你喜欢」列表每页展示 10 条的设定是对齐的。推荐接口写好后可以用 Postman 直接验证GET /api/recommend/1?topN10simThreshold0.3观察返回的图书列表是否排除了已读评分过的书。到这里后端这条链路的表结构、算法实现、接口就闭环了。需要特别提醒的是如果使用 IDEA 创建 springboot 项目并导入这份源码要注意mvnw.cmd和pom.xml里的 Java 版本声明Spring Boot 2.x 对 JDK 8 兼容最好升级到 17 时容易出现反射相关的警告。3. 前端Vue 组件的路由、状态与推荐结果渲染前端部分从文件清单能看出明显的 vue-element-admin 血统IndexAsideStatic.vue是静态侧边栏组件、BreadCrumbs.vue是面包屑、IndexHeader.vue是顶栏。这些.bak备份文件说明项目在模板基础上做过大量改动而改动最大的一块就是用推荐页替换掉了原本的示例列表页。下面沿着「路由注册 → 接口请求 → 组件渲染」这条线把前端数据流拆开。3.1 vue-element-admin 骨架与前端路由注册打开前端的src/router/index.js推荐页面需要作为独立路由挂到主布局下。vue-element-admin 使用动态路由和静态路由结合的方式像推荐页这种登录后可见的页面通常注册在constantRoutes中保证刷新后依然能定位到// src/router/index.js import Layout from /layout const constantRoutes [ { path: /recommend, component: Layout, redirect: /recommend/index, children: [ { path: index, name: BookRecommend, component: () import(/views/recommend/index.vue), meta: { title: 图书推荐, icon: el-icon-reading, activeMenu: /recommend/index } } ] } ]component: () import(...)是路由懒加载打包后推荐页会单独拆成一个 chunk首屏只加载当前路由需要的 JS。meta.title会被BreadCrumbs.vue和IndexHeader.vue读取并渲染为面包屑和标签页标题所以这里的中文名不要随便写用户实际看到的就是它。如果你的路由路径包含查询参数比如从图书详情页「查看相似推荐」跳过来vue 路由参数要用this.$route.query接收这属于组件内部的跳转逻辑和静态路由注册不冲突。3.2 axios 请求封装与推荐接口对接前端调用后端接口一般不会直接axios.get而是先封装一层request。vue-element-admin 自带基于 axios 的封装里面统一处理了baseURL、超时时间和 401 跳转。推荐模块的 API 文件通常单独放一个api/recommend.js// src/api/recommend.js import request from /utils/request export function getRecommendBooks(userId, params) { return request({ url: /api/recommend/ userId, method: get, params: { topN: params.topN, simThreshold: params.simThreshold }, timeout: 5000 }) }timeout: 5000是必须加的因为推荐计算在数据量大的时候可能超过默认的 10 秒但如果后端长时间不返回前端不能无限等。params对象里的topN和simThreshold与后端RequestParam一一对应前端改动这两个值就能在页面上切换推荐结果的条数和相似度门槛不需要动后端代码。封装好 API 之后在推荐页面的mounted钩子里调用并渲染。这里有一个常见的坑用户刚登录时vuex里的用户信息还没加载完this.$store.state.user.id可能是undefined所以要先判空再请求// src/views/recommend/index.vue export default { data() { return { bookList: [], loading: false, topN: 10, simThreshold: 0.3 } }, mounted() { this.fetchRecommend() }, methods: { async fetchRecommend() { const userId this.$store.getters.userId if (userId undefined) { this.$message.warning(用户信息加载中请稍后重试) return } this.loading true try { const { data } await getRecommendBooks(userId, { topN: this.topN, simThreshold: this.simThreshold }) this.bookList data } finally { this.loading false } } } }这个组件里的loading状态必须与el-table或卡片列表的v-loading绑定否则接口慢的时候用户会以为页面卡死。try...finally保证即使请求失败也能把 loading 关掉这是前端健壮性的基本要求。3.3 推荐结果卡片渲染与评分布局拿到bookList后页面渲染可以放在一个GridCard风格的容器中。文件清单里的app.296817e3.css是打包产物中的样式文件正式开发时样式直接写在组件style scoped里即可。推荐卡片除了展示书名、作者、封面还会暴露一个五角星评分组件用户点选后把评分push到rating表为下一次推荐提供数据。template div classrecommend-grid el-card v-forbook in bookList :keybook.id classbook-card img :srcbook.coverUrl :altbook.title classbook-cover errorhandleCoverError / div classbook-title{{ book.title }}/div div classbook-author{{ book.author }}/div el-rate v-modelbook.userScore :max5 changesubmitRating(book)/el-rate /el-card /div /templatev-modelbook.userScore直接把评分结果绑定到当前图书对象上change触发评分提交。errorhandleCoverError用于封面图 404 时替换为本地的默认占位图这在本地开发时几乎必现——很多书的封面 URL 是外链内网跑不通图片就会裂。如果图片用的是后端静态资源路径你要检查WebMvcConfig里是否配置了/uploads/**的静态资源映射否则前端会收到 404。至此从路由注册到接口调用再到渲染和评分回写前端的数据闭环就通了。前端开发者在接手这种 Spring Boot 项目时最需要容忍的是字段命名差异后端返回coverUrl前端请求体里写cover_url就匹配不上。遇到这种问题不要急着熬夜找 bug先打开浏览器 Network 面板看接口返回的 JSON 字段名再对照组件里的字段引用是最快的排查路径。4. 本地部署从 1-install.bat 到 2-run.bat 的运行链路与排错项目根目录下的1-install.bat和2-run.bat是作者留给使用者的免命令入口。两个脚本把前后端安装和启动串成了「双击即用」但对不熟悉这套工程的人来说脚本背后发生了什么、报错时看哪里才是真正决定能否顺利跑起来的关键。4.1 依赖安装阶段npm install 与 Maven 构建1-install.bat的逻辑通常分两段先在前端目录执行npm install安装 Vue 依赖再在后端目录用 Maven 编译打包最常见的写法是echo off echo [1/2] 安装前端依赖... cd /d %~dp0frontend call npm install --registryhttps://registry.npmmirror.com echo [2/2] 编译后端模块... cd /d %~dp0backend call mvnw.cmd clean package -DskipTests -q echo 安装完成请双击 2-run.bat pause--registry指定的是 npm 镜像源如果脚本里没写这一行而你本地的 npm 默认源访问很慢安装会卡在node-sass或electron这类二进制包的下载上。mvnw.cmd是 Maven Wrapper它会读取项目根目录的.mvn/wrapper/maven-wrapper.properties自动下载对应版本的 Maven。这也解释了为什么文件清单里有mvnw.cmd而没有全局安装要求——它的存在就是为了让没有配 Maven 环境变量的机器也能构建。如果npm install失败先看报错是在resolving阶段还是reify阶段。前者通常换镜像源可解后者多数是 node 版本太高导致依赖不兼容vue-element-admin 这类老项目对 Node 14/16 最友好Node 18 装旧依赖会有大量ERESOLVE报错这时npm install --legacy-peer-deps可以绕过依赖冲突检查。4.2 后端启动、数据库初始化与 springboot 配置核对2-run.bat的作用是同时拉起后端和前端两个进程典型实现是各开一个窗口echo off start springboot-backend /D %~dp0backend cmd /k mvnw.cmd spring-boot:run start vue-frontend /D %~dp0frontend cmd /k npm run dev后端启动最常卡在数据库连接上。项目里的application.yml默认配置的是本机 MySQL你要确认三件事MySQL 服务已启动、数据库library已创建、username和password与本地一致。如果连接报错优先看spring.datasource.url里的serverTimezoneAsia/Shanghai是否配置——使用 MySQL 8 的驱动时没有时区参数会直接拒绝连接。前端npm run dev启动后默认监听localhost:9527后端 Spring Boot 项目默认监听8080。前端调用后端接口需要解决跨域vue-element-admin 的vue.config.js里通常已经配置好了 devServer 代理// vue.config.js module.exports { devServer: { port: 9527, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }changeOrigin: true会把请求头里的Host改为localhost:8080后端的 CORS 过滤器就不会拦截同源请求。如果你的接口路径不是/api开头代理规则就匹配不上前端会一直请求http://localhost:9527/api/...然后报 404这是最容易被忽略的配置点。4.3 常见报错对照端口占用、版本冲突与打包布局异常毕设演示现场最容易翻车的就是环境问题。这里把常见的几类报错按症状、原因、解决方案整理成表方便在答辩前逐项自检症状可能原因快速处理8080端口被占用之前启动的后端进程未关闭netstat -ano | findstr 8080查到 PIDtaskkill /PID 进程号 /Fmvnw.cmd执行报错JAVA_HOME 未配置或指向 JDK 11确认java -versionSpring Boot 2.7 建议 JDK 8 或 11前端请求接口返回 404代理路径没匹配上或后端路由前缀不一致查看浏览器 Network 请求 URL检查/api前缀Redis 连接超时项目引入了 Redis 但本机没启动若无缓存强需求可临时注释redis依赖和配置Vue 打包后布局异常history 路由模式下刷新页面 404 或样式错乱在后端加forward转发到index.html或改用hash模式数据库中文乱码MySQL 字符集不是 utf8mb4建库时指定CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ciVue 打包后布局异常是线上部署独有的坑npm run build产出的dist放入 Spring Boot 的static目录后刷新/recommend页面会 404原因是前端路由用的是 history 模式后端不认识这个路径。解决方式是在后端加一个转发Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{spring:[a-zA-Z0-9-_]}) .setViewName(forward:/index.html); registry.addViewController(/**/{spring:[a-zA-Z0-9-_]}) .setViewName(forward:/index.html); } }这两条视图控制器的意思是凡是后端没有显式映射的路径一律交给index.html处理由前端路由接管。但要留意这个配置会把静态资源请求也转发掉所以 CSS/JS/图片应该放在/static或/assets这类带前缀的路径下避免被前一条规则拦截。5. 效果调优Top-N、相似度阈值与冷启动的处理技巧推荐系统上线后评委或导师问的最多的就是「效果怎么样」。这个项目没有真实用户行为数据所以调优的核心是让「少数几条测试数据也能产生合理结果」并且能把每一步调整的依据讲清楚。Top-N 的N值不是越大越好。图书推荐列表在页面上超过 20 本就会出现明显滚动成本后端计算候选集时N 过大还会把相似度很低的邻居产生的噪声也带进来。我一般会把默认topN设为 10对应首页推荐位同时在接口里保留一个topN20的参数用于比对。相似度阈值simThreshold的默认值 0.3 是经验值皮尔逊相关系数在只有 2-3 本共同评分时很容易虚高阈值调高到 0.5 后推荐结果会变少但相关性更强如果页面出现「推荐为空」多半是阈值设太高了。冷启动是这套系统最明显的短板这也是答辩时最容易被追问的点。新用户rating表里没有记录targetRatings为空代码直接调用了bookMapper.selectHotBooks(topN)兜底——这就是「热门榜推荐」逻辑。热门榜的计算不能简单按评分数量排因为新书永远没机会上榜我会用(avg_score 评论数权重)做个综合热度分SELECT id, title, author, avg_score * 0.7 LOG(comment_count 1) * 1.5 AS hot_score FROM book ORDER BY hot_score DESC LIMIT #{topN}LOG(comment_count 1)用对数压缩评论量级避免《三体》这种评论数破万的书永远垄断榜首。avg_score * 0.7保证质量分占大头这套公式里两个权重系数可以调演示时手动改一下参数再展示榜单变化说服力远大于口述。最后给你一个可操作的验证技巧手动构造两三个用户的评分数据在纸上算出期望推荐结果再对比接口返回。比如用户 A 给《深入理解计算机系统》《CSAPP》打 5 分用户 B 给这两本打 4 分并额外给《计算机网络自顶向下方法》打 5 分那么 A 的推荐列表里应当包含《计算机网络》且排位靠前。如果接口没有返回它检查pearsonSimilarity里common.size()是否等于 2、阈值是否筛掉了 B或者rating表是否出现了重复评分记录。把这套「人工样本 → 预期结果 → 接口对比」的验证流程跑通比写一万字设计说明都更能证明系统是可信的。本文还有配套的精品资源点击获取 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
