🍳 基于spingboot+vue美食烹饪与分享平台（AI客服）

项目简介：一个基于Spring Boot + Vue.js构建的美食烹饪分享社区平台，支持菜谱发布、分类管理、论坛交流、个人中心等完整功能。

技术栈：Spring Boot + Vue.js + MySQL + Redis + Element UI

📋 项目目录

• 🎯 项目背景
• 🏗️ 系统架构
• ✨ 核心功能
• 🎨 界面展示
• 🔧 技术实现
• 📊 数据库设计
• 🚀 快速开始
• 📱 移动端适配
• 🔒 安全设计
• 📈 性能优化
• 🎯 项目总结
• 📦 源码获取

🎯 项目背景

随着人们生活水平的提高和对美食文化的追求，越来越多的人热衷于在家烹饪和分享美食。然而现有的美食平台往往功能单一，缺乏完整的社区交流功能。因此，我们开发了这个集菜谱分享、社区交流、个人展示于一体的综合性美食平台。

项目特色

• 🍽️ 菜谱分享：支持图文并茂的菜谱发布，包含详细制作步骤
• 💬 社区交流：论坛式交流，支持评论、点赞、收藏
• 🏷️ 智能分类：多级分类体系，便于内容管理和查找
• 📱 响应式设计：完美适配PC端和移动端
• 🔍 全文搜索：基于Elasticsearch的智能搜索
• 📊 数据统计：可视化数据展示和分析

🏗️ 系统架构

技术架构图

┌─────────────────────────────────────────────────────────────┐
│                        前端层                                │
├─────────────────────────────────────────────────────────────┤
│  Vue.js 2.6 + Vue Router + Vuex + Element UI + ECharts   │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                      网关/代理层                           │
├─────────────────────────────────────────────────────────────┤
│                  Nginx (反向代理/静态资源)                  │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                      后端服务层                            │
├─────────────────────────────────────────────────────────────┤
│ Spring Boot 2.7 + Spring Security + JWT + MyBatis Plus   │
│  Swagger2 + AOP + 统一异常处理 + 参数校验 + 日志记录      │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                      数据存储层                             │
├─────────────────────────────────────────────────────────────┤
│  MySQL 8.0 (主数据库) + Redis 6.0 (缓存) + ES (搜索)     │
└─────────────────────────────────────────────────────────────┘

核心依赖版本

<!-- 后端主要依赖 -->
<spring-boot.version>2.7.12</spring-boot.version>
<mybatis-plus.version>3.5.3.1</mybatis-plus.version>
<druid.version>1.2.16</druid.version>
<jwt.version>0.9.1</jwt.version>
<fastjson.version>2.0.32</fastjson.version>

// 前端主要依赖
"vue": "^2.6.14",
"vue-router": "^3.5.4",
"vuex": "^3.6.2",
"element-ui": "^2.15.13",
"axios": "^0.27.2",
"echarts": "^5.4.2"

✨ 核心功能

1. 用户管理模块

• ✅ 用户注册/登录/退出
• ✅ JWT无状态认证
• ✅ 用户信息管理
• ✅ 头像上传/修改
• ✅ 个人主页展示

2. 菜谱管理模块

• ✅ 菜谱发布（支持富文本编辑器）
• ✅ 多图片上传（支持拖拽排序）
• ✅ 菜谱分类管理
• ✅ 菜谱搜索（支持全文检索）
• ✅ 菜谱收藏/点赞/评论

3. 论坛交流模块

• ✅ 文章发布/编辑/删除
• ✅ 论坛分类管理
• ✅ 文章评论互动
• ✅ 热门文章排行
• ✅ 文章搜索筛选

4. 数据统计模块

• ✅ 用户数据统计
• ✅ 菜谱数据统计
• ✅ 分类统计图表
• ✅ 热门排行展示
• ✅ 数据导出功能

5. 系统管理模块

• ✅ 用户权限管理
• ✅ 系统配置管理
• ✅ 日志管理
• ✅ 数据备份恢复
• ✅ 系统监控

