校园美食平台全栈开发：SpringBoot+Vue技术解析-代码聚汇网

校园美食平台全栈开发：SpringBoot+Vue技术解析

Respect yourself

1. 项目概述：校园美食探索平台的技术架构

这个校园周边美食探索及分享平台是一个典型的互联网应用系统，采用前后端分离架构实现。后端基于SpringBoot框架开发，前端使用Vue.js构建用户界面，数据存储采用MySQL关系型数据库。整套系统源码开箱即用，开发者可以直接运行体验完整功能。

作为校园场景下的垂直类应用，平台主要解决三个核心问题：一是帮助学生快速发现校园周边的优质餐饮资源；二是提供用户评价和分享的互动渠道；三是为商家提供展示窗口。从技术实现角度看，系统采用了当前主流的全栈技术组合，具有较高的学习参考价值。

2. 技术栈选型解析

2.1 SpringBoot后端框架

选择SpringBoot作为后端框架主要基于以下几个考量：

快速开发：自动配置和起步依赖大大减少了XML配置
内嵌服务器：无需额外部署Tomcat等应用服务器
丰富的生态：可以方便集成MyBatis、Redis等常用组件
完善的文档：Spring社区活跃，问题解决资源丰富

实际开发中我们特别使用了：

Spring Security进行权限控制
Spring Data JPA简化数据库操作
Lombok减少样板代码
Swagger生成API文档

2.2 Vue前端框架

Vue.js作为渐进式前端框架，其优势在这个项目中体现为：

组件化开发：美食卡片、评论组件等可复用
响应式设计：自动更新DOM，提升用户体验
Vue Router：实现前端路由和页面跳转
Vuex：集中管理应用状态

项目中特别使用了以下Vue生态工具：

Element UI提供基础UI组件
Axios处理HTTP请求
Vue-lazyload实现图片懒加载
Vue-awesome-swiper制作轮播图

2.3 MySQL数据库设计

数据库设计遵循第三范式，主要包含以下表结构：

用户表(user)

id (主键)
username
password (加密存储)
avatar
register_time

商家表(shop)

id (主键)
name
address
phone
avg_price
business_hours
cover_image

美食表(food)

id (主键)
shop_id (外键)
name
price
image
description

评论表(comment)

id (主键)
user_id (外键)
shop_id (外键)
content
rating
create_time

3. 核心功能实现

3.1 商家展示模块

后端实现关键代码：

java复制@RestController
@RequestMapping("/api/shop")
public class ShopController {
    
    @Autowired
    private ShopService shopService;
    
    @GetMapping("/nearby")
    public Result<List<Shop>> getNearbyShops(
        @RequestParam double longitude,
        @RequestParam double latitude,
        @RequestParam(defaultValue = "1000") int radius) {
        
        List<Shop> shops = shopService.findNearby(longitude, latitude, radius);
        return Result.success(shops);
    }
}

前端调用示例：

javascript复制axios.get('/api/shop/nearby', {
  params: {
    longitude: 116.404,
    latitude: 39.915,
    radius: 1500
  }
}).then(response => {
  this.shops = response.data.data
})

3.2 用户评论系统

数据库事务处理示例：

java复制@Transactional
public void addComment(CommentDTO commentDTO) {
    // 插入评论
    Comment comment = new Comment();
    BeanUtils.copyProperties(commentDTO, comment);
    commentMapper.insert(comment);
    
    // 更新商家评分
    Shop shop = shopMapper.selectById(commentDTO.getShopId());
    double newRating = (shop.getRating() * shop.getCommentCount() + commentDTO.getRating()) 
        / (shop.getCommentCount() + 1);
    shop.setRating(newRating);
    shop.setCommentCount(shop.getCommentCount() + 1);
    shopMapper.updateById(shop);
}

3.3 美食搜索功能

Elasticsearch集成方案：

在pom.xml添加依赖：

xml复制<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>

创建搜索服务接口：

java复制public interface FoodSearchService {
    Page<Food> search(String keyword, int page, int size);
    
    void indexFood(Food food);
    
    void deleteIndex(String id);
}

4. 系统部署与运行

4.1 环境准备

需要安装以下软件：

JDK 1.8+
Maven 3.6+
Node.js 12+
MySQL 5.7+
Redis (可选，用于缓存)

4.2 数据库初始化

执行SQL脚本创建数据库：

sql复制CREATE DATABASE IF NOT EXISTS campus_food DEFAULT CHARSET utf8mb4;
USE campus_food;
-- 执行提供的schema.sql文件

4.3 后端启动

修改application.yml中的数据库配置
运行maven命令：

bash复制mvn clean package
java -jar target/campus-food-0.0.1-SNAPSHOT.jar

4.4 前端启动

安装依赖：

bash复制npm install

开发模式运行：

bash复制npm run serve

生产环境构建：

bash复制npm run build

5. 常见问题解决方案

5.1 跨域问题

解决方案：

后端配置CORS：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowCredentials(true)
            .maxAge(3600);
    }
}

前端代理配置（vue.config.js）：

javascript复制module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

5.2 文件上传问题