5天搞定毕业设计：用Cursor+SpringBoot+Vue3快速搭建点餐系统（附源码）

从零到一：用AI编程助手高效构建毕业级点餐系统全栈项目

又到了一年一度的毕业季，对于计算机专业的同学来说，毕业设计无疑是大学四年学习成果的集中展示。然而，从选题、设计到编码实现，整个过程往往耗时数月，让不少同学感到压力山大。如果你正在寻找一种既能保证项目质量，又能大幅缩短开发周期的方法，那么将AI编程助手融入你的开发流程，或许会是一个改变游戏规则的选择。

我最近指导了几位学弟学妹完成他们的毕业设计，发现了一个有趣的现象：那些懂得利用现代AI工具的同学，不仅项目完成得更快，而且有更多时间深入思考系统设计和业务逻辑。今天，我想分享一个完整的实战案例——如何用5天时间，从零开始构建一个功能完备的点餐管理系统。这个项目采用了当前主流的技术栈：Spring Boot 2.7作为后端框架，Vue 3作为前端框架，MongoDB作为数据库。更重要的是，我会详细展示如何将AI编程助手Cursor融入开发的每一个环节，让它成为你的“第二大脑”，而不是简单的代码生成器。

1. 环境准备与项目初始化：打好坚实的基础

在开始任何项目之前，充分的环境准备是成功的一半。对于点餐管理系统这样的全栈项目，我们需要确保开发环境配置正确，避免在后续开发中因为环境问题浪费时间。

1.1 开发工具的选择与配置

首先，我们需要选择合适的开发工具。对于Java后端开发，IntelliJ IDEA社区版或旗舰版都是不错的选择，它们对Spring Boot有很好的支持。前端开发则推荐使用Visual Studio Code，它轻量且插件生态丰富。但今天我们要重点介绍的是Cursor——一个集成了AI能力的代码编辑器。

Cursor基于VS Code构建，但增加了与AI模型直接对话的能力。这意味着你可以在编写代码的同时，随时向AI询问技术问题、请求代码片段，甚至让它帮你调试错误。安装Cursor后，有几个关键配置需要调整：

// 在Cursor的settings.json中添加以下配置
{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "cursor.chat.model": "claude-3.7-sonnet",
  "cursor.experimental.mcp": true
}

提示：虽然Cursor内置了Claude模型，但你也可以配置使用其他AI模型。对于毕业设计项目，我建议使用Claude 3.7 Sonnet或更高版本，它在代码生成和理解复杂需求方面表现更佳。

1.2 技术栈版本管理

明确的技术栈版本可以避免很多兼容性问题。对于我们的点餐系统，我推荐以下版本组合：

为什么选择这个组合？Spring Boot 2.7.x提供了良好的向后兼容性，而JDK 17引入了很多现代Java特性。Vue 3的Composition API让组件逻辑组织更加清晰，MongoDB的文档模型则非常适合点餐系统这种数据结构变化频繁的场景。

1.3 项目结构规划

在开始编码之前，花点时间规划项目结构是值得的。一个清晰的项目结构不仅便于开发，也方便答辩时的展示。我建议采用以下目录结构：

family-menu/
├── backend/                    # Spring Boot后端
│   ├── src/main/java/com/familymenu/
│   │   ├── controller/        # 控制器层
│   │   ├── service/          # 业务逻辑层
│   │   ├── repository/       # 数据访问层
│   │   ├── model/           # 数据模型
│   │   ├── config/          # 配置类
│   │   └── FamilyMenuApplication.java
│   ├── src/main/resources/
│   │   ├── application.yml   # 主配置文件
│   │   └── static/          # 静态资源
│   └── pom.xml
├── frontend/                  # Vue 3前端
│   ├── src/
│   │   ├── views/           # 页面组件
│   │   ├── components/      # 可复用组件
│   │   ├── router/          # 路由配置
│   │   ├── store/           # 状态管理
│   │   ├── api/            # API接口封装
│   │   └── App.vue
│   ├── package.json
│   └── vite.config.js
└── docker/                   # Docker配置
    ├── docker-compose.yml
    └── mongodb/

这样的结构分离了前后端关注点，也便于后续的部署和维护。在实际开发中，你可以通过Cursor快速生成这个基础结构。只需要在Cursor的聊天框中输入：

请帮我创建一个Spring Boot + Vue 3的项目结构，包含基本的MVC分层和Vue路由配置。

2. 数据库设计与MongoDB集成

点餐系统的核心是数据管理，而数据库设计直接影响到系统的性能和可扩展性。MongoDB作为NoSQL数据库，其灵活的文档模型特别适合餐饮业务的多变需求。

2.1 数据模型设计

在传统的关系型数据库中，我们可能需要设计多个表并通过外键关联。但在MongoDB中，我们可以采用更自然的文档嵌套方式。以下是点餐系统的核心数据模型：

