SpringBoot+Vue美食分享平台开发实践

1. 项目概述与核心价值

作为一个长期混迹在美食圈和程序员圈的双料爱好者，我一直在寻找将两个爱好结合的机会。去年用SpringBoot+Vue+MySQL搭建的这个美食分享平台，算是我对"代码烹饪"的一次实践。这个平台本质上是一个垂直领域的社交应用，核心解决三个问题：

1. 让普通用户能像发朋友圈一样分享美食（但更专业）
2. 构建美食爱好者之间的互动网络（关注/点赞/收藏）
3. 通过算法实现个性化推荐（类似小红书的美食版）

技术选型上，后端采用SpringBoot 2.7 + MyBatis Plus的组合，前端用Vue3 + Element Plus，数据库是MySQL 8.0。这套技术栈的选择基于以下考量：

• SpringBoot的自动配置和起步依赖能快速搭建RESTful API
• MyBatis Plus的ActiveRecord模式简化了数据库操作
• Vue3的Composition API更适合复杂交互场景
• Element Plus提供了现成的UI组件加速开发

提示：实际开发中发现，Element Plus的Upload组件需要特别处理跨域问题，建议在后端配置CORS过滤器而非在前端代理

2. 系统架构设计解析

2.1 前后端分离架构

采用经典的前后端分离模式，通过JSON进行数据交互。这种架构的优势在于：

• 前后端可以并行开发（前端Mock数据）
• 更清晰的职责划分（后端专注业务逻辑，前端专注交互）
• 便于后期扩展（如开发小程序只需复用API）

接口设计遵循RESTful规范，但做了适度灵活调整。例如美食列表接口：

java复制@GetMapping("/foods")
public Result<List<FoodVO>> getFoodList(
    @RequestParam(required = false) Integer page,
    @RequestParam(required = false) Integer size,
    @RequestParam(required = false) String keyword) {
    // 分页查询逻辑
}

2.2 数据库设计要点

核心表包括：

• 用户表（user）：openid、昵称、头像等
• 美食表（food）：标题、描述、图片URL集合
• 评论表（comment）：内容、关联food_id
• 收藏表（favorite）：user_id与food_id的关联

特别注意的点：

1. 图片存储采用阿里云OSS，数据库中只存URL
2. 使用逻辑删除而非物理删除（is_deleted字段）
3. 为高频查询字段建立索引（如food表的user_id）

3. 核心功能实现细节

3.1 图片上传与处理

图片上传是美食平台的核心功能，实现方案：

java复制@PostMapping("/upload")
public Result<List<String>> uploadImages(
    @RequestParam("files") MultipartFile[] files) {
    List<String> urls = new ArrayList<>();
    for (MultipartFile file : files) {
        // 1. 校验文件类型（仅允许jpg/png）
        // 2. 压缩图片（使用Thumbnails库）
        // 3. 上传到OSS
        urls.add(ossClient.upload(compressedImage));
    }
    return Result.success(urls);
}

踩坑记录：

• 前端需要限制单张图片大小（建议≤2MB）
• 后端必须做二次校验防止绕过前端限制
• 缩略图生成时要注意保持宽高比

3.2 个性化推荐算法

采用混合推荐策略：

1. 基于内容的推荐：分析用户历史浏览记录
2. 协同过滤：找到相似口味偏好的用户
3. 热度加权：热门内容适当提升曝光

SQL示例：

sql复制SELECT f.* FROM food f
LEFT JOIN user_behavior ub ON f.id = ub.food_id
WHERE ub.user_id IN (
    SELECT similar_user_id FROM user_similarity 
    WHERE user_id = #{currentUserId}
)
ORDER BY (f.like_count*0.3 + f.view_count*0.1) DESC
LIMIT 10

4. 性能优化实践

4.1 缓存策略设计

采用多级缓存架构：

1. 本地缓存（Caffeine）：高频访问的基础数据
2. Redis缓存：
   • 热点数据（如首页推荐）
   • 分布式锁（防止重复提交）
3. MySQL查询缓存

缓存更新策略：

• 写操作后主动失效相关缓存
• 设置合理的TTL（如用户信息缓存1小时）
• 使用@Cacheable注解简化实现

4.2 数据库优化

1. 索引优化：为所有外键和搜索条件字段建索引
2. 查询优化：
   • 避免SELECT *
   • 复杂查询使用@Transactional(readOnly=true)
3. 连接池配置：

   yaml复制spring:
     datasource:
       hikari:
         maximum-pool-size: 20
         connection-timeout: 30000
   

code复制
## 5. 安全防护方案

### 5.1 认证与授权

采用JWT + Spring Security方案：
```java
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()));
    }
}

关键安全措施：

• 密码加密存储（BCryptPasswordEncoder）
• 接口防刷（Redis记录请求频率）
• XSS防护（Jackson转义HTML标签）

5.2 敏感数据保护

1. 数据库脱敏：
   • 手机号只显示前3后4位
   • 邮箱替换部分字符为*
2. 日志过滤：

   java复制@Bean
   public FilterRegistrationBean<LogFilter> logFilter() {
       FilterRegistrationBean<LogFilter> registration = new FilterRegistrationBean<>();
       registration.setFilter(new LogFilter());
       registration.addUrlPatterns("/*");
       return registration;
   }
   

6. 部署与监控

6.1 容器化部署

使用Docker Compose编排服务：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
  redis:
    image: redis:6
  backend:
    build: ./backend
    ports:
      - "8080:8080"

6.2 监控方案

1. Spring Boot Actuator暴露健康检查
2. Prometheus + Grafana监控：
   • JVM内存使用
   • 接口响应时间
   • 数据库连接池状态
3. ELK日志收集系统

7. 典型问题排查实录

7.1 图片上传失败

现象：前端报413 Request Entity Too Large
解决：

1. Nginx配置调整：

   nginx复制client_max_body_size 20M;
   

2. SpringBoot配置：

   yaml复制spring:
     servlet:
       multipart:
         max-file-size: 10MB
         max-request-size: 20MB
   

7.2 慢查询问题

通过EXPLAIN分析发现未走索引：

sql复制-- 优化前
SELECT * FROM food WHERE title LIKE '%火锅%';

-- 优化后
SELECT * FROM food WHERE title LIKE '火锅%'
CREATE INDEX idx_title ON food(title);

8. 项目演进方向

1. 社交功能增强：
   • 私信系统
   • 美食圈子/话题
2. 商业化探索：
   • 电商模块（厨具食材）
   • 商家入驻
3. 技术升级：
   • 引入Kafka处理高并发写入
   • 试用GraphQL替代部分RESTful接口

这个项目从技术角度看不算复杂，但完整走完设计、开发、上线的全流程后，最大的体会是：业务逻辑的严谨性比技术炫技更重要。比如最初设计的评论功能没有考虑删除场景，导致后来不得不做数据迁移。建议大家在设计阶段多画状态转换图，把各种边界情况考虑清楚。