最近有公司询问是否有cuosor的使用经历,正好把之前用cursor开发全栈小程序的操作复习下,做个图文指导发出来供大家参考学习。
1.开发工具准备
2.小程序前端开发
3.数据库设计
4.管理员面板开发
1.开发工具准备
a.安装Hbuilder X
HBuilderX 是一款由 DCloud 推出的轻量级但功能强大的集成开发环境(IDE),主要用于前端开发和跨平台应用开发。它支持 HTML、CSS、JavaScript 等前端技术,同时也支持 Vue、React 等主流框架,特别适合开发微信小程序、UniApp 等项目。
官网:www.dcloud.io/hbuilderx.h…
b.安装微信开发者工具
微信开发者工具是开发微信小程序的必备工具,可从微信官网下载安装。安装时选择默认设置即可。
安装完成后,打开工具并使用微信扫码登录,确保工具能够正常运行。
官网:developers.weixin.qq.com/miniprogram…
c.安装Cursor (DeepSeek辅助开发编辑器)
Cursor 是一款基于 VS Code 的智能代码编辑器,内置 AI 辅助编程功能,支持 Python、JavaScript、TypeScript、Go 等多种语言。其 AI 助手可帮助生成代码、修复错误、优化逻辑,显著提升开发效率,是开发者的高效工具。
官网:www.cursor.com/cn
2.小程序前端开发
打开HBuilderX,选择创建项目,具体选项如下
打开Cursor,切换ai模型,选择deepseek
通过输入需求,deepseek就会根据输入内容进行开发
这里以创建一个用户意见反馈表单小程序为例子
等deepseek生成后就会出现这样的界面
我们可以通个这个界面确认本次生成的具体内容和代码
确认无误后就可以点击确认应用
更新后的效果如图
通常一个生成并不能达到我们想要的效果,这时候可以继续向deepseek表达要求,调整更新:
比如“美化下整个页面的UI设计。表格溢出屏幕了,请修复。添加圆角和多种颜色渐变的效果,风格要求简约自然,颜色协调统一。”
最后调整的效果如图
下一步需要把我们前端小程序关联云服务空间
登录账户后新建服务空间,选择新购阿里云的免费服务空间,新购成功后回到服务空间列表页,等状态显示为正常即可以使用
创建成功后选择对应的服务空间进行关联
至此前端小程序就与服务空间绑定关联成功
3.数据库设计
在Cursor的composer输入:
“在 @cloudfunctions 中创建一个unicloud云函数,并在 @database 中创建一个 feedback.schema.json的文件,向unicloud云数据库中传送用户的姓名,联系方式和反馈内容,请在已有文件夹中直接创建,不要重复创建cloudfunctions文件夹”
通过deepseek帮我们创建函数和数据库文件
确认文件生成位置正确后,将新生成的文件上传部署至服务空间中
部署成功后我们可以通过web控制台查看我们新建的数据库信息
通过微信开发者工具可以模拟操作用户信息反馈,提交反馈后可在服务空间数据库中查询收录信息
4.管理员面板开发
回到HBuilderX中,新建项目,具体选择如下
后台管理员面板关联服务空间后
同步服务空间的函数和数据库信息,选择覆盖和全部替换
最后一步需要我们将数据表文件转换生成成对应代码,根据图示操作
完成后我们就可以在此看到后台管理员面板了,第一次登录的话需要新注册管理员账号
注册账号后,登陆,管理员界面就是这样的
为了更方便我们查看获取的数据,需要我们放出列表菜单
成功后即可在刚刚创建的菜单下看到我们获取到的数据了
总结:
·Deepseek 提供了丰富的工具和框架支持,能够显著提升开发效率,减少重复性工作,缩短项目周期,适合快速迭代的开发需求
·通过一套代码即可在多个平台(如微信、支付宝、H5 等)运行,减少了重复开发的工作量,节省了人力和时间成本。
·拥有活跃的开发者社区,提供了大量的学习资源、解决方案和最佳实践,能够帮助开发者快速解决问题,降低学习门槛。