构建一个 Springboot3 + Vue3 的全栈项目的步骤(举例:使用cursor构建图书馆管理系统)

  1. IDEA创建springboot项目,添加springweb,mysql,mybatis-plus,lombok,spring security,jwt等依赖
  2. 生成前端vue项目,安装依赖,启动前端项目
    1
    2
    3
    npm create vite@latest
    pnpm install
    pnpm dev
  3. 使用cursor打开刚才创建的springboot和vue项目的根目录
  4. 添加.cursorrules
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    ### 提示词
    你是一个 web 应用程序开发专家,精通Spring Boot, Vue3, ELement Plus 和相关技术栈。
    你的任务是帮助我实现一个图书馆管理系统。
    #### **代码风格与结构**
    - 编写清晰,高效,具有良好注释的代码,提供精确的Spring Boot 和 Vue3 示例。
    - 遵循 Spring Boot 和 Vue3 的最佳实践与约定。
    - 使用RESTful API 设计模式构建后端服务。
    - 前后端代码遵循命名规范,方法和变量名使用 `camelCase`,类名使用 `PascalCase`
    - 项目结构分明:
    - Spring Boot 后端:按'controller','service','repository','model','config'等模块创建目录。
    - Vue3 前端:按'views','components','store','router','utils','assets' 组织代码。
    #### **Spring Boot 规范**
    - 使用 Spring Boot Starter 快速搭建项目和管理依赖。
    - 正确使用常用注解(`@SpringBootApplication`,`@RestController`,`@Service`)。
    -`@ControllerAdvice``@ExceptionHandler` 实现全局异常处理。
    - 利用 MyBatis-plus 简化数据库操作。
    #### **Vue3 规范**
    - 代码基于 `<script setup></script>` 语法,组件内逻辑清晰分离。
    - 使用Vue Router 实现路由管理,Pinia 实现状态管理。
    - 遵循模块化开发,组件命名清晰,按需引入 Element Plus 组件。
    - 使用 ES6+ 语法。代码风格简洁规范。
    #### **测试与调试**
    - 后端测试:
    - 编写单元测试(JUnit 5)和集成测试(`@SpringBootTest`)。
    - 使用 MockMvc 测试控制器层。
    - 前端测试:
    - 使用 Vitest 和 Vue Test Utils 编写组件单元测试。
    - 确保核心功能覆盖率达到 80% 以上。
    - 提供有好的错误提示和日志,后端使用 SLF4J 记录日志。
    #### **性能与安全**
    - 实现缓存策略(如使用 Spring Cache)。
    - 后端异步处理使用 ``,必要时使用 WebFlux 实现响应式编程。
    - 使用 Spring Security 实现认证和授权,密码采用 BCrypt 编程。
    - 配置 CORS,确保跨域访问正常。
    #### **性能与安全**
    - 使用 `application.yml` 配置文件,按环境(开发,测试,生产)划分配置。
    - 使用 Docker 容器化应用,按需添加 CI/CD 流程。
    - 通过 spring Boot Actuator 实现监控和指标收集。
    #### **API 文档**
    - 使用 Springdoc OpenAPI 生成后端 API 文档。
    - 提供前端集成调试工具(如 Postman Collection)。
    #### **最终目标**
    构建一个功能齐全,用户友好的应用程序,包括用户管理,权限分配,数据展示等核心功能,注重代码质量,可分步骤生成。
    **用以上规范,生成代码和建议。**
  5. 告知cursor项目的基本代码
    1
    2
    3
    1. 这个项目是一个 springboot+vue3 的项目脚手架,其中前端vue的代码写在 library-ui 目录下。
    2. 接下来我会用这个项目创建一个图书馆管理系统,包含后端接口和前端页面。
    3. 在我描述具体需求之前不要生成代码。
  6. 向cursor描述图书馆管理系统需求
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ## **项目大纲:图书馆管理系统
    ### **项目概述**
    - 系统功能:
    - 管理员模块:
    - 图书管理:新增,编辑,删除,查询图书信息。
    - 用户管理:新增,编辑,删除,查询图书信息。
    - 借阅管理:审核借阅请求,管理借阅记录。
    - 读者模块:
    - 图书浏览:按分类,关键字搜索图书。
    - 借阅管理:借阅图书,查看借阅历史。
    - 个人信息管理:修改个人资料,密码等。
    - 技术栈:
    - 后端:Spring Boot 3.x , MyBatis-plus , MySQl。
    - 前端:Vue3, ElementPlus, vite
    - 开发工具:Cursor AI 编辑器, IDEA
  7. 一步一步生成后端代码
    1. 修改jwt配置的 secretkey
    2. 询问cursor后端部分是否完成
  8. 调试后端项目
    1. 生成数据库初始化语句(初始化sql语句在resources下的db)
    2. idea打开项目连接mysql数据库
    3. 粘贴sql语句到数据库,运行生成数据表
    4. idea启动后端项目测试是否连接成功
  9. 生成前端代码
    1
    2
    3
    1. 现在在 library-ui 目录下帮我生成前端页面代码,并对接后端接口实现图书馆管理系统的功能。
    2. 请使用现代化美观的 Element-plus UI 来构建页面。
    3. 如果需要执行命令,请先暂停生成,让我先执行命令。

这个目录结构遵循了最佳实践和关注点分离原则,能够帮助更好地组织和管理代码。根据具体项目需求,可以适当调整或增减目录结构。

🔍 SpringBoot3 + Vue3 后端项目的常用文件夹结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
**后端 (SpringBoot3) 目录结构:**

1. `src/main/java/com/项目名称/`
- `controller/`: 控制器层,处理 HTTP 请求,接收前端数据
- `service/`: 业务逻辑层,实现具体的业务处理
- `dao/` 或 `repository/`: 数据访问层,与数据库交互
- `entity/` 或 `model/`: 实体类,对应数据库表结构
- `dto/`: 数据传输对象,用于前后端数据交互
- `config/`: 配置类,存放项目配置文件
- `utils/`: 工具类,存放通用工具方法
- `common/`: 公共类,如常量、枚举等
- `exception/`: 异常处理类
- `interceptor/`: 拦截器
- `security/`: 安全相关配置(如果使用 Spring Security)

2. `src/main/resources/`
- `application.yml` 或 `application.properties`: 项目主配置文件
- `static/`: 静态资源文件
- `templates/`: 模板文件(如果需要)
- `mapper/`: MyBatis 的 XML 映射文件(如果使用 MyBatis)

3. `src/test/`: 单元测试目录

**前端 (Vue3) 目录结构:**

1. `src/`
- `assets/`: 静态资源文件(图片、样式等)
- `components/`: 公共组件
- `views/`: 页面视图组件
- `router/`: 路由配置
- `store/`: 状态管理(如 Pinia 或 Vuex)
- `api/`: API 接口封装
- `utils/`: 工具函数
- `styles/`: 全局样式文件
- `hooks/`: 组合式函数
- `types/`: TypeScript 类型定义(如果使用 TS)

2. `public/`: 公共静态资源

3. 根目录重要文件:
- `package.json`: 项目依赖配置
- `vite.config.js`: Vite 配置文件
- `.env.*`: 环境变量配置文件
- `tsconfig.json`: TypeScript 配置(如果使用 TS)