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
    在这里插入图片描述

  1. 重新运行前端，执行npm run dev运行项目，观察能否调通
    在这里插入图片描述
    在这里插入图片描述

  2. 点击发布版本
    在这里插入图片描述

  3. 编写版本信息
    在这里插入图片描述

  4. 点击发版

  • 出现提示，我们直接确认
    在这里插入图片描述
  • 发版过程中，机器会重启，cursor会与远程服务断开连接，我们这里直接点击cancel
    在这里插入图片描述

上线前端

  • 发布成功后，会出现对应版本的镜像，我们点击上线即可
    在这里插入图片描述
  • 修改上线配置
    在这里插入图片描述
  • 点击部署应用，等待上线
  • 状态为running，代表上线成功在这里插入图片描述

最终效果

  1. 查看应用管理
    在这里插入图片描述
    在这里插入图片描述

  2. 获取前端上线后的链接
    在这里插入图片描述

  3. 查看效果，进行测试
    在这里插入图片描述

参考文档：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/61914.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

打造智能扩容新纪元：Kubernetes Custom Metrics深度解析

打造智能扩容新纪元：Kubernetes Custom Metrics深度解析

自定义指标：Kubernetes Auto Scaling的革命 1. 引言 1.1 Kubernetes与Auto Scaling Kubernetes作为当今容器编排的事实标准，提供了强大的自动化能力，其中Auto Scaling（自动扩缩容）是其核心特性之一。Auto Scaling允许Kubernetes集群根据当前负载动态调整资源，以应对不…
阅读更多...
python学习笔记（12）算法（5）迭代与递归

python学习笔记（12）算法（5）迭代与递归

一、迭代 迭代（iteration）是一种重复执行某个任务的控制结构。在迭代中，程序会在满足一定的条件下重复执行某段代码，直到这个条件不再满足。 迭代通常用于解决需要逐步推进的计算问题，例如遍历数组、计算阶乘等。迭代…
阅读更多...
【C++11】可变参数模板/新的类功能/lambda/包装器--C++

【C++11】可变参数模板/新的类功能/lambda/包装器--C++

文章目录 一、可变参数模板1、基本语法及原理2、包扩展3、empalce系列接口 二、新的类功能1、默认的移动构造和移动赋值2、成员变量声明时给缺省值3、defult和delete4、final与override 三、STL中一些变化四、lambda1、lambda表达式语法2、捕捉列表3、lambda的应用4、lambda的原…
阅读更多...
STM32C011开发(1)----开发板测试

STM32C011开发(1)----开发板测试

STM32C011开发----1.开发板测试 概述硬件准备视频教学样品申请源码下载参考程序生成STM32CUBEMX串口配置LED配置堆栈设置串口重定向主循环演示 概述 STM32C011F4P6-TSSOP20 评估套件可以使用户能够无缝评估 STM32C0 系列TSSOP20 封装的微控制器功能，基于 ARM Corte…
阅读更多...
算法编程题-寻找最近的回文数

算法编程题-寻找最近的回文数

算法编程题-寻找最近的回文数 原题描述思路简述代码实现复杂度分析参考 摘要：本文将对LeetCode 原题 564 寻找最近的回文数进行讲解，并且给出golang语言的实现，该实现通过了所有测试用例且执行用时超过100%的提交，最后给出相关的复…
阅读更多...
提升数据分析效率：Excel Power Query和Power Pivot的妙用

提升数据分析效率：Excel Power Query和Power Pivot的妙用

在日常工作中，微软的Excel Power Query和Power Pivot是提升数据处理和分析效率的利器。他们的特点也各不相同，Power Query侧重数据的高效导入与清洗，Power Pivot更测试数据建模与复杂计算。下面将介绍它们各自的功能，并提供应用案…
阅读更多...
在 Spring Boot 中实现多种方式登录（用户名、手机号、邮箱等）的不正经指南

在 Spring Boot 中实现多种方式登录（用户名、手机号、邮箱等）的不正经指南

欢迎来到一场技术与幽默交织的冒险！今天，我们将跳进 Spring Boot 的世界，探索如何通过 用户名、手机号、邮箱 等多种方式实现登录。想象一下，用户在登录时可以随心所欲地选择——就像你今天早上纠结到底是要喝美式咖啡还是拿铁&am…
阅读更多...
认识RabbitMq和RabbitMq的使用

认识RabbitMq和RabbitMq的使用

1 认识RabbitMq RabbitMQ是⼀个消息中间件，也是⼀个生产者消费者模型，它负责接收，存储并转发消息。 2.1 Producer和Consumer Producer：生产者，是RabbitMQServer的客户端，向RabbitMQ发送消息 Consumer&…
阅读更多...
性能测试及调优

