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. 修改启动脚本
- 修改entrypoint
- 修改package.json
前后端对接
1. 修改前端JS代码，向后端发请求
现在我们已经写好了前后端代码，剩下的就是调整前端代码进行联调了。复制我们开始让Cursor给我们写好的测试用例到对话框。
# 提示词+开始我们复制好的后端接口测试用例
下面是关于这个todolist的四个接口，我已经写清楚接口信息，请你完成接口的对接工作：
点击Accept All接受所有。
2. 查看效果
查看前端公网地址，在浏览器中输入地址进行访问：
部署项目
发布后端
- 进入后端项目，点击详情
- 点击发版
- 填写发版内容，点击发布
上线后端
- 发版成功后，会有对应后端版本，点击上线
- 修改上线配置，点击部署应用
- 状态为running，代表上线成功
发布前端
- 获取后端接口URL并更新
- 更新URL
-
重新运行前端，执行npm run dev运行项目，观察能否调通
-
点击发布版本
-
编写版本信息
-
点击发版
- 出现提示，我们直接确认
- 发版过程中，机器会重启，cursor会与远程服务断开连接，我们这里直接点击cancel
上线前端
- 发布成功后，会出现对应版本的镜像，我们点击上线即可
- 修改上线配置
- 点击部署应用，等待上线
- 状态为running，代表上线成功
最终效果
-
查看应用管理
-
获取前端上线后的链接
-
查看效果，进行测试
参考文档：
- https://square-raver-97d.notion.site/cursor-12f9f3b8b57980fbbb52f5106d3a6a00
- https://segmentfault.com/a/1190000045349478