Cursor实战:一人全流程模块开发

548 阅读5分钟

前言

年前分享了一篇《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 除了基础的回答外,还会超出预期的帮你思考更多的事情,这样一个代码助手,还不上吗?