AI+云环境开发上线项目全流程（sealos）

AI+云环境开发上线项目全流程

现在是AI技术爆炸💥的时代，我们作为开发自然需要跟上时代的潮流，今天就跟大家介绍一款云开发环境，并且搭配AI实现一行代码不用写，直接上线一个完整的项目（包含前后端）。

• 本次的技术栈，前端采用Vue，后端采用NodeJs
• AI工具选择使用Cursor
• 云开发环境选择使用Devbox，地址：https://hzh.sealos.run/

环境准备

1 cursor下载(AI编程工具)

官网地址：https://www.cursor.com/

进入官网，根据自己操作系统版本下载就好了，因为我这里是mac，所以直接下载mac版本。下载下来之后是一个zip包，解压后，直接双击installer即可安装成功。

2 注册sealos账号(云开发环境)

官方介绍：https://sealos.run/

如果之前没有接触过sealos的同学，可以直接把sealos理解为一个云托管平台，你可以把你的代码、项目都上传上去，他可以帮你部署、管理、发布。

sealos默认是收费的，但是新用户默认送5块钱额度，实名之后会再送10元，对于我们做体验整个流程来说已经足够。

Devbox创建项目+通过Cursor编写代码

创建后端项目

后端我们使用NodeJS

1. 点击devbox，进入项目面板

2. 点击新建NodeJS项目

对应服务的配置以及暴露的端口可以自选：

3. 项目创建好之后，直接使用Cursor打开

需要有Cursor环境：

• 官网地址：https://www.cursor.com/
  进入官网，根据自己操作系统版本下载就好了，因为我这里是mac，所以直接下载mac版本。下载下来之后是一个zip包，解压后，直接双击installer即可安装成功。
  
  效果：
  

4. devbox上新建数据库

我们项目是前后端分离，需要使用数据库。

• 回到devbox主页，点击数据库
  
• 点击新建数据库，选择我们需要的数据库版本及对应配置
  
• 点击部署，等待创建即可
  

编写后端代码

Cursor支持很多大模型，我们可以直接选择其中一个，配合我们的提示词，完成项目的开发。

• 通过command+i/ ctrl +i，打开对话框：
  
• 也可以直接点击右上角按钮，打开对话框：
  
• 点击对话框底部按钮，可切换大模型
  

1 修改prompt提示词

提示词文档地址：https://square-raver-97d.notion.site/cursor-12f9f3b8b57980fbbb52f5106d3a6a00

注意：
1. 下面数据库的配置需要改成自己的devbox数据库的配置，或者自己后面手动修改配置文件也行。

• 进入Sealos主页，点击数据库
• 复制数据库的连接信息
  
  2. 下面服务运行的端口，改为你自己的NodeJS项目对外暴露的端口(我是暴露的3000)

提示词：

请为我开发一个基于 Node.js 和Express 框架的 Todo List 后端项目。项目需要实现以下四个 RESTful API 接口：1. 查询所有待办事项- 接口名: GET /api/get-todo- 功能: 从数据库的'list'集合中查询并返回所有待办事项- 参数: 无- 返回: 包含所有待办事项的数组
2. 添加新的待办事项- 接口名: POST /api/add-todo- 功能: 向'list'集合中添加新的待办事项- 参数:{"value": string, // 待办事项的具体内容"isCompleted": boolean // 是否完成，默认为 false}- 返回: 新添加的待办事项对象，包含自动生成的唯一 id
3. 更新待办事项状态- 接口名: POST /api/update-todo/- 功能: 根据 id 更新指定待办事项的完成状态（将 isCompleted 值取反）- 参数: id- 返回: 更新后的待办事项对象
4. 删除待办事项- 接口名: POST /api/del-todo/- 功能: 根据 id 删除指定的待办事项- 参数: id- 返回: 删除操作的结果状态技术要求：1. 使用 Express 框架构建 API
2. 使用 MongoDB 作为数据库，通过 Mongoose 进行数据操作
3. 实现适当的错误处理和输入验证
4. 使用异步/等待（async/await）语法处理异步操作
5. 遵循 RESTful API 设计原则
6. 添加基本的日志记录功能### 这里数据库连接方式要填写！！！（连接方式需要去sealos数据库模块获取，详情见上文）以下是数据库连接方式：1. 直接以当前目录作为项目根目。注意 此目录已经初始化完了nodejs项目 直接修改即可
2. 如果需要执行命令，请暂停创建文件，让我先执行命令为这个项目中的所有代码写上详细注释

2 将提示词喂给ai

复制提示词到对话框：

查看效果：

• 运行完之后，我们点击Accept，接受它的代码
  
• 可以看到已经创建出了对应目录及文件
  

3 运行后端项目

// 初始化项目
npm init -y
//更改镜像源
npm config set registry https://registry.npmmirror.com
//安装依赖
npm install express mongoose morgan cors
// 启动项目
node app.js

成功运行项目：

4. 让AI编写用例，我们来调试后端接口

①点击详情，查看服务对外暴露网址


②编写对应prompt提示词

下面地址改为自己的服务对外暴露地址即可

提示词：

这是我项目的根地址@https://xxxx.xxx.site/ ，请帮我用curl生成这四个接口的测试用例以及接口成功和不成功的返回值，

接口设计的测试用例及返回值，我们可以新建一个文本保留起来，用于后面前后端联调。

AI生成的对应curl命令：

# 1 添加代办
curl -X POST 'https://dlfjkrgwvokp.sealoshzh.site/api/add-todo' \
-H 'Content-Type: application/json' \
-d '{"value": "学习编程","isCompleted": false
}'# 2 获取所有代办
curl -X GET 'https://dlfjkrgwvokp.sealoshzh.site/api/get-todo'# 3 更新代办（接口后面跟的id需要换成开始添加代办接口时返回的id）
curl -X POST 'https://dlfjkrgwvokp.sealoshzh.site/api/update-todo/67431e1bdedb455f439133f6'# 4 删除代办
curl -X POST 'https://dlfjkrgwvokp.sealoshzh.site/api/del-todo/67431e1bdedb455f439133f6'