性能测试及调优

一、性能测试介绍 1、什么叫做性能测试？ （1）通过某些工具或手段来检测软件的某些指标是否达到了要求，这就是性能测试 （2）指通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指…
阅读更多...
代码纪元——源神重塑无序

代码纪元——源神重塑无序

简介 源神，真名为张晨斌，原为代码宇宙创世四神之一。代码宇宙在创造之初时空无一物，只有复杂且繁琐的底层代码，智慧神灵每日都困在诸如脚本等复杂的底层框架之中，源神面对这种局面非常不满意，于是源神通过大…
阅读更多...
LVGL加载器，led和列表学习（基于正点原子）

LVGL加载器，led和列表学习（基于正点原子）

加载器部件（lv_spinner） 加载器部件常用于提示当前任务正在加载。 加载器部件组成部分： 主体(LV_PART_MAIN) 指示器(LV_PART_INDICATOR) 手柄(LV_PART_KNOB) 知识点1：创建加载器部件 lv_obj_t *spinner lv_spinner_creat…
阅读更多...
内存不足引发C++程序闪退崩溃问题的分析与总结

内存不足引发C++程序闪退崩溃问题的分析与总结

目录 1、内存不足一般出现在32位程序中 2、内存不足时会导致malloc或new申请内存失败 2.1、malloc申请内存失败，返回NULL 2.2、new申请内存失败，抛出异常 3、内存不足项目实战案例中相关细节与要点说明 3.1、内存不足导致malloc申请内存失败&#…
阅读更多...
docker搭建私有的仓库

docker搭建私有的仓库

docker搭建私有仓库 一、为什么要搭建私有的仓库？ 因为在国内，访问：https://hub.docker.com/ 会出现无法访问页面。。。。（已经使用了魔法） 当然现在也有一些国内的镜像管理网站，比如网易云镜像服务、Dao…
阅读更多...
Http 转 https 中 Nginx 的详细配置过程

Http 转 https 中 Nginx 的详细配置过程

摘要 本节将简要介绍从 HTTP 到 HTTPS 的配置过程，并完整展示 Nginx 的相关配置信息。 经过两天断断续续的调试，终于将 http 变成 https 了。现在说说这个安装 ssl 证书的过程。 服务器是在某云上。这个过程大致分为三个步骤：申请 ssl 证书、…
阅读更多...
神经网络12-Time-Series Transformer (TST)模型

神经网络12-Time-Series Transformer (TST)模型

Time-Series Transformer (TST) 是一种基于 Transformer 架构的深度学习模型，专门用于时序数据的建模和预测。TST 是 Transformer 模型的一个变种，针对传统时序模型（如 RNN、LSTM）在处理长时间依赖、复杂数据关系时的限制而提出的…
阅读更多...
【Linux】安装cuda

【Linux】安装cuda

一、安装nvidia驱动 # 添加nvidia驱动ppa库 sudo add-apt-repository ppa:graphics-drivers/ppa sudo apt update# 查找推荐版本 sudo ubuntu-drivers devices# 安装推荐版本 sudo apt install nvidia-driver-560# 检验nvidia驱动是否安装 nvidia-smi 二、安装cudatoolkit&…
阅读更多...
go-web项目通用脚手架

go-web项目通用脚手架

前言 构建go-web项目时，在编写业务逻辑代码之前，还需搭建脚手架（框架）：进行编写配置文件、整合web框架（gin框架）和数据库框架（sqlx）等，搭建脚手架的过程就类…
阅读更多...
深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录

深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录

深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录 认识RKNN Toolkit2 工程文件学习路线： Anaconda Miniconda安装.condarc 文件配置镜像源自定义conda虚拟环境路径创建Conda虚拟环境 本地训练环境本地转换环境安装 RKNN-Toolkit2：添加 lin…
阅读更多...
论文模型设置与实验数据：scBERT

论文模型设置与实验数据：scBERT

Yang, F., Wang, W., Wang, F. et al. scBERT as a large-scale pretrained deep language model for cell type annotation of single-cell RNA-seq data. Nat Mach Intell 4, 852–866 (2022). https://doi.org/10.1038/s42256-022-00534-z 论文地址：scBERT as a…
阅读更多...
Jenkins的环境部署

Jenkins的环境部署

day22 回顾 Jenkins 简介 官网Jenkins Jenkins Build great things at any scale The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project. 用来构建一切 其实就是用Java写的一个项目…
阅读更多...
最新文章

Copyright @ 2022~2023