🎨 界面展示

## 🔧 技术实现

### 后端架构设计

#### 1. 分层架构

src/main/java/com/gastronomy/
├── controller/ # 控制层 - 请求处理
├── service/ # 服务层 - 业务逻辑
├── mapper/ # 数据访问层 - MyBatis接口
├── entity/ # 实体层 - 数据库实体
├── dto/ # 数据传输对象
├── config/ # 配置层 - 系统配置
├── security/ # 安全层 - JWT认证
├── utils/ # 工具类
└── exception/ # 异常处理

#### 2. 核心功能实现

**JWT认证过滤器：**
```java
@Component
public class JwtAuthenticationFilter extends OncePerRequestFilter {
    
    @Override
    protected void doFilterInternal(HttpServletRequest request, 
                                  HttpServletResponse response, 
                                  FilterChain filterChain) {
        // JWT token验证逻辑
        String token = getTokenFromRequest(request);
        
        if (StringUtils.hasText(token) && jwtUtils.validateToken(token)) {
            String username = jwtUtils.getUsernameFromToken(token);
            UserDetails userDetails = userDetailsService.loadUserByUsername(username);
            
            UsernamePasswordAuthenticationToken authentication = 
                new UsernamePasswordAuthenticationToken(userDetails, null, 
                                                      userDetails.getAuthorities());
            SecurityContextHolder.getContext().setAuthentication(authentication);
        }
        
        filterChain.doFilter(request, response);
    }
}

统一响应封装：

@Data
public class Result<T> {
    private Integer code;
    private String message;
    private T data;
    private Long timestamp;
    
    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>();
        result.setCode(200);
        result.setMessage("操作成功");
        result.setData(data);
        result.setTimestamp(System.currentTimeMillis());
        return result;
    }
    
    public static <T> Result<T> error(String message) {
        Result<T> result = new Result<>();
        result.setCode(500);
        result.setMessage(message);
        result.setTimestamp(System.currentTimeMillis());
        return result;
    }
}

前端架构设计

1. 项目结构

src/
├── api/            # API接口封装
├── assets/         # 静态资源
├── components/     # 公共组件
├── router/         # 路由配置
├── store/          # 状态管理
├── utils/          # 工具函数
├── views/          # 页面组件
└── App.vue         # 根组件

2. 核心功能实现

API请求封装：

// api/request.js
import axios from 'axios'
import { Message } from 'element-ui'
import router from '@/router'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      Message.error(res.message || '请求失败')
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    Message.error(error.message)
    return Promise.reject(error)
  }
)

export default service

权限路由控制：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@/utils/auth'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/',
    component: () => import('@/views/Layout.vue'),
    redirect: '/home',
    children: [
      {
        path: 'home',
        name: 'Home',
        component: () => import('@/views/Home.vue'),
        meta: { title: '首页' }
      },
      {
        path: 'recipe',
        name: 'Recipe',
        component: () => import('@/views/Recipe.vue'),
        meta: { title: '菜谱管理', requiresAuth: true }
      }
    ]
  }
]

// 路由守卫
router.beforeEach((to, from, next) => {
  const token = getToken()
  
  if (to.meta.requiresAuth && !token) {
    next('/login')
  } else {
    next()
  }
})

📊 数据库设计

核心数据表结构

1. 用户表 (t_user)

联系作者获取 VX：viiiizl

### 数据库优化策略

#### 1. 索引优化
```sql
-- 为常用查询字段建立索引
CREATE INDEX idx_recipe_user_category ON t_recipe(user_id, category_id);
CREATE INDEX idx_recipe_create_time ON t_recipe(create_time DESC);
CREATE INDEX idx_recipe_view_count ON t_recipe(view_count DESC);

-- 复合索引优化
CREATE INDEX idx_user_status_time ON t_user(status, create_time DESC);

2. 分表策略

