SpringBoot+Vue网上点餐系统开发实战

1. 项目概述与核心价值

这个毕业设计项目构建了一个完整的网上点餐系统平台，采用SpringBoot+Vue+MySQL技术栈实现前后端分离架构。作为餐饮行业数字化转型的典型应用，系统实现了从菜品展示、在线下单到订单管理的全流程功能。我在实际开发中发现，这类系统虽然表面看起来简单，但要处理好高并发订单、实时库存更新和支付对接等环节，需要精心设计数据结构和业务流程。

对于计算机相关专业的毕业生来说，这个项目能全面锻炼技术能力：前端用Vue实现响应式界面，后端用SpringBoot构建RESTful API，MySQL负责数据持久化，最后通过部署文档将系统上线运行。整套技术选型既符合当前企业主流开发模式，又不会过于复杂导致难以完成。

2. 技术架构解析

2.1 前后端分离设计

系统采用典型的前后端分离架构：

• 前端：Vue.js + Element UI
• 后端：SpringBoot 2.7 + MyBatis-Plus
• 数据库：MySQL 8.0
• 接口规范：RESTful API + JWT认证

这种架构的优势在于：

1. 开发效率高：前后端可以并行开发
2. 维护成本低：模块化程度高
3. 扩展性强：后期可轻松替换技术组件

我在实际部署时发现，需要特别注意跨域问题的处理。建议在SpringBoot中配置全局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);
    }
}

2.2 数据库设计要点

数据库设计是系统的核心，主要包含以下表结构：

1. 用户表(user)：存储顾客和管理员信息
2. 菜品表(dish)：记录菜品详情和库存
3. 订单表(order)：主订单信息
4. 订单明细表(order_detail)：订单中的具体菜品

关键设计技巧：

• 使用DECIMAL类型存储金额，避免浮点数精度问题
• 为常用查询字段添加索引，如订单状态、用户ID
• 建立外键约束保证数据完整性

注意：在实际生产环境中，需要考虑分库分表策略应对高并发订单

3. 核心功能实现

3.1 菜品展示模块

前端采用Vue的v-for指令渲染菜品列表，配合Element UI的卡片组件实现美观展示。关键实现步骤：

1. 后端提供分页查询接口：

java复制@GetMapping("/dish/list")
public Result<Page<Dish>> list(
    @RequestParam(defaultValue = "1") Integer page,
    @RequestParam(defaultValue = "10") Integer size) {
    Page<Dish> dishPage = dishService.page(new Page<>(page, size));
    return Result.success(dishPage);
}

2. 前端使用axios调用接口：

javascript复制async loadDishList() {
  const res = await this.$http.get('/dish/list', {
    params: {
      page: this.currentPage,
      size: this.pageSize
    }
  })
  this.dishList = res.data.records
  this.total = res.data.total
}

3.2 购物车与下单流程

购物车功能需要注意的几个技术点：

1. 使用Vuex管理全局状态
2. 本地存储未登录用户的购物车数据
3. 下单时检查库存并锁定

下单接口的核心逻辑：

java复制@Transactional
public Result createOrder(OrderDTO orderDTO) {
    // 1. 检查库存
    List<OrderDetail> details = orderDTO.getOrderDetails();
    for (OrderDetail detail : details) {
        Dish dish = dishService.getById(detail.getDishId());
        if (dish.getStock() < detail.getNumber()) {
            throw new BusinessException(dish.getName() + "库存不足");
        }
    }
    
    // 2. 扣减库存
    for (OrderDetail detail : details) {
        dishService.update()
            .setSql("stock = stock - " + detail.getNumber())
            .eq("id", detail.getDishId())
            .update();
    }
    
    // 3. 创建订单
    Order order = new Order();
    BeanUtils.copyProperties(orderDTO, order);
    orderMapper.insert(order);
    
    // 4. 保存订单明细
    details.forEach(detail -> {
        detail.setOrderId(order.getId());
        orderDetailMapper.insert(detail);
    });
    
    return Result.success(order.getId());
}

4. 系统安全与性能优化

4.1 安全防护措施

1. JWT认证：使用jjwt库实现token生成与验证

java复制// 生成token
public static String generateToken(String userId, String username) {
    return Jwts.builder()
            .setSubject(userId)
            .claim("username", username)
            .setExpiration(new Date(System.currentTimeMillis() + EXPIRE_TIME))
            .signWith(SignatureAlgorithm.HS256, SECRET_KEY)
            .compact();
}

// 验证token
public static Claims parseToken(String token) {
    return Jwts.parser()
            .setSigningKey(SECRET_KEY)
            .parseClaimsJws(token)
            .getBody();
}

2. XSS防护：前端使用vue-sanitize过滤用户输入
3. SQL注入防护：MyBatis-Plus自动使用预编译语句

4.2 性能优化实践

1. 使用Redis缓存热门菜品数据

java复制@Cacheable(value = "dish", key = "#id")
public Dish getById(Long id) {
    return getById(id);
}

2. 订单查询添加索引：

sql复制ALTER TABLE `order` ADD INDEX idx_user_status (user_id, status);

3. 前端使用懒加载优化图片显示

html复制<img v-lazy="dish.image" alt="菜品图片">

5. 部署与上线

5.1 环境准备

推荐使用Docker-compose一键部署：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/data:/var/lib/mysql
      
  redis:
    image: redis:6
    ports:
      - "6379:6379"
      
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
      
  frontend:
    build: ./frontend
    ports:
      - "80:80"

5.2 常见部署问题

1. 数据库连接失败：

• 检查MySQL服务是否启动
• 确认application.yml中的连接配置正确
• 测试网络连通性：telnet mysql_host 3306

2. 前端静态资源404：

• 检查Nginx配置中的root路径
• 确认Vue打包路径配置（vue.config.js）
• 查看浏览器开发者工具Network面板

3. 跨域问题：

• 确保后端CORS配置正确
• 检查前端请求的baseURL
• 测试直接访问API接口是否正常

6. 论文写作要点

毕业设计论文应包含以下核心章节：

1. 系统需求分析（用例图、功能模块图）
2. 技术选型依据（对比SpringBoot与其他框架）
3. 数据库设计（ER图、表结构说明）
4. 核心功能实现（关键代码片段+流程图）
5. 系统测试方案（测试用例设计）

写作技巧：

• 使用PlantUML绘制专业图表
• 代码展示要精简，突出核心逻辑
• 测试结果用表格形式呈现
• 参考文献选择近5年的权威资料

我在实际开发中遇到的几个典型问题及解决方案：

1. 订单并发问题：使用乐观锁解决

java复制@Update("update dish set stock = stock - #{num} where id = #{id} and stock >= #{num}")
int reduceStock(@Param("id") Long id, @Param("num") Integer num);

2. 支付超时处理：添加定时任务扫描未支付订单

java复制@Scheduled(cron = "0 */5 * * * ?")
public void cancelUnpaidOrders() {
    List<Order> orders = orderMapper.selectList(
        new QueryWrapper<Order>()
            .eq("status", OrderStatus.UNPAID)
            .le("create_time", LocalDateTime.now().minusMinutes(30))
    );
    
    orders.forEach(order -> {
        order.setStatus(OrderStatus.CANCELLED);
        orderMapper.updateById(order);
        // 返还库存...
    });
}

3. 移动端适配：使用flexible.js+rem布局方案

这个项目完整实现了从需求分析到系统上线的全流程，涵盖了软件工程的主要环节。对于想要深入理解现代Web开发的学生来说，按照这个框架扩展功能（如优惠券系统、会员积分等）会是不错的进阶练习。