项目
博客
文档
归档
资源链接
关于我
项目
博客
文档
归档
资源链接
关于我
Cousor+Devbox
2025-03-09
·
·
原创
·
AI大模型
·
本文共 1,343个字，预计阅读需要 5分钟。
今天无意间了解到Cursor利Devbox两大开发神器，初步尝试以后发现确实能够大幅度提升开发效率，特此想要整理成博客以供大家快速入门. 简单理解Cursor就是一款结合AI大模型的代码编辑器，你可以将自己的思路告诉Al，剩下的目录结构的搭建以及项自代码的实现均由AI帮你完成 Devbox则是一款集成开发环境（各种开发语言）、测试、生产部署的云平台，在上面你可以快速创建你想要的数据库（MySQL、Redis、MongoDB)，更重要的是你可以在上面初始化各种类型的项目（如SpringBoot、Django、React、Vue）并配合Cursor编辑器快速在本地完成开发 #### Sealos云环境使用 数据库配置 > Sealos官方网站：https://hzh.sealos.run/ 首先可以在Sealos应用平台中找到数据库应用，选择新建数据库即可进行自定义配置 创建完成后可以在详情左下角找到对应的数据库连接地址：（后续编写后端代码时需要用到） 后端代码开发 后端项目创建 首先可以在Sealos应用平台中找到devbox应用，选择新建项目即可进行自定义项目初始化 ``` ``` 此处后端项目就选择Nodejs语言的Express.js框架进行初始化，还要注意后端项目的启动端口号设置为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. 遵循RESTfuIAPI设计原则 以下是数据库连接方式：mongodb://root:8j7n8pkc@test-db-mongodb.ns-ac6d719o.svc:27017 1. 直接以当前目录作为项目根目。注意此目录已经初始化完了nodejs项目直接修改即可 2. 如果需要执行命令，请暂停创建文件，让我先执行命令 为这个项目中的所有代码写上详细注释 > mongodb安装文档： https://blog.csdn.net/weixin_44799217/article/details/127940726 这个是根地址http://127.0.0.1:3000，请生成这4个接口的测试用例及返回值 ```sh # 1. 获取所有待办事项 # 请求 curl http://127.0.0.1:3000/api/get-todo # 预期返回值 [ { "_id": "65f2a1234b678c9876543210", "value": "完成项目文档", "isCompleted": false, "createdAt": "2024-03-14T08:30:00.000Z" }, { "_id": "65f2a1234b678c9876543211", "value": "开发新功能", "isCompleted": true, "createdAt": "2024-03-14T07:30:00.000Z" } ] # 2. 添加新的待办事项 # 请求 curl -X POST http://127.0.0.1:3000/api/add-todo \ -H "Content-Type: application/json" \ -d '{"value": "学习Node.js", "isCompleted": false}' # 预期返回值 { "_id": "65f2a1234b678c9876543212", "value": "学习Node.js", "isCompleted": false, "createdAt": "2024-03-14T09:00:00.000Z" } #3. 更新待办事项状态 # 请求 curl -X POST http://127.0.0.1:3000/api/update-todo/65f2a1234b678c9876543212 # 预期返回值 { "_id": "65f2a1234b678c9876543212", "value": "学习Node.js", "isCompleted": true, "createdAt": "2024-03-14T09:00:00.000Z" } #4. 删除待办事项 # 请求 curl -X POST http://127.0.0.1:3000/api/del-todo/65f2a1234b678c9876543212 # 预期返回值 { "message": "删除成功", "todo": { "_id": "65f2a1234b678c9876543212", "value": "学习Node.js", "isCompleted": true, "createdAt": "2024-03-14T09:00:00.000Z" } } ``` #### 前端代码开发 新建一个项目devbox-vue，暴露端口3000 #### 前端提示词 请为我开发一个基于Vue3的Todo List应用。要求如下： 1. 功能需求： - 添加新的待办事项 - 标记待办事项为完成/未完成。 - 删除待办事项。 - 统计待办事项完成度。 - 过滤显示（全部/已完成/未完成） 2. UI/UX设计要求： - 全屏响应式设计，适配不同设备。 - 拥有亮色模式和夜间模式 - 现代化、简洁的界面风格 - 丰富的色彩运用，但保持整体和谐。 - 流畅的交互动画，提升用户体验。 - 在按钮和需要的地方添加上图标。 - 全局通用的鼠标悬停和选中的地方添加色彩主题(蓝色/橙色...),可选按钮或下拉可选 - 参考灵感：结合苹果官网的设计美学 要求： - 直接以当前目录作为项目根目。注意此目录已经初始化完了vue3项目结构直接修改即可 - 如果需要执行命令，请暂停创建文件，让我先执行命令 - 请你根据我的需要，一步一步思考，给我开发这个项目。特别是U部分一定要足够美观和现代化 那这里总结一下我们用cursor完成了前端代码的开发我们就是发送提示词写清楚我们的需求以及出现问题或者想调整功能和UI继续用文字和他持续沟通即可 ``` npm uninstall tailwindcss npm install tailwindcss@3 npx tailwindcss init -p ``` #### 对接接口 将上面的接口信息复制到chat. 在chat窗口中输入：下面是关于todoList的4个接口，请完成接口对接工作。 请添加后端跨域功能 ### 导航提示词 请为我开发一个基于html和css的导航页面应用。使用jquery。要求如下： 1. UI/UX设计要求： - 全屏响应式设计，适配不同设备。 - 拥有亮色模式和夜间模式 - 现代化、简洁的界面风格 - 丰富的色彩运用，但保持整体和谐。 - 流畅的交互动画，提升用户体验。 - 在按钮和需要的地方添加上图标。 - 全局通用的鼠标悬停和选中的地方添加色彩主题(蓝色/橙色...),可选按钮或下拉可选 - 参考灵感：结合苹果官网的设计美学 2. 页面布局功能需求： - 顶部导航： - 左边是网站logo和网站名称，中间是搜索框/搜索图标，右边是：QQ及图标、微信公众号及图标、码云及图标。QQ和微信公众号在鼠标悬停时，展示二维码；码云点击可跳转到gitee； - 在往下是一个分割线 - 在下面是导航一级分类：全部、建设中心、学习平台、工具平台、开发社区....。点击不同的分类，下面展示不同分类的导航数据。右边是一个定位：图标 xx-xx-xx => 中国-香港 - 内容部分： - 按分类来：一级分类，加粗，添加样式区分；接着是它下面的二建分类；最右边是：更多。点击一级分类或者更多后，内容部分刷新，此时所有的二级分类再这一级当一级分类，没有二建分类。 - 下面就是每个卡片导航：图标、名称、简介。点击后可跳转到对应网站 - 页脚部分：备案信息: © 2020 VirtualAgent [蜀ICP备xxx号](https://beian.miit.gov.cn/) , 可以再丰富一些，设计好。 优化1： - 导航栏比较单调空旷，再丰富一下；搜索框可以变小一点 - 一二级分类数据需要通过JS动态加载 - 点击更多之后，新页面中的返回按钮需要设计一下样式和位置 - 增加卡片无图时的样式设计 - 点击导航中的一级分类后，当内容区域高度比较小时，下面的页脚没有落到页面底部，底部还有一块高度的空白区域 - 内容区域宽度再调整小一点 - 卡片中部分右上角增加火热图标 优化2： - 去掉导航中的：首页、收藏、分类、设置 - 根据卡片尺寸调整，当导航的名称和简介超过最大字数时，默认追加...，鼠标悬停展示完整内容 - 页脚要兼容两种情况在页面最底部：内容区高度较小时，页脚需要在当前页面最底部；当内容区域超过当前页，需要右滑动时，页脚要在滑动到最底部时的底部。 - 卡片中部分右上角再增加联网图标 优化3&接口联调： - 导航宽度再调整小一点 - 卡片中部分右上角增加的联网图标跟热门图标一样靠最右上角，如果都存在，按顺序从最右到左排列 - 接口说明：请完成接口对接工作 - 查询所有分类及数据和位置接口： - https://www.blog.cn/new_nav 返回所有的一级二级分类和导航数据和位置接口 ```json { "code": 200, "data": { "navList": [ { "id": 1, "leafNavList": [ { "href": "https://www.blog.cn/blog/", "imageUrl": "./img/blog.png", "navDesc": "用于分享与计算机编程技战术相关的笔记，文档，教程，课程以及实战项目", "parentId": 1, "rel": "blog_center", "tag": "hot", "title": "站点博客", "type": 0 } ], "rel": "seo-center", "tags": [], "title": "建站中心" }, { "id": 2, "leafNavList": [ { "href": "https://zhida.zhihu.com/", "imageUrl": "https://pica.zhimg.com/v2-79e835d86b026c7c499de99d49906814.png", "navDesc": "欢迎进入 知乎直答", "parentId": 2, "rel": "zhida", "tag": "hot", "title": "知乎搜索", "type": 0 }, { "href": "https://chat.deepseek.com/", "imageUrl": "https://cdn.deepseek.com/chat/icon.png", "navDesc": "我是 DeepSeek，很高兴见到你！", "parentId": 2, "rel": "deepseek", "tag": "hot", "title": "deepseek", "type": 0 }, { "href": "https://www.blackbox.ai/", "imageUrl": "https://www.blackbox.ai/favicon.ico", "navDesc": "Ask Blackbox AI Anything", "parentId": 2, "rel": "blackbox", "tag": "hot", "title": "blackbox", "type": 0 } ], "rel": "self-learn", "tags": [ { "id": 9, "parentId": 2, "rel": "aigc-source", "title": "AIGC资源" }, { "id": 10, "parentId": 2, "rel": "ai-speak", "title": "AI对话" }, { "id": 14, "parentId": 2, "rel": "ai_search", "title": "AI搜索" }, { "id": 17, "parentId": 2, "rel": "tishiciz", "title": "提示词资源" } ], "title": "学习平台" } ], "region": "中国|0|河北省|石家庄市|联通" }, "msg": "" } ``` 说明： - code: 状态码；200-成功 - data：数据 - region：位置。需要填充到导航栏的定位位置 - navList：导航数据集合 - rel：一级分类代码 - title： 一级分类名称 - tags：一级分类下所有的二级分类标签 - rel： 二级分类代码 - title：二级分类名称 - leafNavList：二级分类下的导航数据集合 - href：跳转地址 - imageUrl：图标 - navDesc：描述 - rel：代码 - tag：hot - 火热，out- 联网 - title：名称 - type： 0-有图标，1-无图标 - 搜索查询： https://www.blog.cn/new_nav?k=xx ```json { "code": 200, "data": { "navList": [ { "leafNavList": [ { "href": "https://hailuoai.com/?", "imageUrl": "https://hailuoai.com/assets/logo/favicon.png", "navDesc": "是 MiniMax 基于通用大模型为用户打造的AI伙伴，可以帮你分析财报、速读长文、创作文案、智能搜索等、拍照答疑等等，也支持语音通话。10倍速获取信息、10倍速解决问题。有问题，找海螺AI", "rel": "hailuo", "tag": null, "title": "海螺", "type": 0 }, { "href": "https://web.virtualagent.cn/bf33750a6a", "imageUrl": "./img_bak/1panel.png", "navDesc": "Linux 服务器运维管理面板", "rel": "1Panel", "tag": null, "title": "1Panel", "type": 0 }, { "href": "https://www.ai138.com/", "imageUrl": "https://cdn.ai138.com/wp-content/uploads/2024/07/1722234402-1722234402-A111.png", "navDesc": "AI工具网是专业的AI工具导航平台", "rel": "ai138", "tag": null, "title": "Ai138", "type": 0 } ], "rel": "py-search", "tags": [], "title": "搜索结果" } ], "region": "中国|0|河北省|石家庄市|联通" }, "msg": "" } ``` 按照二级分类代码查询： https://www.blog.cn/new_nav?rel=xx ```json { "code": 200, "data": { "navList": [ { "id": 19, "leafNavList": [ { "href": "https://theme-hope.vuejs.press/zh/", "imageUrl": "https://theme-hope-assets.vuejs.press/icon/chrome-mask-512.png", "navDesc": "一个具有强大功能的 vuepress 主题", "parentId": 19, "rel": "Vuepress-Hope", "tag": "hot", "title": "Vuepress-Hope", "type": 0 }, { "href": "https://doc.xugaoyi.com/", "imageUrl": "https://doc.xugaoyi.com/img/favicon.ico", "navDesc": "一款简洁高效的VuePress 知识管理&博客 主题", "parentId": 19, "rel": "Vuepress-Vdoing", "tag": "hot", "title": "Vuepress-Vdoing", "type": 0 }, { "href": "https://github.com/auroral-ui/hexo-theme-aurora", "imageUrl": "./img_bak/github.ico", "navDesc": "使用极光颜色和 UI 元素的下一代主题", "parentId": 19, "rel": "HexoAurora", "tag": "hot", "title": "Hexo Aurora", "type": 0 }, { "href": "https://github.com/jerryc127/hexo-theme-butterfly", "imageUrl": "./img_bak/github.ico", "navDesc": "一个为 Hexo 打造的简洁、漂亮、快速的主题", "parentId": 19, "rel": "Butterfly", "tag": "hot", "title": "Butterfly", "type": 0 } ], "rel": "doc_template", "tags": [], "title": "文档博客" } ], "region": "中国|0|河北省|石家庄市|联通" }, "msg": "" } ``` ### 个人简历提示词 请为我开发一个基于html和css的个人简历页面应用。使用jquery。要求如下： 1. UI/UX设计要求： - 全屏响应式设计，适配不同设备。 - 拥有亮色模式和夜间模式 - 现代化、简洁的界面风格 - 丰富的色彩运用，但保持整体和谐。 - 流畅的交互动画，提升用户体验。 - 在按钮和需要的地方添加上图标。 - 全局通用的鼠标悬停和选中的地方添加色彩主题(蓝色/橙色...),可选按钮或下拉可选 - 参考灵感：结合苹果官网的设计美学 2. 内容要求： - 个人是做开发业务的，主要包含java、python、ai大模型相关的 - 做个的业务主要有：银行-app金融超市/贷款，支付-聚合/银联支付，保险-人保健康，电商-飞鹤奶粉、金融-基金/AIGC - 根据个人介绍、专业技能，教育背景、工作经历、项目经历、个人评价、项目作品介绍几个方面来设计 ### 资料员&行政文员个人简历提示词 请为我开发一个基于html和css的个人简历页面应用。使用jquery。要求如下： 1. UI/UX设计要求： - 全屏响应式设计，适配不同设备。 - 拥有亮色模式和夜间模式 - 现代化、简洁的界面风格 - 丰富的色彩运用，但保持整体和谐。 - 流畅的交互动画，提升用户体验。 - 在按钮和需要的地方添加上图标。 - 全局通用的鼠标悬停和选中的地方添加色彩主题(蓝色/橙色...),可选按钮或下拉可选 - 参考灵感：结合苹果官网的设计美学 2. 内容要求： - 个人是做资料员&行政文员，主要是做施工招投标资料相关的业务，公司行政，公司人员的维护延期 - 在两个公司工作过，第一家2年，第二家8年 - 根据个人介绍、专业技能，工作经历、项目经历、个人评价几个方面来设计 补充： - 个人信息：姓名、性别、年龄、邮箱、工作年限、地址 - 工作内容补充：公司证据管理，营业执照的开办变更，资质的延期维护，劳务资质/安全资质许可证的延期维护，建筑类注册人员的新办、注册、延期、继续教育 - 丰富一下内容 - 支持导出，使用按钮可以一建导出整个页面内容 优化： - 导出文档存在问题，导出页面内容断续的，同时生成了有加载的状态 - 修改工作经历的样式为卡片水平排列