-- 按时间分表存储评论数据
CREATE TABLE t_comment_202401 (
  LIKE t_comment
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='评论表_2024年01月';

🚀 快速开始

环境要求

• JDK：17+
• MySQL：8.0+
• Redis：6.0+
• Node.js：14.0+
• Maven：3.6+

后端部署

1. 克隆项目

git clone https://github.com/your-username/gastronomy-platform.git
cd gastronomy-platform/gastronomy_end

2. 数据库初始化

# 创建数据库
mysql -u root -p < gastronomy.sql

# 或者执行优化版SQL
mysql -u root -p < 123_优化版.sql

3. 配置文件修改

# application.yml
server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/gastronomy?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8
    username: root
    password: your_password
    driver-class-name: com.mysql.cj.jdbc.Driver
    
  redis:
    host: localhost
    port: 6379
    password: your_redis_password
    database: 0

  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 50MB

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      logic-delete-field: deleted
      logic-delete-value: 1
      logic-not-delete-value: 0

4. 启动项目

# 编译项目
mvn clean install

# 启动应用
mvn spring-boot:run

# 或者打包后启动
mvn clean package
java -jar target/gastronomy-1.0.0.jar

前端部署

1. 进入前端目录

cd gastronomy-platform/gastronomy_front

2. 安装依赖

npm install
# 或者使用淘宝镜像
npm install --registry=https://registry.npmmirror.com

3. 配置API接口

// public/config.js
window.globalConfig = {
  baseUrl: 'http://localhost:8080/api'
}

4. 启动开发服务器

npm run serve

5. 构建生产版本

npm run build

📱 移动端适配

响应式设计实现

/* 移动端适配样式 */
@media screen and (max-width: 768px) {
  .container {
    padding: 10px;
  }
  
  .recipe-card {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .sidebar {
    display: none;
  }
  
  .mobile-menu {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .header-title {
    font-size: 18px;
  }
  
  .recipe-image {
    height: 200px;
  }
}

移动端优化特性

• ✅ 触摸手势支持
• ✅ 图片懒加载
• ✅ 无限滚动
• ✅ 底部导航栏
• ✅ 快速返回顶部
• ✅ 省流量模式

🔒 安全设计

安全措施

1. 认证授权

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and()
            .authorizeRequests()
                .antMatchers("/api/auth/**").permitAll()
                .antMatchers("/api/admin/**").hasRole("ADMIN")
                .antMatchers("/api/user/**").hasAnyRole("USER", "ADMIN")
                .anyRequest().authenticated()
            .and()
            .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
    }
}

2. 数据加密

@Component
public class EncryptionUtils {
    
    private static final String SECRET_KEY = "your-secret-key";
    
    public String encrypt(String data) {
        // AES加密实现
        return AES.encrypt(data, SECRET_KEY);
    }
    
    public String decrypt(String encryptedData) {
        // AES解密实现
        return AES.decrypt(encryptedData, SECRET_KEY);
    }
}

3. XSS防护

@Component
public class XssFilter implements Filter {
    
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, 
                        FilterChain chain) throws IOException, ServletException {
        
        XssHttpServletRequestWrapper xssRequest = 
            new XssHttpServletRequestWrapper((HttpServletRequest) request);
        chain.doFilter(xssRequest, response);
    }
}

4. SQL注入防护

• 使用MyBatis Plus内置的SQL注入防护
• 参数化查询
• 输入验证和过滤
• 数据库权限最小化

📈 性能优化

优化策略

1. 数据库优化

-- 慢查询优化
EXPLAIN SELECT * FROM t_recipe WHERE category_id = 1 ORDER BY create_time DESC;

-- 索引优化
CREATE INDEX idx_recipe_category_time ON t_recipe(category_id, create_time DESC);

-- 查询优化
SELECT r.*, u.nickname, u.avatar 
FROM t_recipe r 
LEFT JOIN t_user u ON r.user_id = u.id 
WHERE r.status = 1 
ORDER BY r.create_time DESC 
LIMIT 20;

2. 缓存策略

