买了一个月 Cursor 会员,为了体验它的强度,我决定做一个排课系统。
听说难度不小,想看看 AI 开发到底能不能实际应用。
# 缘起
在一条公众号的回复里,我看到了一个排课系统的需求。大家都说难度很高,正好拿来试试 Cursor 的刀。
说干就干。开源项目 EduS 从此启航。
# 过程
# 创建项目
第一步当然是把需求丢给 Cursor Chat,看看他有什么想法建议。
上来就是一个下马威,给我了一段 Python 代码-_-! 经验 No.1 : 把话说全了。
给了基本的前端页面的部分标签结构,给了后端几个接口的示例性代码。可以说参考性还行,下手开始完全做不了。
还好 Cursor 还给了 Composer agent 的模式,可以完整思考直接从头做到尾,还可以执行命令。
但是由于我误删了对话记录,没有初始的截图了。大意应是给我在当前目录创建一个 Node.js 的后端项目,使用 Mongoose 连接到 MongoDB 数据库,使用 Express.js 创建必要的目录结构和接口文件,满足排课系统的需要。Composer 直接满负荷输出,创建目录,创建文件,执行 npm init 和 npm i 等命令,当然安全原因命令行会卡在那里等你点击确认才会执行。最后提示你进入目录执行 npm run dev 启动项目。太丝滑了,我都震惊了,而且执行真的能起来,没有报错。每次自己创项目配环境挺费劲的,又是查资料又是找命令。没想到能省力成这样。
后端代码我都懒得调试了,反正本机数据库已经连接上了,直接写页面功能去测试接口!简直是 Big 胆。
这张图我真想截全了,但是他太太太太长了!反正后面就是
现在让我们初始化Tailwind CSS:
现在我们需要创建和配置一些基本文件。首先,让我们修改 tailwind.config.js:
现在让我们更新 src/style.css 文件以添加 Tailwind 的基础样式:
接下来,让我们更新 main.js 文件以引入 Element Plus 和其他必要的配置:
让我们创建一个基本的项目结构。首先创建必要的目录:
现在让我们创建路由配置文件:
让我们创建一个示例的Home页面:
最后,让我们更新 App.vue 文件以使用路由:
现在我们需要安装vue-router并在main.js中配置它:
让我们更新main.js以添加路由配置:
很好!现在前端项目的基本结构已经搭建完成。以下是项目的主要特点:
接下来你可以:
根据需求开发更多的页面组件
添加状态管理(如Pinia)
配置API接口
添加更多功能组件
需要我帮你进行哪些后续开发工作?
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
要知道这是一条对话呀。比我每次找什么 init 项目模板快多了,而且真的能运行。我们每个人写的血泪环境搭建教程在这一刻灵魂附体,集中在 AI 的智慧上了。
下一步准备连接后端接口,两端一起测。
还是略去代码看他的回复
我来帮你封装API请求。首先,我们需要使用axios创建一个请求实例,并进行基础配置。
让我们先创建api相关的文件:
现在让我们根据后端API创建具体的API请求模块。首先创建课程相关的API:
接下来创建教师相关的API:
最后,创建排课相关的API:
最后,我们需要创建一个统一的API导出文件:
现在,我们需要在 vite.config.js 中添加代理配置,以便在开发环境中正确转发API请求:
我已经帮你完成了API请求的封装,主要包含以下内容:
src/utils/request.js: 封装了axios请求实例,包含了:
使用示例:
接下来,你可以:
开始开发具体的页面组件
实现用户认证功能
添加更多的API接口
开发具体的业务逻辑
需要我帮你实现哪个部分?
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
理解太精准了,甚至超过了我的要求,每次实现后还会给出下一步的预判和建议。
接下来就是枯燥的讲出需求(真的靠讲的,用了搜狗输入法的语音输入),等待实现,测试后说出 bug,测试没问题说出下个需求的循环。
提出需求:
报告 bug:
继续报告 bug:
提出新的需求,还可以给他附加截图信息来说明表格数据结构
做一些说明后他立刻能理解,还提供了更专业的说法。
顺带让他编写一些方便测试的小脚本。对了之前还让他写了两个单元测试,但是由于想法和设计都没定,基本都在由 AI 自行发挥,所以这么早的单元测试也没啥用。
总之第一阶段就大量的扔出需求,让他随意的去构建和实现。只要能跑起来就可以看到和自己的预期有什么不符的地方,也方便下一阶段针对性的提出和解决。
# 完善优化
项目的基础部分发挥完了就搞一些具体的自定义程度比较高的需求了。由于上一阶段我发现他修改代码时有时会把之前稳定的代码又改的不一样,怀疑是上下文长度超了。所以新开一个 Composer 对话框继续。
先从独立的功能设计开始:
但是新开窗口后对项目的理解偏差又变大了,所以要补上一句先看背景知识:
但是这里他还是读错了,当成了 Nuxt.js 项目、UI 框架 Shadcn。所以有什么情况务必要清晰明了的告诉他,免得自行发挥。到这里就发现还是要懂编程,如果是完全不懂来指挥他,这部分可能会绕成一团乱麻。
好不容易绕回来,继续让他添加新功能
SaSS 改造这部分其实心智负担挺重的,之前的 API 都要逐一去考虑。但是交给 AI 实在是太轻松了,基本他都去自动识别哪些接口需要额外改造了。而且代码库也读明白了,都会按之前的结构去新增。这部分 bug 极少,迅速就搞定了。
但是这个小脚本有一个对密码进行了两次加密 bug,他没注意,这里调试了很久。
用户名显示也出了一个 bug,怎么也搞不定,后来我提醒可能是更新逻辑顺序的时候,终于解决了。但我为啥自己不去改呢?因为我根本不读他的代码啊!直接看结果就算了,有一种测试人员的体验了。
最不靠谱的是,这里出现了递归循环引用,让修复时他说限制深度:
我直接斯巴达了。发出了灵魂拷问: 好在一提出,立马就有整套方案去替换解决了。
之后往复继续枯燥的报 bug,提新需求。而且还是一样,添加新功能时很爽很快很完美,一旦开始修改深入,就会出现翻烙饼。一会把之前的函数参数破坏了,一会把之前的设计换了。来回往复的修改还是让人挺烦的。最后决定再开一个新的对话,应用新的策略。
# 稳定技巧
1.工具函数使用 chat
尤其是独立的纯函数,只要说清楚参数、功能和输出,chat 一做一个准,也不会干扰已有代码。
2.专门归档提示词
我创建了一个 markdown 文件,专门用来描述系统功能,放示例数据,放数据结构。然后最后是一个待开发功能章节,写每一步打算发给 Composer 的提示词。一段复制到对话框,并@md 文件名,解决后在 md 文件里这段后面加个(已完成)
标记。然后跟着再写第二段。
3.明确指出理解问题
有时模型理解会很固执,一个问题我手动修复了,下回做别的功能时他又会把这部分改成他之前的。这种情况一定要发一条,明确的告诉他:有什么问题,我怎么修改的。他认了后面才不会瞎改。
4.加 rules
这条的作用好像不太明显。但是明显修复小问题的时候,在提示词后面跟一句:仅修复 xx 问题,最小化改动,不要修改其他地方导致已有功能失效。
会让翻煎饼的概率大大降低。
5.先分析再写代码
加新的需求功能时,先给出需求,让他去分析和给出深度思考的方案,不写代码。分析出来有问题修正和探讨,分析和说明越细编程时的效果越好。没问题了再让他创建新的文件去实现新需求,同时及时 git 提交,做好隔离,也能提升不少稳定性。
# 阶段成果
功能实现的差不多以后,又让他帮我设计了开源项目的说明文档,起了项目名。让可灵 AI 给我画了个 logo。项目就上架开源啦。为啥花了 8 天呢?因为最近工作一直挺忙,都是夜里回家与 Cursor 较劲,所以真实花的时间并不算太多。使用的模型是 Claude 3.5 sonnet。
以下是项目的一些基础信息:
项目地址: https://github.com/Rackar/EduScheduler
(看到这的可以麻烦进去点个 Star 了,谢谢啦)
演示地址: https://edus.codingyang.com/
用户密码: admin/admin123
演示视频 https://edus.codingyang.com/docs/edus_demo1.mp4
有一些排课的基本功能了,当然完善的空间还很大。有需要的朋友们可以体验一下,有什么需求都可以提出来。文本完~