cursor重构谷粒商城02——30分钟构建图书管理系统【cursor使用教程番外篇】

前言：这个系列将使用最前沿的cursor作为辅助编程工具，来快速开发一些基础的编程项目。目的是为了在真实项目中，帮助初级程序员快速进阶，以最快的速度，效率，快速进阶到中高阶程序员。

本项目将基于谷粒商城项目，并且对谷粒商城项目进行二次重构，使其满足最新的主流技术栈要求。

上一篇博客，我们已经介绍了为何使用cursor对谷粒商城重构。并且下载了cursor。这一篇文章，我们将对cursor进行快速入门。如果您已经掌握了cursor使用，可以跳过这一章。

一、hello，cursor

我们先试试修改代码，很傻瓜。
在这里插入图片描述

二、图书管理系统需求

现在你已经会用cursor了，让我们愉快的做个小练习，构建一个图书管理系统吧了。
在这里插入图片描述
先让chatgpt帮我生成个需求。

再让它推荐下使用的技术栈。

最后自己选择下模块和技术栈，确定图书管理系统需求如下。
在这里插入图片描述

这里打个广告，需要使用chatgpt镜像(无需科学上网)，可以私聊博主哟。

三、创建项目

IDEA创建项目。
在这里插入图片描述
接下来我们创建一下前端项目。这里需要用到node。

补充：Node是什么？npm 是什么？

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它使得 JavaScript
可以在服务器端运行，而不仅仅是在浏览器里。类似于后端的tomcat。

npm 是 Node.js 的包管理工具，用于安装和管理 Node.js 项目中的依赖包（库和工具）。类似于后端的Maven。

下载node.js，官网链接：https://nodejs.org/zh-cn
在这里插入图片描述
安装后，测试下。

重启IDEA，使其能够重新加载环境变量，检测到node。在IDEA终端测试上述命令。

注：如果遇到下面bug。
在这里插入图片描述
请打开 PowerShell 终端，使用管理员权限运行 PowerShell（右键点击 PowerShell 图标，选择“以管理员身份运行”）。
输入以下命令来允许执行脚本：

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

初始化个demo。下面这个命令的作用是使用 npm 来初始化一个新的 Vue.js 项目，并自动安装最新版本的 Vue CLI 创建的项目模板。

npm create vite@latest

项目名称为library-ui。framework选择vue。语言选择javascript。会看到如下提示。

在这里插入图片描述
按照提示，执行命令。不过，我们使用pnpm代替npm。如果您的环境里还没有pnpm，可以按照如下方式安装下。

## 换源(如果没有换过源，或者失效无法正常安装，执行这个操作，若我的镜像源失效，可自行搜索：npm换源)
npm config set registry https://registry.npmmirror.com
## 安装
npm install -g pnpm

补充：什么是pnpm？和npm有什么区别？

pnpm 是一个替代 npm 的 JavaScript 包管理器，它的目标是提高依赖包的安装速度并节省磁盘空间。
相比npm,它有下面优点。
速度：pnpm 比 npm 更快，特别是在安装大项目或者多个项目之间共享依赖时。
磁盘空间：pnpm 更节省磁盘空间，因为它使用硬链接来共享依赖。
依赖管理：pnpm 的依赖结构更为高效，不会重复安装相同版本的包。

接着执行命令。

cd library-ui
# 用来安装依赖包。
pnpm install
# 启动开发服务器，通常用于本地开发和调试。
pnpm run dev

访问浏览器，okk。好漂亮。
在这里插入图片描述
IDEA终端：ctrl + C关闭。现在我们已经把后端、前端的项目初始化好了。

在cursor中，打开刚刚的项目。

在这里插入图片描述

导入项目后，唤起我们的cursor对话窗口。我的快捷键是ctrl+L。如果您的不是，可以参考下图自行搜索下。
在这里插入图片描述

四、后端代码快速生成

在对话窗口，输入如下提示词，回车。

