AI编程⑬：Cursor如何开发前后端分离项目

零代码使用cursor完成一个前后端分离的小项目

前端: vue3

后端: java springboot

 

一、前后端开发的两种模式

把前端项目、后端项目放到同一个文件夹中，然后用cursor 打开这个文件夹

  -project-name

     -front-end

     -back-end

优点：

一次agent对话能同时修改前端和后端项目

适合小的项目，或者你自己能很好的管理上下文，能及时切换新的对话

 

缺点：

 1）项目大了不好管理rules文件

 2）很容易挤爆上下文，经常要 “新开对话”

把前端项目、后端项目放到不同文件夹中，然后用不同的cursor 打开对应的项目

Front-end   

Back-end

 

二、项目初始化

前后端项目采用vue3+springboot的方式

将vue3的框架rules放到前端项目中

vue3 框架rules

Spring boot 可以从https://start.spring.io/ 下载安装包，同时也把rules文件放到项目中

在当前目录下，根据 @vue3.mdc 初始化一个前端项目，使用yarn来管理包结构，需要支持本地API测试环境联调

 

根据 @springboot.mdc 完善项目结构信息，添加mybatis-plus

三、前后端的协作流程

四、文档阶段

这次我直接采用需求文档直接生成界面的方式，所以暂时不考虑UI精美的问题

 

我现在需要做一个移动端H5商城，产品的功能只有这几个：

1、用户查看商品列表页面

2、用户点击加减号进行购物车操作

3、用户浏览购物车

根据以上内容，帮我完成一个产品需求文档，需要包含页面设计、UI元素，技术栈。不要包含任何代码

五、拆分前后端任务

 

 

 

注： 跟cursor对话一定是任务越小越细，返回的代码质量就会越高，反之，cursor大概率会返回有问题的代码。

拆分任务的好处是我们能知道cursor会以什么样的方式来完成

前端开发

你是具有丰富开发经验的前端开发工程师，请你阅读@xuqu.md 这个产品及UI文档，你需要完成这个产品的前端页面开发，这是一个移动端的H5页面，需要适配手机访问，请你按照你丰富的前端开发经验，拆解出详细的前端开发任务，按照以下格式保存到 doc目录中。

- 根据开发顺序创建TASK001这样的任务编号；

- 每个任务包含名称,任务描述、版本、状态（计划中、测试单元编写中、开发中、完成等）。

每个TASK都有验收标准清单和注意事项（提现用户或将来的AI助手需要注意的详细内容）

 

启动测试

Yarn install
Yarn dev

接口统一

@mock @api @CartView.vue @ProductListView.vue 所有的模拟接口必须写到api中，方便后面替换成真实的接口，使用mock变量来控制，是否开启mock数据，api下接口的规范如下

/**

* 接口名称

* 功能描述

* 入参

* 返回参数

* url地址

* 请求方式

**/

使用rules来约束接口的的规范

安装stagewise

在插件市场，搜索stagewise，进行安装

https://github.com/stagewise-io/stagewise

安装完成后，使用快捷键：CMD + Shift + P  打开命令，搜索statewise, 按下enter键可以了

后端开发

先生成前端已经对接的API文档

这一步如果事先有API文档可以不用管

@api 根据当前文件下所有的API文件生成接口文档，放到doc目录中，遵循以下格式：

• 接口名称

• 功能描述: 详细描述接口的功能和用途

• 入参: 参数类型和说明

• param1: type - 参数1说明

• param2: type - 参数2说明

• 返回参数: 返回值类型和说明

• field1: type - 字段1说明

• field2: type - 字段2说明

• url地址: /api/endpoint

• 请求方式: GET/POST/PUT/DELETE

会生成对应的接口文档，将接口文档和需求文档拷贝到后端项目中，开始拆分后端的开发任务

对于后端来说，数据库的设计非常重要，如果你会的话，可以自己设计，然后形成文档

 

拆分后端任务

你是具有丰富开发经验的后端开发工程师，请阅读下的需求和API文档，你需要完成这个产品的后端开发，请你按照你丰富的后端开发经验，拆解出详细的后端开发任务，按照以下格式保存到 doc目录中的任务md文件中。

格式如下：

• 根据开发顺序创建TASK001这样的任务编号；

• 每个任务包含名称,任务描述、版本、状态（计划中、测试单元编写中、开发中、完成等）。

每个TASK都有验收标准清单和注意事项（提现用户或将来的AI助手需要注意的详细内容）

任务描述中不需要返回任何代码示例

 

 

@后端开发任务.md 现在你开始执行任务，每次只能执行一个任务，执行任务完成后需要更新任务状态以及验收清单。功能和接口规范需要跟 @doc 下文档保持一致。 必须是我回复后才能继续下一项任务

六、启动前后端测试

告诉前端后端的服务IP地址，并更改mock未false