基于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)：
• id (bigint, 主键)
• username (varchar, 唯一)
• password (varchar, 加密存储)
• email (varchar)
• avatar (varchar, 头像URL)
• create_time (datetime)
• 菜谱表 (recipes)：
• id (bigint, 主键)
• user_id (bigint, 外键)
• title (varchar)
• description (text)
• ingredients (text, JSON格式)
• steps (text, JSON数组)
• image_url (varchar)
• views (int)
• create_time (datetime)
• 评论表 (comments)：
• id (bigint, 主键)
• recipe_id (bigint, 外键)
• user_id (bigint, 外键)
• content (text)
• create_time (datetime)
• 食材分类表 (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>

关键模块

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

• Controller示例（UserController.java）： @RestController @RequestMapping("/api/user") public class UserController { @Autowired private UserService userService; @PostMapping("/register") public ResponseEntity<String> register(@RequestBody User user) { // 密码加密 (BCryptPasswordEncoder) userService.save(user); return ResponseEntity.ok("注册成功"); } @PostMapping("/login") public ResponseEntity<String> login(@RequestBody LoginRequest req) { // 验证密码，生成JWT String token = jwtUtil.generateToken(req.getUsername()); return ResponseEntity.ok(token); } }

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

• Service示例（RecipeService.java，使用MyBatis-Plus）：
  java @Service public class RecipeService extends ServiceImpl<RecipeMapper, Recipe> { public Page<Recipe> searchRecipes(String keyword, int page, int size) { QueryWrapper<Recipe> wrapper = new QueryWrapper<>(); wrapper.like("title", keyword); return page(new Page<>(page, size), wrapper); } }

1. 评论模块：添加/删除评论。

• 类似上述，使用MyBatis-Plus CRUD。

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

• 示例：
  java @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { // 保存到本地或云存储，返回URL return "http://example.com/image.jpg"; }

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

前端实现（Vue部分）

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

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

关键页面

1. 首页：菜谱列表 + 搜索。

• 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>

1. 菜谱详情页：显示步骤、食材、评论。

• 使用v-for渲染列表，el-comment组件处理评论。

1. 上传菜谱页：表单 + 文件上传。

• 使用el-upload组件。

1. 认证：使用localStorage存储Token，Axios拦截器添加Authorization header。

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

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  headers: { 'Content-Type': 'application/json' }
})

// 拦截器添加Token
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

export default api

功能扩展与优化

• 搜索推荐：集成Elasticsearch或MySQL全文搜索。
• AI助手：集成ChatGPT-like API，提供菜谱生成。
• 社区交流：添加WebSocket实时评论。
• 性能优化：后端缓存（Redis），前端懒加载。
• 安全：后端输入校验（Validator），前端XSS过滤。

部署与测试

• 部署：后端打包Jar，部署到服务器；前端build后用Nginx代理。
• 测试：单元测试（JUnit + Vue Test Utils），集成测试（Postman）。
• 开源参考：GitHub上有类似项目，如“基于SpringBoot的美食社区平台”（包含源码+数据库）。

这个平台的设计与实现结合了现代Web开发最佳实践，适合作为毕业设计或实际项目。如果你需要完整源码、数据库脚本或特定模块的详细代码，欢迎提供更多细节！