基于SpringBoot+Vue技术的菜谱交流平台的设计与实现-程序员充电站

基于Spring Boot + Vue技术的菜谱交流平台的设计与实现

引言

菜谱交流平台是一个典型的社交与内容分享应用，旨在让用户分享、学习和讨论各种菜谱，促进厨艺爱好者之间的互动。该平台采用前后端分离架构，后端使用Spring Boot（高效、微服务友好），前端使用Vue 3（响应式、组件化开发）。数据库选用MySQL，支持用户注册、菜谱上传、评论交流、搜索推荐等功能。根据2025-2026年的开发实践，这种架构已成为中小型Web应用的首选，能快速迭代并支持移动端适配。

平台的核心目标：

用户友好：简单注册、上传菜谱、互动评论。
安全性：JWT认证、XSS防护。
扩展性：支持图片/视频上传、AI推荐（可选扩展）。

系统架构设计

整体架构

前后端分离：后端提供RESTful API，前端通过Axios调用。
后端：Spring Boot 3.x + MyBatis-Plus（ORM） + Spring Security（认证） + Redis（缓存/会话）。
前端：Vue 3 + Vue Router（路由） + Element Plus（UI组件） + Pinia（状态管理）。
数据库：MySQL 8.x，表设计包括用户表、菜谱表、评论表等。
部署：后端Jar包/Docker，前端Nginx静态部署，支持云服务器（如阿里云/腾讯云）。

架构图示意（文本描述）：

用户浏览器 (Vue App) --> API 调用 (Axios) --> Spring Boot Server (RESTful API) | v MySQL (数据持久化) + Redis (缓存/会话)

数据库设计（核心表结构）

使用MySQL，设计了以下关键表（基于常见实践）：

用户表 (users)：
菜谱表 (recipes)：
评论表 (comments)：
食材分类表 (ingredients_categories)：用于分类管理（如蔬菜、海鲜）。

ER关系：用户一对多菜谱，菜谱一对多评论。

后端实现（Spring Boot部分）

后端使用Spring Boot搭建，核心依赖包括：

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33</version></dependency><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.12.3</version></dependency><!-- Redis、文件上传等依赖 --></dependencies>

关键模块

用户模块：注册/登录/个人信息管理。

Controller示例（UserController.java）：

@RestController@RequestMapping("/api/user")publicclassUserController{@AutowiredprivateUserServiceuserService;@PostMapping("/register")publicResponseEntity<String>register(@RequestBodyUseruser){// 密码加密 (BCryptPasswordEncoder)userService.save(user);returnResponseEntity.ok("注册成功");}@PostMapping("/login")publicResponseEntity<String>login(@RequestBodyLoginRequestreq){// 验证密码，生成JWTStringtoken=jwtUtil.generateToken(req.getUsername());returnResponseEntity.ok(token);}}

菜谱模块：上传/浏览/搜索。

Service示例（RecipeService.java，使用MyBatis-Plus）：

@ServicepublicclassRecipeServiceextendsServiceImpl<RecipeMapper,Recipe>{publicPage<Recipe>searchRecipes(Stringkeyword,intpage,intsize){QueryWrapper<Recipe>wrapper=newQueryWrapper<>();wrapper.like("title",keyword);returnpage(newPage<>(page,size),wrapper);}}

评论模块：添加/删除评论。
- 类似上述，使用MyBatis-Plus CRUD。

文件上传：使用MultipartFile，支持图片/视频上传到OSS或本地。

示例：

@PostMapping("/upload")publicStringuploadFile(@RequestParam("file")MultipartFilefile){// 保存到本地或云存储，返回URLreturn"http://example.com/image.jpg";}

认证：Spring Security + JWT过滤器，拦截API请求验证Token。

前端实现（Vue部分）

前端使用Vue 3 + Element Plus，项目结构：

src/ ├── components/ # 公共组件，如RecipeCard.vue ├── views/ # 页面，如Home.vue, RecipeDetail.vue ├── router/ # 路由配置 ├── store/ # Pinia状态管理 └── App.vue

关键页面

首页：菜谱列表 + 搜索。

Home.vue示例：

<template> <el-input v-model="keyword" placeholder="搜索菜谱" /> <el-button @click="search">搜索</el-button> <el-row :gutter="20"> <el-col :span="8" v-for="recipe in recipes" :key="recipe.id"> <el-card> <img :src="recipe.imageUrl" /> <h3>{{ recipe.title }}</h3> </el-card> </el-col> </el-row> </template> <script setup> import { ref } from 'vue' import api from '@/api' const keyword = ref('') const recipes = ref([]) const search = async () => { const { data } = await api.get('/api/recipes', { params: { keyword: keyword.value } }) recipes.value = data } </script>

菜谱详情页：显示步骤、食材、评论。
- 使用v-for渲染列表，el-comment组件处理评论。
上传菜谱页：表单 + 文件上传。
- 使用el-upload组件。
认证：使用localStorage存储Token，Axios拦截器添加Authorization header。

API调用（api.js，使用Axios）

importaxiosfrom'axios'constapi=axios.create({baseURL:'/api',headers:{'Content-Type':'application/json'}})// 拦截器添加Tokenapi.interceptors.request.use(config=>{consttoken=localStorage.getItem('token')if(token)config.headers.Authorization=`Bearer${token}`returnconfig})exportdefaultapi