@Service
public class RecipeService {
    
    @Autowired
    private RedisTemplate<String, Object> redisTemplate;
    
    @Cacheable(value = "recipes", key = "#id")
    public Recipe getRecipeById(Long id) {
        return recipeMapper.selectById(id);
    }
    
    @CacheEvict(value = "recipes", key = "#recipe.id")
    public void updateRecipe(Recipe recipe) {
        recipeMapper.updateById(recipe);
    }
}

3. 前端优化

// 路由懒加载
const RecipeDetail = () => import('@/views/RecipeDetail.vue')
const UserProfile = () => import('@/views/UserProfile.vue')

// 组件懒加载
Vue.component('ChartComponent', () => import('@/components/ChartComponent.vue'))

// 图片懒加载
Vue.use(VueLazyload, {
  loading: require('@/assets/loading.gif'),
  error: require('@/assets/error.png')
})

4. 接口优化

@RestController
@RequestMapping("/api/recipe")
public class RecipeController {
    
    @GetMapping("/page")
    @ResponseBody
    public Result<PageResult<RecipeVO>> getRecipePage(
            @RequestParam(defaultValue = "1") Integer pageNo,
            @RequestParam(defaultValue = "10") Integer pageSize,
            @RequestParam(required = false) String category,
            @RequestParam(required = false) String keyword) {
        
        PageResult<RecipeVO> result = recipeService.getRecipePage(pageNo, pageSize, category, keyword);
        return Result.success(result);
    }
}

🎯 项目总结

项目亮点

1. 技术亮点

• 🚀 前后端分离：采用主流的前后端分离架构，提升开发效率
• 🔒 安全认证：JWT无状态认证，支持分布式部署
• 📊 数据可视化：ECharts图表展示，数据一目了然
• 🎯 响应式设计：完美适配PC端和移动端
• ⚡ 性能优化：多级缓存、懒加载、代码分割

2. 业务亮点

• 🍽️ 菜谱分享：支持富文本编辑和多图片上传
• 💬 社区交流：论坛式互动，促进用户交流
• 🏷️ 智能分类：多级分类体系，便于内容管理
• 🔍 全文搜索：基于Elasticsearch的智能搜索
• 📱 移动优先：专为移动端优化的用户体验

3. 创新特色

• 🤖 AI推荐：基于用户行为的智能推荐算法
• 📸 图片识别：自动识别菜品和食材
• 🎨 个性化定制：支持主题切换和个性化设置
• 🌐 多语言支持：支持中英文切换
• 📈 数据分析：用户行为分析和数据挖掘

项目收获

技术能力提升

• 掌握了Spring Boot + Vue.js全栈开发技术
• 学会了前后端分离项目的架构设计
• 熟悉了MySQL数据库设计和优化
• 了解了Redis缓存的应用场景
• 掌握了JWT认证和Spring Security安全框架

业务理解深化

• 深入理解了美食分享平台的业务需求
• 学会了用户体验设计和界面优化
• 了解了社区运营的商业模式
• 掌握了数据分析和用户行为分析
• 熟悉了移动端适配和响应式设计

未来展望

功能扩展计划

• 🎥 视频菜谱：支持视频教学和直播功能
• 🛒 电商集成：一键购买食材和厨具
• 👥 社交功能：好友系统和私信功能
• 📊 大数据：用户画像和精准营销

技术升级方向

• 🚀 微服务架构：服务拆分和容器化部署
• 🔄 实时通信：WebSocket实时消息推送
• ☁️ 云服务：阿里云/腾讯云部署
• 🔐 区块链：食品安全溯源和版权保护
• 🧠 深度学习：菜品识别和口味分析

---

后续更新

• 📝 技术博客：定期分享项目开发心得
• 🎥 视频教程：B站发布项目实战视频
• 📚 开源项目：持续更新更多优质项目
• 💡 技术交流：欢迎加入技术交流群

感谢您的支持和关注！ 🙏

---

最后更新：2025年10月

作者：Hello