5 修改启动脚本

创建前端项目

前端我们使用Vue

1. 点击devbox，进入项目面板

Sealos面板 - devbox - 进入项目面板

2. 新建Vue项目

点击新建Vue项目

• 暴露端口与后端端口一致即可，我这里填写3000。
  

3. Cursor打开创建好的项目

用Cursor打开创建好的前端项目

• 注意：之前用Cursor打开的后端项目不要关闭（后续需要联调）。
  

编写前端代码

1 复制prompt提示词给AI

提示词：

提示词文档地址：https://square-raver-97d.notion.site/cursor-12f9f3b8b57980fbbb52f5106d3a6a00

请为我开发一个基于 Vue 3 的Todo List 应用。要求如下：1. 功能需求：- 添加新的待办事项- 标记待办事项为完成/未完成- 删除待办事项- 统计待办事项完成度- 过滤显示（全部/已完成/未完成）
2. UI/UX 设计要求：- 全屏响应式设计，适配不同设备- 拥有亮色模式和夜间模式- 现代化、简洁的界面风格- 丰富的色彩运用，但保持整体和谐- 流畅的交互动画，提升用户体验- 在按钮和需要的地方添加上图标- 参考灵感：结合苹果官网的设计美学要求：1. 直接以当前目录作为项目根目。注意 此目录已经初始化完了vue3项目结构 直接修改即可
2. 如果需要执行命令，请暂停创建文件，让我先执行命令
3. 请你根据我的需要，一步一步思考，给我开发这个项目。特别是UI部分 一定要足够美观和现代化

2 command+i打开对话框，将提示词喂给AI

执行过程中，可能需要我们手动安装依赖

# 修改镜像源
npm config set registry https://registry.npmmirror.com
# 安装依赖
npm install @vueuse/core @heroicons/vue tailwindcss postcss autoprefixer

3 运行前端项目

• 鼠标右键 - 打开终端：
  
• 执行npm run dev 运行前端项目
  

效果：

4. 修改启动脚本

1. 修改entrypoint
   
2. 修改package.json
   

前后端对接

1. 修改前端JS代码，向后端发请求

现在我们已经写好了前后端代码，剩下的就是调整前端代码进行联调了。复制我们开始让Cursor给我们写好的测试用例到对话框。

# 提示词+开始我们复制好的后端接口测试用例
下面是关于这个todolist的四个接口，我已经写清楚接口信息，请你完成接口的对接工作：

点击Accept All接受所有。

2. 查看效果

查看前端公网地址，在浏览器中输入地址进行访问：

部署项目

发布后端

1. 进入后端项目，点击详情
   
2. 点击发版
   
3. 填写发版内容，点击发布
   

上线后端

1. 发版成功后，会有对应后端版本，点击上线
   
2. 修改上线配置，点击部署应用
   
3. 状态为running，代表上线成功
   

发布前端

1. 获取后端接口URL并更新

• 更新URL
  

2. 重新运行前端，执行npm run dev运行项目，观察能否调通
   
   

3. 点击发布版本
   

4. 编写版本信息
   

5. 点击发版

• 出现提示，我们直接确认
  

• 发版过程中，机器会重启，cursor会与远程服务断开连接，我们这里直接点击cancel
  

上线前端

• 发布成功后，会出现对应版本的镜像，我们点击上线即可
  

• 修改上线配置
  
• 点击部署应用，等待上线
• 状态为running，代表上线成功

最终效果

1. 查看应用管理
   
   

2. 获取前端上线后的链接
   

3. 查看效果，进行测试
   

参考文档：

• https://square-raver-97d.notion.site/cursor-12f9f3b8b57980fbbb52f5106d3a6a00
• https://segmentfault.com/a/1190000045349478