@Codebase 这个项目是一个springboot+vue3的项目脚手架，其中前端vue的代码写在library-ui目录下。
接下来我会用这个项目创建一个图书管理系统，包含后端接口和前端页面。
在我描述具体需求之前不要生成代码

注：1、在 Cursor 中，@Codebase 是一种用于增强对话框中代码相关查询的功能。通过在对话框中输入 @Codebase，Cursor 会扫描你的代码库，收集与查询相关的文件和代码块，并根据相关性对其进行排序，以提供更准确的回答。

2、在软件开发中，脚手架（Scaffolding）指的是一套自动化工具或框架，旨在帮助开发者快速搭建项目的基础结构和开发环境。这些工具通常会自动生成项目的目录结构、配置文件、构建脚本、测试工具和依赖管理工具等，从而减少开发者在项目启动阶段需要手动完成的工作量。使用脚手架，开发者可以更加专注于业务逻辑的实现，而不是在项目配置上花费大量时间我们前面安装的Vue CLI 就是一个广受欢迎的脚手架工具

接下来，把具体的业务需求告知cursor。

在这里插入图片描述
可以直接把图片给他，ctrl c，ctrl v即可。牛不。

在这里插入图片描述

接下来让它帮忙设计数据库：
请开始设计数据库。
在这里插入图片描述

在这里插入图片描述

接下来，不一一演示了。可以自行探索。选择右下角的accept all。

五、进阶：cursorrules

如何保证ai更听话呢？

在这里，给大家提供一个有用的提示词。cursor rule，也就是，让cursor生成代码时，遵循的规范。

你是一个 web 应用程序开发专家，精通 Spring Boot、Vue3、Element Plus 和相关技术栈。你的任务是帮助我构建一个清晰、高效、可维护的全栈项目。
1、代码风格与结构规范
要求编写清晰、高效、有良好注释的代码。提供准确的 Spring Boot和Vue3示例。
遵循 Spring Boot 和 Vue3 的最佳实践和约定。
使用 RESTful API 设计模式构建后端服务。
前后端代码遵循命名规范：变量和方法名使用 camelCase(驼峰式),类名使用 PascalCase(帕斯卡式)
项目结构分明
Spring Boot 后端:按controller、service、repository、model、configuration 模块组织代码
Vue3 前端:按views、components、store、router、utils、assets组织代码

2、Spring Boot 规范
使用 Spring Boot Starter 快速搭建项目和依赖。
正确使用常用注解(@SpringBootApplication、@RestController、@Service)
使用 @ControllerAdvice 和 @ExceptionHandler 实现全局异常处理
使用 Spring Data JPA 简化数据库操作

3、Vue3 规范
使用

4、测试与调试
后端测试：
编写单元测试(JUnit 5)和集成测试(@SpringBootTest)
使用 MockMvc 测试控制器层
前端测试：
使用 Vitest 和 Vue Test Utils 编写组件单元测试
测试覆盖率要达到 80% 以上
提交代码前进行代码审查，并使用 SLF4J 记录日志

5、性能与安全
实现缓存策略(如使用 Spring Cache 进行缓存管理)
后端异步处理使用 @Async 注解，必要时使用 WebFlux 实现响应式编程
使用 Spring Security 实现认证和授权，密码采用 BCrypt 加密
配置 CORS,确保跨域访问正常

6、配置与部署
使用 application.yml 配置文件，按环境（开发、测试、生产）划分配置
使用 Docker 容器化应用，按需添加 CI/CD 流程
通过 Spring Boot Actuator 实现监控和指标收集

7、API 文档
使用 Springdoc OpenAPI 生成接口 API 文档
提供测试集成调试工具(如 Postman Collection)

8、最终项目目标
构建一个功能完整、用户友好的应用程序，包括：用户管理、权限分配、数据展示等核心功能，注重代码质量和可维护性

用以上规范，生成代码和建议。

在项目目录下新建.cursorrules文件。把上述规则粘过去即可。
在这里插入图片描述