温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目背景与意义随着互联网和移动设备的普及越来越多的人希望通过网络获取美食灵感、学习烹饪技巧。传统的菜谱书籍和网站往往内容静态、交互性差难以满足用户分享与交流的需求。本项目基于 Spring Boot 和 Vue3 构建一个菜谱分享网站旨在为用户提供一个便捷、友好的平台让每一位美食爱好者都能发布自己的菜谱、浏览他人的作品并通过点赞、评论等功能进行互动。该网站不仅是一个菜谱展示平台更是一个美食社区。通过用户生成内容UGC的模式平台可以持续积累丰富的菜谱资源形成良性循环。对于开发者而言本项目也是一个综合性的实战项目涵盖了前后端分离开发、RESTful API 设计、数据库设计、文件上传、权限认证等多项关键技术。2. 技术选型与架构设计本项目采用前后端分离的架构模式前端使用 Vue3 框架后端使用 Spring Boot 框架两者通过 RESTful API 进行数据交互。这种架构使得前后端职责清晰便于团队协作和独立部署。2.1 后端技术栈Spring Boot作为后端基础框架提供快速构建、自动配置等能力。Spring Security JWT用于用户认证与授权保障接口安全。MyBatis-Plus作为 ORM 框架简化数据库操作。MySQL存储用户、菜谱、评论等核心业务数据。Redis用于缓存热点数据如菜谱详情、用户会话等。MinIO / 阿里云 OSS用于存储用户上传的菜谱图片。2.2 前端技术栈Vue3采用组合式 APIComposition API进行开发。Vite作为构建工具提供快速的开发体验。Vue Router实现前端路由管理。Pinia进行全局状态管理。Element PlusUI 组件库提供丰富的界面组件。Axios用于发起 HTTP 请求。2.3 系统架构图flowchart TD A[浏览器 Vue3 前端] --|HTTP / RESTful API| B[Nginx 反向代理] B -- C[Spring Boot 后端服务] C -- D[(MySQL 数据库)] C -- E[(Redis 缓存)] C -- F[MinIO 对象存储] C -- G[第三方接口 如短信服务]3. 数据库设计合理的数据库设计是系统稳定运行的基础。本项目主要包含用户表、菜谱表、分类表、评论表、点赞表等核心数据表。3.1 用户表user字段名类型说明idbigint主键自增usernamevarchar(50)用户名唯一passwordvarchar(100)加密后的密码nicknamevarchar(50)昵称avatarvarchar(255)头像 URLcreate_timedatetime注册时间3.2 菜谱表recipe字段名类型说明idbigint主键自增user_idbigint发布用户 IDcategory_idbigint所属分类 IDtitlevarchar(100)菜谱标题cover_imagevarchar(255)封面图 URLdescriptiontext菜谱简介ingredientstext食材清单JSON 格式stepstext制作步骤JSON 格式view_countint浏览量like_countint点赞数create_timedatetime发布时间3.3 评论表comment字段名类型说明idbigint主键自增recipe_idbigint所属菜谱 IDuser_idbigint评论用户 IDcontentvarchar(500)评论内容create_timedatetime评论时间4. 后端核心功能实现后端采用分层架构包括 Controller 层、Service 层、Mapper 层。下面以用户登录和菜谱发布两个核心功能为例进行说明。4.1 用户认证与 JWT 登录用户登录成功后后端生成 JWT Token 返回给前端。前端在后续请求中携带该 Token后端通过 Spring Security 过滤器进行校验。RestController RequestMapping(/api/auth) public class AuthController { Autowired private UserService userService; Autowired private JwtUtil jwtUtil; PostMapping(/login) public Resultlt;Stringgt; login(RequestBody LoginDTO dto) { User user userService.login(dto.getUsername(), dto.getPassword()); String token jwtUtil.generateToken(user.getId(), user.getUsername()); return Result.success(token); } PostMapping(/register) public Resultlt;Voidgt; register(RequestBody RegisterDTO dto) { userService.register(dto); return Result.success(); } }4.2 菜谱发布接口菜谱发布涉及图片上传和菜谱信息保存。图片先上传至对象存储返回 URL 后再保存菜谱记录。RestController RequestMapping(/api/recipe) public class RecipeController { Autowired private RecipeService recipeService; PostMapping public Resultlt;Longgt; create(RequestBody RecipeDTO dto, RequestAttribute(userId) Long userId) { Long recipeId recipeService.createRecipe(dto, userId); return Result.success(recipeId); } GetMapping(/{id}) public Resultlt;RecipeVOgt; detail(PathVariable Long id) { return Result.success(recipeService.getRecipeDetail(id)); } GetMapping(/list) public Resultlt;PageResultlt;RecipeVOgt;gt; list(RequestParam int page, RequestParam int size) { return Result.success(recipeService.pageRecipes(page, size)); } }5. 前端核心功能实现前端使用 Vue3 组合式 API 开发通过 Axios 与后端交互。下面展示菜谱列表页和菜谱详情页的核心代码。5.1 菜谱列表页script setup import { ref, onMounted } from vue import { getRecipeList } from /api/recipe import RecipeCard from /components/RecipeCard.vue const recipeList ref([]) const loading ref(false) const loadRecipes async () { loading.value true try { const res await getRecipeList({ page: 1, size: 12 }) recipeList.value res.data.records } finally { loading.value false } } onMounted(loadRecipes) /script template div classrecipe-list el-row :gutter20 el-col :span6 v-foritem in recipeList :keyitem.id RecipeCard :recipeitem / /el-col /el-row /div /template5.2 菜谱详情页script setup import { ref, onMounted } from vue import { useRoute } from vue-router import { getRecipeDetail } from /api/recipe const route useRoute() const recipe ref(null) onMounted(async () { const res await getRecipeDetail(route.params.id) recipe.value res.data }) /script template div v-ifrecipe classrecipe-detail h2{{ recipe.title }}/h2 img :srcrecipe.coverImage alt封面 / p{{ recipe.description }}/p h3食材清单/h3 ul li v-foritem in recipe.ingredients :keyitem.name {{ item.name }}{{ item.amount }} /li /ul h3制作步骤/h3 ol li v-for(step, index) in recipe.steps :keyindex{{ step }}/li /ol /div /template6. 系统功能演示与测试系统开发完成后需要进行全面的功能测试。主要测试内容包括用户注册登录、菜谱发布与浏览、评论互动、图片上传等核心流程。通过 Postman 对后端接口进行自动化测试确保接口返回数据正确、状态码符合预期。前端页面通过浏览器进行人工测试重点验证页面交互流畅性、响应式布局适配以及异常场景的友好提示。例如未登录用户点击「发布菜谱」时应跳转至登录页上传非图片格式文件时应给出错误提示。7. 项目部署与上线项目采用前后端分离部署方式。前端构建后的静态文件由 Nginx 托管后端 Spring Boot 应用打包为 JAR 文件运行。数据库使用 MySQL缓存使用 Redis图片存储在 MinIO 中。# 后端打包 mvn clean package -DskipTests 启动后端服务 java -jar target/recipe-server.jar --spring.profiles.activeprod 前端构建 npm run build Nginx 配置示例 server { listen 80; server_name recipe.example.com; location / { root /var/www/recipe-front; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }8. 总结与展望本项目基于 Spring Boot 和 Vue3 成功构建了一个功能完整的菜谱分享网站实现了用户注册登录、菜谱发布与浏览、分类检索、评论点赞等核心功能。通过前后端分离的开发模式提升了开发效率和系统可维护性。未来可以从以下几个方面进行优化和扩展一是引入推荐算法根据用户的浏览和点赞行为推荐个性化菜谱二是增加社交功能支持用户关注、私信等互动方式三是优化移动端体验开发小程序版本四是引入视频教程丰富菜谱展示形式。