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文件。把上述规则粘过去即可。

更多参考资料，可以参考官方文档：https://cursor.document.top/tips/usage/set-rules/

6、报错解决

可以直接alt+enter，让ai帮忙解决。

7、Cusor的PJ(仅供学习)

如果您看到提示：Too many free trial accounts used on this machine，说明您需要充值了。

如果是学习用途，可以参考下列内容，进行和谐。

下载：https://github.com/bestK/cursor-fake-machine/releases/download/v0.0.2/cursor-fake-machine-0.0.2.vsix

查看下载扩展的快捷键，输入快捷键。

文件拖进来。自动安装后如图。

输入ctrl+shift+P，输入fake，回车。

登录官网，将你远程账户删除。

重新登录远程账户。