SpringBoot+Vue3+MyBatis美食社区全栈开发实践-代码聚汇网

SpringBoot+Vue3+MyBatis美食社区全栈开发实践

张浩驰

1. 项目概述与架构设计

作为一个长期从事Web全栈开发的工程师，我最近完成了一个基于SpringBoot+Vue3+MyBatis的美食社区项目。这个系统采用了典型的前后端分离架构，后端使用Java技术栈，前端则是现代化的Vue3框架，数据库选择了稳定可靠的MySQL。这种技术组合在当前企业级应用开发中非常主流，既能保证系统性能，又能提高开发效率。

这个美食网站的核心功能包括：

用户注册登录与个人资料管理
食谱的发布、浏览与搜索
用户间的评论互动
食谱收藏与个人收藏夹管理

为什么选择这样的技术栈？SpringBoot提供了快速构建RESTful API的能力，Vue3的响应式特性非常适合构建动态的用户界面，而MyBatis则在数据持久层提供了足够的灵活性。前后端分离的架构让团队可以并行开发，也便于后期的维护和扩展。

2. 数据库设计与实现

2.1 核心数据表结构

数据库设计是系统的基础，我采用了MySQL 8.0作为数据库管理系统。下面是三个核心表的设计：

用户表(users)

sql复制CREATE TABLE `users` (
  `user_id` bigint NOT NULL AUTO_INCREMENT,
  `user_name` varchar(50) NOT NULL,
  `user_email` varchar(100) NOT NULL,
  `user_password` varchar(100) NOT NULL,
  `user_avatar` varchar(255) DEFAULT NULL,
  `register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `last_login` datetime DEFAULT NULL,
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `idx_email` (`user_email`),
  UNIQUE KEY `idx_username` (`user_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

食谱表(recipes)

sql复制CREATE TABLE `recipes` (
  `recipe_id` bigint NOT NULL AUTO_INCREMENT,
  `recipe_title` varchar(100) NOT NULL,
  `recipe_content` text NOT NULL,
  `recipe_ingredients` text NOT NULL,
  `user_id` bigint NOT NULL,
  `publish_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `view_count` int NOT NULL DEFAULT '0',
  PRIMARY KEY (`recipe_id`),
  KEY `idx_user` (`user_id`),
  FULLTEXT KEY `ft_title_content` (`recipe_title`,`recipe_content`),
  CONSTRAINT `fk_user_recipe` FOREIGN KEY (`user_id`) REFERENCES `users` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

评论表(comments)

sql复制CREATE TABLE `comments` (
  `comment_id` bigint NOT NULL AUTO_INCREMENT,
  `recipe_id` bigint NOT NULL,
  `user_id` bigint NOT NULL,
  `comment_text` text NOT NULL,
  `comment_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `parent_id` bigint DEFAULT NULL,
  PRIMARY KEY (`comment_id`),
  KEY `idx_recipe` (`recipe_id`),
  KEY `idx_user` (`user_id`),
  CONSTRAINT `fk_comment_recipe` FOREIGN KEY (`recipe_id`) REFERENCES `recipes` (`recipe_id`),
  CONSTRAINT `fk_comment_user` FOREIGN KEY (`user_id`) REFERENCES `users` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

2.2 数据库优化实践

在实际开发中，我做了以下几个关键的数据库优化：

索引设计：除了主键索引外，为常用的查询字段添加了普通索引，如用户表的email和username字段。对于食谱表，添加了全文索引以支持复杂的搜索功能。
外键约束：虽然外键会影响一些写入性能，但在数据一致性要求高的场景下，我仍然保留了外键约束，确保数据的完整性。
字段类型选择：对于可能包含大量文本的内容字段（如recipe_content），使用TEXT类型而非VARCHAR，避免长度限制问题。
字符集选择：使用utf8mb4字符集以支持完整的Unicode字符，包括emoji表情符号，这对社交类应用很重要。

注意：在大型应用中，随着数据量增长，可能需要考虑分库分表策略。但在项目初期，单库设计已经能满足需求，同时保持简单性。

3. 后端实现细节

3.1 SpringBoot应用架构

后端采用标准的MVC分层架构：

code复制com.example.foodie
├── config/        # 配置类
├── controller/    # 控制器层
├── service/       # 业务逻辑层
├── dao/           # 数据访问层
├── entity/        # 实体类
├── dto/           # 数据传输对象
├── util/          # 工具类
└── exception/     # 异常处理

3.2 用户认证实现

用户认证采用了基于JWT(JSON Web Token)的方案，这是现代Web应用的常见做法。核心代码如下：

java复制@RestController
@RequestMapping("/api/auth")
public class AuthController {
    
    @Autowired
    private UserService userService;
    
    @Autowired
    private JwtTokenProvider tokenProvider;
    
    @PostMapping("/login")
    public ResponseEntity<?> authenticateUser(@Valid @RequestBody LoginRequest loginRequest) {
        Authentication authentication = authenticationManager.authenticate(
            new UsernamePasswordAuthenticationToken(
                loginRequest.getUsername(),
                loginRequest.getPassword()
            )
        );
        
        SecurityContextHolder.getContext().setAuthentication(authentication);
        
        String jwt = tokenProvider.generateToken(authentication);
        return ResponseEntity.ok(new JwtAuthenticationResponse(jwt));
    }
    
    @PostMapping("/register")
    public ResponseEntity<?> registerUser(@Valid @RequestBody SignUpRequest signUpRequest) {
        if(userService.existsByUsername(signUpRequest.getUsername())) {
            return ResponseEntity.badRequest().body("Username is already taken!");
        }
        
        if(userService.existsByEmail(signUpRequest.getEmail())) {
            return ResponseEntity.badRequest().body("Email is already in use!");
        }
        
        User user = new User();
        user.setUsername(signUpRequest.getUsername());
        user.setEmail(signUpRequest.getEmail());
        user.setPassword(passwordEncoder.encode(signUpRequest.getPassword()));
        
        User result = userService.save(user);
        
        URI location = ServletUriComponentsBuilder
            .fromCurrentContextPath().path("/api/users/{username}")
            .buildAndExpand(result.getUsername()).toUri();
            
        return ResponseEntity.created(location).body("User registered successfully");
    }
}

3.3 食谱服务实现

食谱服务是系统的核心业务，主要处理食谱的CRUD操作：

java复制@Service
public class RecipeServiceImpl implements RecipeService {

    @Autowired
    private RecipeRepository recipeRepository;
    
    @Autowired
    private UserRepository userRepository;
    
    @Override
    public Page<Recipe> getAllRecipes(Pageable pageable) {
        return recipeRepository.findAll(pageable);
    }
    
    @Override
    public Recipe createRecipe(RecipeRequest recipeRequest, Long userId) {
        User user = userRepository.findById(userId)
            .orElseThrow(() -> new ResourceNotFoundException("User", "id", userId));
            
        Recipe recipe = new Recipe();
        recipe.setTitle(recipeRequest.getTitle());
        recipe.setContent(recipeRequest.getContent());
        recipe.setIngredients(recipeRequest.getIngredients());
        recipe.setUser(user);
        
        return recipeRepository.save(recipe);
    }
    
    @Override
    public Recipe getRecipeById(Long id) {
        return recipeRepository.findById(id)
            .orElseThrow(() -> new ResourceNotFoundException("Recipe", "id", id));
    }
    
    @Override
    public void deleteRecipe(Long id, Long userId) {
        Recipe recipe = recipeRepository.findById(id)
            .orElseThrow(() -> new ResourceNotFoundException("Recipe", "id", id));
            
        if(!recipe.getUser().getId().equals(userId)) {
            throw new UnauthorizedException("You are not authorized to delete this recipe");
        }
        
        recipeRepository.delete(recipe);
    }
}

3.4 性能优化技巧

在实际开发中，我总结了几个有效的性能优化点：

分页查询：对于列表数据，一定要实现分页查询，避免一次性加载过多数据。Spring Data JPA提供了方便的Pageable支持。
DTO模式：不要直接返回Entity对象，而是转换为DTO对象，只返回前端需要的数据字段，减少网络传输量。
缓存策略：对于热点数据如热门食谱，使用Redis进行缓存，显著提高响应速度。
批量操作：对于批量插入或更新，使用MyBatis的批量操作功能，减少数据库往返次数。
懒加载与预加载：合理配置JPA的关联关系加载策略，避免N+1查询问题。

4. 前端Vue3实现

4.1 前端项目结构

前端采用Vue3 + Vue Router + Pinia的组合，项目结构如下：

code复制src/
├── assets/         # 静态资源
├── components/     # 公共组件
├── composables/    # 组合式函数
├── router/         # 路由配置
├── stores/         # Pinia状态管理
├── styles/         # 全局样式
├── utils/          # 工具函数
├── views/          # 页面组件
├── App.vue         # 根组件
└── main.js         # 应用入口

4.2 食谱列表实现

食谱列表页面使用了组合式API和Pinia进行状态管理：

vue复制<script setup>
import { ref, onMounted } from 'vue'
import { useRecipeStore } from '@/stores/recipe'
import RecipeCard from '@/components/RecipeCard.vue'

const recipeStore = useRecipeStore()
const isLoading = ref(false)
const currentPage = ref(1)
const totalPages = ref(1)

const fetchRecipes = async (page = 1) => {
  isLoading.value = true
  try {
    await recipeStore.fetchRecipes(page)
    currentPage.value = recipeStore.currentPage
    totalPages.value = recipeStore.totalPages
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  fetchRecipes()
})
</script>

<template>
  <div class="recipe-list">
    <h1>美食食谱</h1>
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-else>
      <div class="grid">
        <RecipeCard 
          v-for="recipe in recipeStore.recipes" 
          :key="recipe.id"
          :recipe="recipe"
        />
      </div>
      <Pagination 
        :current-page="currentPage"
        :total-pages="totalPages"
        @page-changed="fetchRecipes"
      />
    </div>
  </div>
</template>

4.3 响应式设计技巧

为了确保网站在不同设备上都能良好显示，我采用了以下响应式设计策略：

CSS Grid与Flexbox：使用现代CSS布局技术创建灵活的布局结构。
Viewport单位：使用vw、vh等单位实现相对于视口大小的元素尺寸。
媒体查询：针对不同屏幕尺寸设置不同的样式规则。
图片响应式：使用srcset属性为不同分辨率提供不同大小的图片。
移动优先：先设计移动端样式，然后逐步增强大屏幕体验。

css复制/* 响应式布局示例 */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

@media (max-width: 768px) {
  .recipe-grid {
    grid-template-columns: 1fr;
  }
  
  .recipe-card {
    flex-direction: column;
  }
}

5. 前后端交互与API设计

5.1 RESTful API规范

后端API遵循RESTful设计原则，主要端点包括：

code复制GET    /api/recipes          - 获取食谱列表
POST   /api/recipes          - 创建新食谱
GET    /api/recipes/{id}     - 获取单个食谱详情
PUT    /api/recipes/{id}     - 更新食谱
DELETE /api/recipes/{id}     - 删除食谱

GET    /api/recipes/{id}/comments - 获取食谱评论
POST   /api/recipes/{id}/comments - 添加评论

POST   /api/auth/login       - 用户登录
POST   /api/auth/register    - 用户注册
GET    /api/users/me         - 获取当前用户信息

5.2 Axios封装与拦截器

前端对Axios进行了统一封装，添加了请求拦截器和响应拦截器：

javascript复制// src/utils/http.js
import axios from 'axios'
import { useAuthStore } from '@/stores/auth'

const http = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// 请求拦截器
http.interceptors.request.use(config => {
  const authStore = useAuthStore()
  if (authStore.token) {
    config.headers.Authorization = `Bearer ${authStore.token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
http.interceptors.response.use(response => {
  return response.data
}, error => {
  if (error.response?.status === 401) {
    const authStore = useAuthStore()
    authStore.logout()
    window.location.href = '/login'
  }
  return Promise.reject(error)
})

export default http

5.3 文件上传实现

食谱图片上传是一个常见需求，我采用了以下实现方案：

后端控制器：

java复制@PostMapping("/upload")
public ResponseEntity<?> uploadImage(@RequestParam("file") MultipartFile file) {
    try {
        String fileName = fileStorageService.storeFile(file);
        String fileUrl = ServletUriComponentsBuilder.fromCurrentContextPath()
            .path("/uploads/")
            .path(fileName)
            .toUriString();
            
        return ResponseEntity.ok(new UploadFileResponse(fileName, fileUrl));
    } catch (Exception e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
            .body("Could not upload the file: " + file.getOriginalFilename());
    }
}

前端实现：

vue复制<script setup>
import { ref } from 'vue'
import http from '@/utils/http'

const file = ref(null)
const previewUrl = ref('')
const uploadProgress = ref(0)
const isUploading = ref(false)

const handleFileChange = (e) => {
  const selectedFile = e.target.files[0]
  if (!selectedFile) return
  
  file.value = selectedFile
  previewUrl.value = URL.createObjectURL(selectedFile)
}

const uploadFile = async () => {
  if (!file.value) return
  
  const formData = new FormData()
  formData.append('file', file.value)
  
  try {
    isUploading.value = true
    const response = await http.post('/upload', formData, {
      onUploadProgress: progressEvent => {
        uploadProgress.value = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        )
      }
    })
    console.log('Upload successful:', response)
  } catch (error) {
    console.error('Upload failed:', error)
  } finally {
    isUploading.value = false
  }
}
</script>

6. 部署与运维

6.1 后端部署方案

SpringBoot应用可以采用多种方式部署：

独立JAR部署：

bash复制mvn clean package
java -jar target/foodie-backend-1.0.0.jar

Docker容器部署：

dockerfile复制FROM openjdk:17-jdk-slim
COPY target/foodie-backend-1.0.0.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

云原生部署：可以部署到Kubernetes集群，配置适当的HPA(Horizontal Pod Autoscaler)实现自动扩缩容。

6.2 前端部署方案

前端项目构建后可以部署到各种静态文件服务器：

Nginx部署：

nginx复制server {
    listen 80;
    server_name foodie.example.com;
    
    root /var/www/foodie-frontend;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

CDN加速：对于生产环境，建议将静态资源部署到CDN，提高全球访问速度。

6.3 数据库运维建议

定期备份：设置MySQL的定期备份策略，可以使用mysqldump或Percona XtraBackup。
监控：配置Prometheus + Grafana监控数据库性能指标。
慢查询优化：开启慢查询日志，定期分析并优化慢查询。
连接池配置：合理配置HikariCP连接池参数：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      minimum-idle: 5
      idle-timeout: 30000
      max-lifetime: 1800000
      connection-timeout: 30000

7. 常见问题与解决方案

在实际开发和部署过程中，我遇到并解决了一些典型问题：

7.1 跨域问题

问题描述：前端访问后端API时出现CORS错误。

解决方案：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:8080", "https://foodie.example.com")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("*")
            .allowCredentials(true)
            .maxAge(3600);
    }
}

7.2 性能瓶颈

问题描述：食谱列表页面加载缓慢。

解决方案：

实现分页查询，避免一次性加载所有数据
添加数据库索引
使用Redis缓存热门食谱
前端实现懒加载和虚拟滚动

7.3 安全性问题

问题描述：如何保护API免受常见攻击。

解决方案：

使用HTTPS加密传输
实现CSRF保护
对用户输入进行严格验证
使用PreparedStatement防止SQL注入
限制API调用频率

7.4 文件上传限制

问题描述：大文件上传失败。

解决方案：

调整Spring Boot文件大小限制：

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

前端实现分片上传
添加文件类型校验

8. 项目扩展方向

这个美食网站系统还有很大的扩展空间，以下是一些可能的扩展方向：

社交功能增强：
- 用户关注系统
- 私信功能
- 食谱分享到社交媒体
内容推荐系统：
- 基于用户行为的个性化推荐
- 热门食谱排行榜
- 季节性食谱推荐
移动应用开发：
- 开发React Native或Flutter移动应用
- 实现PWA(Progressive Web App)支持
高级搜索功能：
- 按食材搜索
- 按烹饪时间筛选
- 智能搜索建议
国际化支持：
- 多语言界面
- 本地化食谱内容
AI功能集成：
- 图片识别食材
- 智能食谱生成
- 营养分析

在实际开发中，我深刻体会到良好的架构设计对项目可维护性的重要性。前后端分离的架构确实带来了很多便利，但也增加了部署和联调的复杂度。选择合适的工具链并建立规范的开发流程，是保证项目顺利进行的关键。

SpringBoot+Vue3+MyBatis美食社区全栈开发实践

1. 项目概述与架构设计

2. 数据库设计与实现

2.1 核心数据表结构

2.2 数据库优化实践

3. 后端实现细节

3.1 SpringBoot应用架构

3.2 用户认证实现

3.3 食谱服务实现

3.4 性能优化技巧

4. 前端Vue3实现

4.1 前端项目结构

4.2 食谱列表实现

4.3 响应式设计技巧

5. 前后端交互与API设计

5.1 RESTful API规范

5.2 Axios封装与拦截器

5.3 文件上传实现

6. 部署与运维

6.1 后端部署方案

6.2 前端部署方案

6.3 数据库运维建议

7. 常见问题与解决方案

7.1 跨域问题

7.2 性能瓶颈

7.3 安全性问题

7.4 文件上传限制

8. 项目扩展方向

内容推荐