【AI】DeepSeek开发全栈小程序操作指引

0 阅读4分钟

最近有公司询问是否有cuosor的使用经历,正好把之前用cursor开发全栈小程序的操作复习下,做个图文指导发出来供大家参考学习。

1.开发工具准备
2.小程序前端开发
3.数据库设计
4.管理员面板开发

1.开发工具准备
a.安装Hbuilder X
HBuilderX 是一款由 DCloud 推出的轻量级但功能强大的集成开发环境(IDE),主要用于前端开发和跨平台应用开发。它支持 HTML、CSS、JavaScript 等前端技术,同时也支持 Vue、React 等主流框架,特别适合开发微信小程序、UniApp 等项目。
官网:www.dcloud.io/hbuilderx.h…
image b.安装微信开发者工具
微信开发者工具是开发微信小程序的必备工具,可从微信官网下载安装。安装时选择默认设置即可。
安装完成后,打开工具并使用微信扫码登录,确保工具能够正常运行。
官网:developers.weixin.qq.com/miniprogram…
image

c.安装Cursor (DeepSeek辅助开发编辑器)
Cursor 是一款基于 VS Code 的智能代码编辑器,内置 AI 辅助编程功能,支持 Python、JavaScript、TypeScript、Go 等多种语言。其 AI 助手可帮助生成代码、修复错误、优化逻辑,显著提升开发效率,是开发者的高效工具。
官网:www.cursor.com/cn
image

2.小程序前端开发
打开HBuilderX,选择创建项目,具体选项如下
image

image

image

image

打开Cursor,切换ai模型,选择deepseek
image

image

通过输入需求,deepseek就会根据输入内容进行开发

这里以创建一个用户意见反馈表单小程序为例子
image

等deepseek生成后就会出现这样的界面

我们可以通个这个界面确认本次生成的具体内容和代码

确认无误后就可以点击确认应用

image

更新后的效果如图
image

通常一个生成并不能达到我们想要的效果,这时候可以继续向deepseek表达要求,调整更新:

比如“美化下整个页面的UI设计。表格溢出屏幕了,请修复。添加圆角和多种颜色渐变的效果,风格要求简约自然,颜色协调统一。”

最后调整的效果如图

image

下一步需要把我们前端小程序关联云服务空间
image

image

登录账户后新建服务空间,选择新购阿里云的免费服务空间,新购成功后回到服务空间列表页,等状态显示为正常即可以使用
image

image

创建成功后选择对应的服务空间进行关联

至此前端小程序就与服务空间绑定关联成功

image

3.数据库设计
在Cursor的composer输入:

“在 @cloudfunctions 中创建一个unicloud云函数,并在 @database 中创建一个 feedback.schema.json的文件,向unicloud云数据库中传送用户的姓名,联系方式和反馈内容,请在已有文件夹中直接创建,不要重复创建cloudfunctions文件夹”

通过deepseek帮我们创建函数和数据库文件

image

确认文件生成位置正确后,将新生成的文件上传部署至服务空间中
image
image
image

部署成功后我们可以通过web控制台查看我们新建的数据库信息
image

image

image

通过微信开发者工具可以模拟操作用户信息反馈,提交反馈后可在服务空间数据库中查询收录信息
image

image

4.管理员面板开发
回到HBuilderX中,新建项目,具体选择如下
image
image

后台管理员面板关联服务空间后
image

image

同步服务空间的函数和数据库信息,选择覆盖和全部替换
image

image

最后一步需要我们将数据表文件转换生成成对应代码,根据图示操作
image

image

image

完成后我们就可以在此看到后台管理员面板了,第一次登录的话需要新注册管理员账号
image

image

注册账号后,登陆,管理员界面就是这样的
image

为了更方便我们查看获取的数据,需要我们放出列表菜单
image
image
image

成功后即可在刚刚创建的菜单下看到我们获取到的数据了
image

总结:
·Deepseek 提供了丰富的工具和框架支持,能够显著提升开发效率,减少重复性工作,缩短项目周期,适合快速迭代的开发需求
·通过一套代码即可在多个平台(如微信、支付宝、H5 等)运行,减少了重复开发的工作量,节省了人力和时间成本。
·拥有活跃的开发者社区,提供了大量的学习资源、解决方案和最佳实践,能够帮助开发者快速解决问题,降低学习门槛。