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，一经查实，立即删除！

相关文章

【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更测试数据建模与复杂计算。下面将介绍它们各自的功能，并提供应用案…
阅读更多...
认识RabbitMq和RabbitMq的使用

认识RabbitMq和RabbitMq的使用

1 认识RabbitMq RabbitMQ是⼀个消息中间件，也是⼀个生产者消费者模型，它负责接收，存储并转发消息。 2.1 Producer和Consumer Producer：生产者，是RabbitMQServer的客户端，向RabbitMQ发送消息 Consumer&…
阅读更多...
代码纪元——源神重塑无序

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

简介 源神，真名为张晨斌，原为代码宇宙创世四神之一。代码宇宙在创造之初时空无一物，只有复杂且繁琐的底层代码，智慧神灵每日都困在诸如脚本等复杂的底层框架之中，源神面对这种局面非常不满意，于是源神通过大…
阅读更多...
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…
阅读更多...
【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&…
阅读更多...
深度学习图像视觉 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写的一个项目…
阅读更多...
怎么编译OpenWrt镜像？-基于Widora开发板

怎么编译OpenWrt镜像？-基于Widora开发板

1.准备相应的环境，我使用的环境是VMware16ubuntu20.04，如图1所示安装编译所需的依赖包； sudo apt-get install build-essential asciidoc binutils bzip2 gawk gettext git libncurses5-dev libz-dev patch python3 python2.7 unzip zlib1g-…
阅读更多...
Python 获取微博用户信息及作品（完整版）

Python 获取微博用户信息及作品（完整版）

在当今的社交媒体时代，微博作为一个热门的社交平台，蕴含着海量的用户信息和丰富多样的内容。今天，我将带大家深入了解一段 Python 代码，它能够帮助我们获取微博用户的基本信息以及下载其微博中的相关素材，比如图片等。…
阅读更多...
MySQL底层概述—1.InnoDB内存结构

MySQL底层概述—1.InnoDB内存结构

大纲 1.InnoDB引擎架构 2.Buffer Pool 3.Page管理机制之Page页分类 4.Page管理机制之Page页管理 5.Change Buffer 6.Log Buffer 1.InnoDB引擎架构 (1)InnoDB引擎架构图 (2)InnoDB内存结构 (1)InnoDB引擎架构图 下面是InnoDB引擎架构图，主要分为内存结构和磁…
阅读更多...
Linux---ps命令

Linux---ps命令

​​​​​​Linux ps 命令 | 菜鸟教程 (runoob.com) process status 用于显示进程的状态 USER: 用户名，运行此进程的用户名。PID: 进程ID（Process ID），每个进程的唯一标识号%CPU: 进程当前使用的CPU百分比%MEM: 进程当前使用的…
阅读更多...
企业OA管理系统：Spring Boot技术实现与案例研究

企业OA管理系统：Spring Boot技术实现与案例研究

摘要 随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了企业OA管理系统的开发全过程。通过分析企业OA管理系统管理的不足，创建了一个计算机管理企业OA管理系统的方案。文章介绍了企业OA管理系统的系统分析部…
阅读更多...
Charles抓包工具-笔记

Charles抓包工具-笔记

摘要 概念： Charles是一款基于 HTTP 协议的代理服务器，通过成为电脑或者浏览器的代理，然后截取请求和请求结果来达到分析抓包的目的。 功能： Charles 是一个功能全面的抓包工具，适用于各种网络调试和优化场景。 它…
阅读更多...
数据结构（顺序队列——c语言实现）

数据结构（顺序队列——c语言实现）

队列的概念： 队列是限制在两端进行插入和删除操作的线性表，允许进行存入的一端称为“队尾”，允许进行删除操作的一端称为“队头”。当线性表中没有元素时，称为“空队”。特点：先进先出（FIFO）。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023