// MenuItem.java - 菜品实体
@Data
@Document(collection = "menu_items")
public class MenuItem {
    @Id
    private String id;
    
    private String name;
    private String description;
    private BigDecimal price;
    private String category;  // 如：主食、饮料、小吃
    private String imageUrl;
    private Boolean available = true;
    private Integer stock;    // 库存数量
    private List<String> tags; // 标签：辣、甜、推荐等
    private LocalDateTime createdAt;
    private LocalDateTime updatedAt;
}

// Order.java - 订单实体
@Data
@Document(collection = "orders")
public class Order {
    @Id
    private String id;
    
    private String orderNumber;    // 订单号
    private String customerName;   // 顾客姓名
    private String customerPhone;  // 联系电话
    private String tableNumber;    // 桌号
    private OrderStatus status;    // 状态：待处理、制作中、已完成等
    
    private List<OrderItem> items; // 订单项列表
    private BigDecimal totalAmount;
    private String notes;          // 备注
    private LocalDateTime orderTime;
    private LocalDateTime estimatedReadyTime;
    
    // 嵌套文档 - 订单项
    @Data
    public static class OrderItem {
        private String menuItemId;
        private String menuItemName;
        private Integer quantity;
        private BigDecimal unitPrice;
        private String specialRequest; // 特殊要求
    }
}

这种设计有几个优势：首先，订单和订单项存储在一个文档中，查询时不需要联表操作；其次，菜品信息在订单中冗余存储，即使后续菜品信息变更，历史订单也不会受到影响；最后，MongoDB的文档模型天然支持数组和嵌套结构，非常适合存储订单项这样的列表数据。

2.2 MongoDB配置与连接

Spring Boot对MongoDB有很好的支持，只需要简单的配置即可连接。在application.yml中添加：

spring:
  data:
    mongodb:
      uri: mongodb://localhost:27017/family_menu
      auto-index-creation: true

logging:
  level:
    org.springframework.data.mongodb.core: DEBUG

对于本地开发，我推荐使用Docker运行MongoDB，这样可以避免环境配置的麻烦：

# 创建docker-compose.yml
version: '3.8'
services:
  mongodb:
    image: mongo:7.0
    container_name: family_menu_mongo
    ports:
      - "27017:27017"
    environment:
      MONGO_INITDB_ROOT_USERNAME: admin
      MONGO_INITDB_ROOT_PASSWORD: password123
    volumes:
      - ./data/db:/data/db
      - ./init-mongo.js:/docker-entrypoint-initdb.d/init-mongo.js:ro

初始化脚本init-mongo.js可以创建必要的索引：

// 创建菜品分类索引
db.menu_items.createIndex({ category: 1 });
// 创建订单状态和时间复合索引
db.orders.createIndex({ status: 1, orderTime: -1 });
// 创建订单号唯一索引
db.orders.createIndex({ orderNumber: 1 }, { unique: true });

2.3 数据访问层实现

Spring Data MongoDB提供了简洁的Repository接口，大大简化了数据访问代码。但这里我想分享一个更实用的技巧：如何利用Cursor生成符合业务需求的复杂查询。

假设我们需要查询今日最受欢迎的菜品，传统的做法可能是手动编写聚合查询。但在Cursor中，你可以这样描述需求：

我需要一个Spring Data MongoDB的Repository方法，用于查询今日销量前十的菜品。
要求：统计今天（从00:00到现在）的订单，按菜品分组计算总销量，返回菜品ID、名称和销量，按销量降序排列，只取前10条。

Cursor会生成类似这样的代码：

@Repository
public interface OrderRepository extends MongoRepository<Order, String> {
    
    @Aggregation(pipeline = {
        "{ $match: { orderTime: { $gte: ?0 } } }",
        "{ $unwind: '$items' }",
        "{ $group: { _id: '$items.menuItemId', itemName: { $first: '$items.menuItemName' }, totalQuantity: { $sum: '$items.quantity' } } }",
        "{ $sort: { totalQuantity: -1 } }",
        "{ $limit: 10 }"
    })
    List<TopSellingItem> findTopSellingItemsToday(LocalDateTime startOfDay);
    
    interface TopSellingItem {
        String getId();
        String getItemName();
        Integer getTotalQuantity();
    }
}

这种交互式的开发方式，让你可以专注于业务逻辑，而不是语法细节。更重要的是，你可以要求Cursor解释生成的代码：

请解释上面这个聚合查询的每一步做了什么，以及为什么这样设计。

3. 后端API设计与实现

RESTful API是现代Web应用的标准通信方式。一个好的API设计应该遵循一致性原则，让前端开发者能够直观地理解和使用。

3.1 控制器层设计

控制器是前后端交互的桥梁。对于点餐系统，我们需要设计几个核心的控制器：

@RestController
@RequestMapping("/api/menu")
@Slf4j
public class MenuController {
    
    @Autowired
    private MenuService menuService;
    
    // 获取菜品列表（支持分页和过滤）
    @GetMapping