前言
年前分享了一篇《Cursor:前端不会消失,但前端的你会消失 - 掘金》的文章,主要向大家展示了Cursor在前端开发过程中的能力,当时讨论还是比较热烈的。
不知道大家后续是否有所尝试,反正,我已经逐渐将 Cursor 作为主力开发工具了。Cursor协助我完成了很多项目的开发工作,包括前端界面、数据库设计、Java开发、Python脚本、甚至还包括移动端小程序——《Cursor实战回顾:花慧小程序开发 - 掘金》。
与 Cursor 协同开发真的“爽”,我可以投入更多的时间去理解业务,优化设计,美化界面,而不是把时间花费到语法记忆、样式代码上去。
给我的感觉是:我终于是一个工程师,而不是码农了。
言归正传,今天就给大家分享下使用 Cursor 进行日常开发案例,场景内容有所简化,大家关注核心思路即可。
背景及任务
背景
我们正在搭建一个团队内部技术人员协同提效的平台,平台致力于尽可能多地将工作自动化、智能化,让技术人员释放更多时间从事更加重要的事情。
整个项目基于SpringBoot+Element UI实现,技术框架是在各种开源组件上面进行了进一步封装,数据库采用的MySQL。
该功能开发时,平台已经实现了基础模块,Cursor 可进行参考实现。
任务
我们有很多已经上线的项目正在运行,随着团队的发展,项目越来越多,一个项目经理服务多个项目的情况司空见惯,这种情况下,我们希望实现一个模块来辅助管理这些上线项目(上线项目后续称为“应用”)。
本次分享主要就是基于该场景向大家展示如何通过 Cursor 完成“应用”模块的开发。
操作过程
开发环境、Cursor安装等步骤就不再赘述,我们直接进行进入流程。
分析设计
应用模块需求:
- 实现应用信息的基础管理(增删改查),包括:关联的项目、所用资源(服务器等)、项目经理、应用名称、应用描述、应用类型(Web、App、小程序)、应用描述、应用状态(未上线、正常运行、异常)、上线时间、上次启动时间、备注。
- 为了美观,列表页面不使用普通表格,而是使用卡片模式。
建表SQL
一次性获取结果或者简单问答,我一般使用Chat
模式,响应较快。
上下文选择了我们之前已有的一个建表sql。
提示词:
请参考给出的sql,帮我设计“应用信息”模块基于mysql的sql,表名为:yw_app_info:
应用信息包括:关联的项目、所用资源(服务器等)、项目经理、应用名称、应用描述、应用类型(Web、App、小程序)、应用描述、应用状态(未上线、正常运行、异常)、上线时间、上次启动时间、备注。
结果:
基本的sql生成大家应该都有预期,但是除了这些,Cursor 还帮我们:
- 生成了合适的注释,并且非常合理地拆分了应用类型和取值范围。
- 按照规范生成了表中的审计字段(create_by、create_time等)。
- 分析出来字典字段,并按照框架要求生成了字典类型、字典数据相关sql。
代码生成
初版
项目中已经有实现好的完整模块UpgradeRecord。
上下文选择“应用”的建表sql,使用Composer
模式,后续一直使用该模式。
提示词:
根据应用信息的建表语句,参考UpgradeRecord生成该模块的全部代码,包括前端和后端,代码存放位置和UpgradeRecord相同。
由于UpgradeRecord和应用是同一个大模块内的,所以此处指定代码位置非常简单,如果相同大模块中没有代码的,需要明确指出各部分代码位置。
结果:
输出结果很长,仅截取汇总部分。
是不是很惊艳,前后端一气呵成。
效果:
甚至,它还怪好地帮我对接了项目(已实现代码)下拉、用户弹窗。
大部分场景,初版一次性就能完成整个模块的开发,但实际开发的多了,一定会碰到有些不完美的情况。此时,我们可以根据需要接受代码后,再通过对话直接调整即可,比如下面的“美化界面”场景。
构造数据
美化界面前,我们先构造一些测试数据让界面看起来充实点。
提示词:
为应用信息生成5条测试数据,project_id范围为1。manager_user_id范围为1-5的任意整数。
其中范围后面为已存在模块的id。
效果:
唯一一条不正式的数据是我自测用的,这演示效果,不比个人手动录入半天好用。
美化界面
前面任务中说明了,列表页面不使用表格,我们来美化一下。
提示词:
为了美观,应用信息的index.vue页面直接使用卡片样式,不需要分页,并美化按钮及搜索区域
效果:
第一次美化时,只是把表格改为了卡片,然后第二次我就指定美化按钮及搜索区域,这次结果还可以。
总结
这个案例还有需要优化的地方,但是,以上过程,大家应该已经可以体会到 Cursor 协同开发的方便之处了。
很多时候,Cursor 除了基础的回答外,还会超出预期的帮你思考更多的事情,这样一个代码助手,还不上吗?