基于SpringBoot+Vue的高校学生饮食推荐系统前后端分离实战

做了这套前后端分离的高校学生饮食推荐系统前后折腾了小两个月从搭骨架到部署上线踩了不少坑今天把它完整记录下来。项目本身用的是SpringBootVueMyBatisMySQL这套非常经典的组合功能覆盖了用户登录、菜品推荐、饮食管理、评论收藏这些模块不说多复杂但用来做课程设计、毕业设计或者给刚入门前后端分离的同学当练手项目非常合适。为什么专门做“高校学生”这个场景因为学校食堂的消费规律和外卖平台差别很大档口固定、菜品种类相对稳定、学生活动范围集中在校园内而且就餐时间高度集中。这就意味着推荐系统不需要搞很重的实时计算基于用户的历史行为、口味标签和菜品热度做一套离线偏好评分效果就很明显了。这也是我为什么没有盲目上Redis或者消息队列保持架构足够简单——对一个教学型项目来说容易看懂、能跑通、能二次开发比什么都重要。1. 技术选型为什么落在这四件套上1.1 这套组合能解决什么问题先说结论SpringBootVueMyBatisMySQL是目前市面上中小型前后端分离项目最稳妥的组合没有之一。SpringBoot负责把后端服务的配置简化到极致内嵌Tomcat让部署变成“打一个jar包直接跑”Vue负责前端界面的组件化开发和前后端分离的数据交互MyBatis作为ORM框架让你手写SQL而不是被Hibernate那种全自动映射搞得一头雾水MySQL作为关系型数据库稳定、开源、资料多遇到问题随便一搜就有答案。这套架构的核心优势是职责清晰。前端只负责渲染页面、调用接口、处理用户交互后端只负责业务逻辑、数据持久化和接口安全中间通过JSON格式的数据进行通信。对新手来说出问题时你起码知道问题在前端还是后端排查效率比传统服务端渲染高得多。1.2 我对每个组件的选型思考SpringBoot选2.x版本当前主流的2.7.x系列非常稳定网上资料最多MyBatis Starter和各类第三方整合的兼容性也最好。不要一上来就追求3.xSpring Boot 3必须搭配JDK 17而且很多老项目的依赖需要重写对初学者不友好。Vue选2.x还是3.x我做的是Vue 2.6 ElementUI。说实话现在Vue 3已经是主流但如果你的课程设计时间紧、参考项目多Vue 2的资源确实更丰富。我在文末会说明如何把项目迁移到Vue 3的思路。MyBatis不选MyBatis-Plus项目里用原生MyBatis配合手写SQL和XML文件。MP确实方便但它把很多底层逻辑封装得过于彻底你很难搞清楚SQL是怎么生成的。作为教学项目手写SQL能让你真正掌握关联查询、分页、动态SQL这些基本功。MySQL用5.7还是8.0建议直接用MySQL 8.0现在Windows和Linux安装都很方便而且8.0的窗口函数、JSON支持都很强大以后做复杂统计查询不用换数据库。1.3 前后端分离的本质约定优于配置前后端分离最核心的约定就是接口文档。我在项目里把API设计成统一的RESTful风格GET /api/dish/list查询菜品、POST /api/user/login登录、PUT /api/user/update更新资料、DELETE /api/comment/delete/{id}删除评论。统一返回体设计成Result对象包含code、message、data三个字段前端拿到响应的第一件事就是判断code是不是200根本不需要每次解析一堆乱七八糟的JSON结构。2. 需求建模从食堂场景到数据库表设计2.1 高校食堂业务的四个核心域食堂场景里最核心的实体被我分成四块用户域、菜品域、行为域、推荐域。用户域很简单就是学生和管理员两类角色菜品域包含菜品基本信息、所属档口、口味标签辣、清淡、甜、咸等、价格、原材料行为域记录用户的所有操作包括浏览记录、收藏、评分和评论推荐域则负责存放推荐算法的结果比如给用户推荐的菜品列表和推荐理由。为什么一定要单拎出“行为域”因为推荐系统做得好不好取决于你拿到多少有效行为数据。刚开始系统冷启动没有用户行为推荐系统只能按热度推荐当行为积累到一定程度推荐结果就能“千人千面”了。2.2 核心表结构长什么样直接上我实际用的表结构核心部分CREATE TABLE user ( id int(11) NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL COMMENT 用户名, password varchar(100) NOT NULL COMMENT 密码BCrypt加密, nickname varchar(50) DEFAULT NULL, gender tinyint(1) DEFAULT 0 COMMENT 0未知 1男 2女, avatar varchar(255) DEFAULT NULL COMMENT 头像路径, role tinyint(1) DEFAULT 0 COMMENT 0学生 1管理员, taste_tags varchar(255) DEFAULT NULL COMMENT 口味偏好如辣,清淡, create_time datetime DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4;CREATE TABLE dish ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 菜品名, category varchar(20) DEFAULT NULL COMMENT 分类川菜、粤菜、快餐等, price decimal(10,2) DEFAULT NULL, stall_name varchar(50) DEFAULT NULL COMMENT 所属档口, image varchar(255) DEFAULT NULL, description text, tags varchar(100) DEFAULT NULL COMMENT 口味标签逗号分隔, spicy_level int(1) DEFAULT 0 COMMENT 辣度0-3, sales_count int(11) DEFAULT 0 COMMENT 销量用于热度推荐, avg_rating decimal(2,1) DEFAULT 0.0 COMMENT 平均评分, status int(1) DEFAULT 1 COMMENT 1上架 0下架, PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4;CREATE TABLE user_behavior ( id int(11) NOT NULL AUTO_INCREMENT, user_id int(11) NOT NULL, dish_id int(11) NOT NULL, behavior_type varchar(10) NOT NULL COMMENT view/collect/comment, score decimal(2,1) DEFAULT NULL COMMENT 评分值仅评分行为有, create_time datetime DEFAULT NULL, PRIMARY KEY (id), KEY idx_user_dish (user_id,dish_id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4;注意几个细节所有文本统一用utf8mb4而不是utf8这样Emoji表情和生僻字不会乱码价格用decimal而不是float餐饮场景下金额精度必须精确user_behavior表一定要建联合索引因为推荐算法要频繁按user_id behavior_type分组统计。2.3 推荐逻辑怎么落到数据库层面从MVC角度讲推荐算法是Service层的事但数据支撑必须提前在SQL层面规划好。我做推荐时用了几类查询热度推荐SELECT * FROM dish WHERE status1 AND category川菜 ORDER BY sales_count DESC, avg_rating DESC LIMIT 10协同过滤的“用户相似度”计算SELECT dish_id, COUNT(*) AS cnt, SUM(score) AS total_score FROM user_behavior WHERE user_id IN (和你口味相似的用户ID集合) GROUP BY dish_id ORDER BY total_score DESC标签匹配SELECT * FROM dish WHERE FIND_IN_SET(辣, tags) AND spicy_level 2这些都是非常简单的SQL和推荐引擎无关。真正难的是“和你口味相似的用户ID集合”怎么算这在后面推荐算法部分详细讲。3. 核心功能实现拆解3.1 登录鉴权JWT让前端后端各自安好前后端分离项目的登录不能再用Session那一套了因为浏览器跨域时Session的Cookie会被拦截即使开了CORS也要处理Credentials复杂度上去了还是小事关键是分布式环境下Session共享是个大坑。我在这套系统里用的是JWTJSON Web Token。JWT的原理不复杂用户登录成功后后端生成一串包含用户ID、角色、过期时间的加密Token返回给前端前端把它存在localStorage里每次发请求时放在Header的Authorization字段里后端写一个拦截器对需要认证的接口统一校验Token校验通过就把用户信息放进ThreadLocal。核心代码大概是这样的Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { token token.substring(7); try { Claims claims JwtUtil.parseToken(token); request.setAttribute(userId, claims.get(userId)); return true; } catch (Exception e) { response.setStatus(401); return false; } } response.setStatus(401); return false; } }注意一个细节JWT里不要放敏感信息密码、手机号不能放只放userId和role就够了因为JWT默认是Base64编码的任何人都能解码查看内容只做了签名防篡改没做内容加密。3.2 推荐引擎实战从协同过滤到混合推荐推荐算法部分我用了两种方案并行一是基于用户的协同过滤二是基于内容的标签匹配最后根据分数的比重加权求和。协同过滤的落地思路假设用户A的向量是{辣子鸡: 5, 红烧肉: 4, 清炒西兰花: 1}用户B的向量是{辣子鸡: 4, 红烧肉: 3, 可乐鸡翅: 5}。计算余弦相似度cosine similarity选出Top N个相似用户然后把这些用户喜欢的高分菜品中当前用户没吃过的菜品推荐出来。代码实现简化版public ListDish recommendByCf(Long userId, int topN) { // 1. 获取当前用户行为向量 MapLong, Double userVector behaviorMapper.getUserVector(userId); // 2. 获取所有其他用户的行为向量实际开发分批查 ListUserBehaviorStat allUsers behaviorMapper.getAllUsersBehavior(); // 3. 计算余弦相似度排序取TopN MapLong, Double similarityMap new HashMap(); for (UserBehaviorStat other : allUsers) { if (other.getUserId().equals(userId)) continue; double similarity cosineSimilarity(userVector, other.getBehaviorMap()); if (similarity 0.3) { similarityMap.put(other.getUserId(), similarity); } } // 4. 按相似度加权推荐候选菜品 MapLong, Double recommendScore new HashMap(); for (Map.EntryLong, Double entry : similarityMap.entrySet()) { // 取邻居用户的高分菜品 ListDishScore neighborDishes behaviorMapper.getDishesByUser(entry.getKey()); for (DishScore dish : neighborDishes) { if (!userVector.containsKey(dish.getDishId())) { recommendScore.merge(dish.getDishId(), dish.getScore() * entry.getValue(), Double::sum); } } } return rankAndReturn(recommendScore, topN); }冷启动问题新用户没有行为记录协同过滤直接失效。我做了个备选策略如果用户填了口味标签比如“辣”和“川菜”就按标签匹配热销菜品如果标签也没填就按全局销量和评分推荐。这样三层兜底不管什么状态都能出推荐结果。3.3 MyBatis分页插件的正确打开方式前后端分离项目的列表页分页是必然需求。SpringBootMyBatis最常用的是PageHelper分页插件用法很简单PageHelper.startPage(pageNum, pageSize, orderBy); ListDish dishes dishMapper.queryByCondition(dto); PageInfoDish pageInfo new PageInfo(dishes);一个非常重要的细节PageHelper.startPage()执行完之后紧接着必须是你想分页的那一条Mapper查询中间不能隔着别的查询或者逻辑否则PageHelper会作用到错误的SQL上。我之前在Service层先查了一个分类列表再查菜品列表结果分页作用在了分类查询上菜品根本不分页查了很久才定位到这个问题。另外一个坑是PageInfo和List不能直接转JSON给前端一定要把pageInfo.getList()拿出来放到统一返回体的data里否则前端拿到的结构是{list: [...], pageNum: 1, pageSize: 10, total: 100}嵌套结构。3.4 菜品图片上传前后端配合的完整链路图片上传是前后端分离里最容易出乱子的地方。我的做法是前端把文件POST到/api/upload接口后端把文件保存到服务器本地磁盘的/upload目录路径通过配置文件指定然后把访问URL返回给前端。保存菜品时会带上这个图片URL。后端代码如下PostMapping(/api/upload) public Result upload(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.error(文件不能为空); } String originalFilename file.getOriginalFilename(); String ext originalFilename.substring(originalFilename.lastIndexOf(.)); String newFileName UUID.randomUUID().toString().replaceAll(-, ) ext; File dest new File(uploadPath, newFileName); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } file.transferTo(dest); return Result.success(/upload/ newFileName); }同时要配置静态资源映射Configuration public class WebConfig implements WebMvcConfigurer { Value(${file.upload-path}) private String uploadPath; Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // 将本地的/upload目录映射为访问URL /upload/** String realPath Paths.get(uploadPath).toAbsolutePath().toString().replace(\\, /); registry.addResourceHandler(/upload/**) .addResourceLocations(file: realPath /); } }文件大小上限一般放在application.yml里配置两个都要设spring: servlet: multipart: max-file-size: 10MB max-request-size: 50MB不设的话SpringBoot默认是1MB上传稍微大点的图片直接报错。4. 从零到一跑通项目你的第一步部署4.1 开发环境准备清单我尽可能把环境写完整避免你在第一步就卡住组件版本要求安装要点JDK1.8配置JAVA_HOME命令行java -version验证Maven3.6配置阿里云镜像加速依赖下载Node.js14建议装14.x或16.x LTS版本Vue 2对node版本要求不高MySQL5.7 / 8.0记住root密码设置utf8mb4编码Navicat可选图形化操作也可以用命令行安装MySQL时有一个极容易踩的坑8.0版本默认使用caching_sha2_password认证方式而项目中用的连接驱动如果版本太低会报Authentication plugin caching_sha2_password cannot be loaded错误。解决办法有两个把pom.xml中的mysql-connector-java版本升到8.0.x以上或者在MySQL里执行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密码;。4.2 SpringBoot后端启动流程用IDEA打开后端项目等待Maven拉取依赖第一次会很久可以用mvn -v确认Maven没问题。修改application.yml里的数据库连接。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/canteen_recommend?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver创建数据库并导入sql脚本。用源项目附带的canteen.sql即可里面包含所有表和几组测试数据。mysql -u root -p CREATE DATABASE canteen_recommend DEFAULT CHARACTER SET utf8mb4; exit; mysql -u root -p canteen_recommend canteen.sql运行主类CanteenApplication看到Started CanteenApplication日志说明启动成功。4.3 Vue前端启动流程安装依赖cd frontend npm install如果下载缓慢或报错一定是npm源的问题。换源npm config set registry https://registry.npmmirror.com然后删除node_modules和package-lock.json重新npm install。修改API地址。项目里我封装了src/utils/request.js里面暴露了VUE_APP_BASE_API环境变量在config/dev.env.js里配置use strict module.exports { NODE_ENV: development, VUE_APP_BASE_API: /api }由于开发环境前端跑在8081端口后端跑在8080端口跨域问题此时就出现了。我采用的方法是在后端的WebConfig里加全局跨域配置registry.addMapping(/**) .allowedOriginPatterns(http://localhost:8081, http://localhost:8082) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600);有个细节allowCredentials(true)时前端Axios请求不能使用*通配符必须指定明确的源origin所以我写的都是完整的URL。启动开发服务器npm run dev浏览器访问http://localhost:8081如果看到登录页面说明前后端打通了。5. 生产部署jar包dist静态文件放在同一个服务器上5.1 后端封装jar包的几种方式和坑开发环境跑通只是第一步能给老师演示、能放到自己的云服务器上运行才是最终目标。后端部署我用的是打jar包方式比war包省事不用额外装Tomcat。mvn clean package -DskipTests打完包后在target/目录下生成canteen-server-0.0.1.jar上传至服务器执行nohup java -jar canteen-server-0.0.1.jar --server.port8080 app.log 21 还有一个常见需求不同环境数据库密码不同怎么办SpringBoot的多环境配置就派上用场了。在application.yml里通过spring.profiles.active指定环境不同环境的配置放在application-dev.yml和application-prod.yml里启动时用--spring.profiles.activeprod指定即可。生产环境我建议用环境变量注入更安全。5.2 Vue打包的配置细节前端部署相对简单但有两个致命的坑必须提前处理。第一个是publicPath。项目默认情况下执行npm run build后dist目录里引用的是绝对路径/js/app.js如果你的网站不是部署在域名根路径而是子路径比如/canteen/加载不到资源。解决办法是修改config/index.jsbuild: { // Template for index.html index: path.resolve(__dirname, ../dist/index.html), assetsRoot: path.resolve(__dirname, ../dist), // 关键改成相对路径 ./ 或者你的子路径 /canteen/ assetsPublicPath: ./ }第二个坑是刷新404。前端用的是Vue Router的history模式刷新页面时浏览器会向服务器请求/dish/detail/1这个路径服务器找不到对应资源就返回404。解决办法有两种一是改用hash模式URL上多个#不是很好看但省事二是让Nginx把所有请求都try_files到index.htmllocation / { root /home/app/dist; index index.html; try_files $uri $uri/ /index.html; }5.3 Nginx托管前端并转发API请求前后端分离部署有几种路径方案。最简单的是把后端jar包跑在8080前端dist用Nginx托管在80端口然后通过Nginx配置把/api路径的请求反向代理到后端接口。我的Nginx配置长这样server { listen 80; server_name your-server-ip; root /home/app/dist; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /upload/ { proxy_pass http://127.0.0.1:8080/upload/; } location / { try_files $uri $uri/ /index.html; } }配置好以后执行nginx -s reload通过浏览器访问服务器IP就能看到登录页。5.4 Linux服务器部署的完整命令序列这里我把从上传到启动的完整命令列出来方便直接复制操作# 1. 安装JDK sudo apt update sudo apt install openjdk-11-jdk -y java -version # 2. 安装MySQL sudo apt install mysql-server -y sudo mysql_secure_installation # 3. 安装Nginx sudo apt install nginx -y # 4. 上传后端jar包和前端dist # 用scp或宝塔面板上传至 /home/app/ # /home/app/server.jar 后端 # /home/app/dist/ 前端 # 5. 创建数据库并导入 mysql -u root -p CREATE DATABASE canteen_recommend DEFAULT CHARACTER SET utf8mb4; exit; mysql -u root -p canteen_recommend /home/app/canteen.sql # 6. 启动后端 cd /home/app nohup java -jar server.jar --spring.profiles.activeprod server.log 21 tail -f server.log # 7. 配置Nginx并重启 vim /etc/nginx/sites-available/default # 把上面给的那段配置粘贴进去 nginx -t nginx -s reload6. 我在这个项目中踩过的坑6.1 时区问题导致的时间差8小时初始时数据库时间字段插入的时间比当前时间晚了8个小时折腾了很久。原因是MySQL 8.0默认使用UTC时区而中国在东八区。解决办法是配置数据库连接URL时加上serverTimezoneAsia/Shanghai如果还不行再在MySQL执行SET GLOBAL time_zone 8:00;。6.2 MyBatis XML里!DOCTYPE报红mybatis-3-mapper.dtd这个引用标签在网上很多旧教程用的是3.5.5版本以前的URL新版本MyBatis可能会报HTTP请求失败。其实这个红线不影响运行但看着难受。我后来直接把XML头部的DTD声明保留为项目内置的本地引用即可不要写http://mybatis.org/dtd/mybatis-3-mapper.dtd这种外网引用。更有用的技巧是在MyBatis的XML配置里开启驼峰映射这样数据库字段user_name能自动映射到Java属性userName不用每张表都写一堆resultMapmybatis: configuration: map-underscore-to-camel-case: true6.3 Vue Axios请求拦截器的正确姿势前后端分离联调时最大的问题就是后端报错了前端没提示用户在页面上干等。我在request.js里封装了响应拦截器统一处理后端的错误码service.interceptors.response.use( response { const res response.data if (res.code 401) { // Token过期清理本地缓存并跳回登录页 localStorage.removeItem(token) router.push(/login) return Promise.reject(res) } if (res.code ! 200) { this.$message.error(res.message || 请求失败) return Promise.reject(res) } return res }, error { if (error.response) { switch (error.response.status) { case 401: this.$message.error(未登录或登录已失效) break case 404: this.$message.error(接口不存在) break case 500: this.$message.error(服务器错误) break } } return Promise.reject(error) } )6.4 连MySQL时SSL告警日志里有一个警告SSL connection error: The server uses the newer caching_sha2_password虽然不影响运行但我建议在连接URL上明确加上useSSLfalse不然某些版本的驱动会在连接阶段反复尝试SSL握手导致第一次请求很慢。6.5 用Maven profile区分开发和生产依赖部署时发现生产环境不需要热部署插件spring-boot-devtools但本地开发又想用。合理做法是把devtools放到maven profile的dev作用域里profiles profile iddev/id dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId scoperuntime/scope /dependency /dependencies /profile /profiles打包生产时执行mvn clean package -Pprod -DskipTests开发时IDEA默认走dev配置互不干扰。7. 这套系统还能怎么改出自己的特色很多同学做课程设计最怕的就是和室友题目撞车。这套系统的通用性很强我给你三个改造成方向推荐算法加权重把用户口味标签、历史评分、季节性因素夏天多推凉菜冬天多推热菜加权融合这是最出彩的加分项代码改动量不大但要写清楚公式。改成健康餐推荐把核心表从“菜品种类”换成“营养成分表”加入膳食均衡评价方法就是一套健康饮食推荐系统。加入管理员端的可视化报表用ECharts把菜品销量、用户活跃度、分类占比做成图表。前端组件重后端只需要提供统计接口七天就能搞定。Vue 2迁移Vue 3也很简单ElementUI换Element-Plusvue.config.js换成Vite配置生命周期钩子基本不变Axios可以直接用。如果毕业设计答辩评委问“为什么不用最新的”你就说“这个项目结构清晰Vue 3迁移成本极低展示个Vite对比尤其实用”。我个人实际把这个项目从零写到部署最花时间的不是代码而是数据库设计和对业务场景的思考。才明白推荐系统不在于算法多高级而在于把用户行为数据洗干净、把查询优化到位效果就能超过预期。这套项目的完整源码和部署文档我都整理好了包括初始化SQL脚本、前后端完整代码、部署文档、接口文档需要的可以直接按上面的步骤跑起来。如果你在部署过程中卡在哪一步了欢迎在评论区带上具体的日志信息来提问我看到会回复的。