我是怎么用Cursor 10分钟搞定后台管理页面的? | Cursor实战系列

原创 node 字节笔记本 2024年12月12日 08:23 湖北

今天要分享一个让后台管理系统开发事半功倍的方法~

最近在写Prompt 集合的后台视频上传管理页面

坦白说,后台系统界面的开发真的相当枯燥!

重复的增删改查、一样的分页弹窗、不停的接口搬运，还要写各种校验上传路由权限。

写过太多管理系统了,真的写到吐了 -
即便是现在有AI工具自动写我也不想写。

一个字形容：恶心！

正好看到前几天回顾之写的文章，看到

之前分享的amis文章

公众号：字节笔记本

一句JSON 文件配置生成完整的后台管理界面

想着何不结合cursor起来试试看？一试发现效果相当棒！👍 具体演示可以看看这里:

使用Cursor快速开发后台管理页面的演示视频

先说下Amis是啥

—

Amis（阿米斯）是百度开源的一个前端框架，简单说就是用JSON配置就能搭建出漂亮的界面，特别适合后台管理系统。

它最爽的地方在于：

• 不用写HTML和CSS，直接配置就完事了
• 组件超多，啥都有
• 随便改随便配，特别灵活
• 手机电脑都能用，响应式设计
• 性能还不错，数据多也不卡

三步教你速通

—

第一步：配置Cursor环境

喂数据，引用一下amis线上文档，具体的步骤和说明你可以参照这个文章Cursor隐藏功能大揭秘：让AI秒懂你的项目

先把amis的文档扔进Cursor，等它索引完就行。

这一步的意义就让Cursor根据最官方最新的文档来写,而不是随意的乱发挥，这也是所有写项目非常重要的基础。毕竟AI训练时所用的数据都还是比较旧的。

这步弄好了后面就顺了。

第二步：准备需求文档

整理好这些东西：

• 数据结构长啥样
• 要做哪些增删改查
• 接口的地址入参出参是什么类型

这也就是我在 用了Cursor开发10个项目后，我总结的7条真实经验！里面讲的要多加注释,注释不仅仅是代码里面的还包括书写大量的文档,当然，这个文档不用我们全部手写

下面这个就是我使用Go后台开发完成后使用 Cursor 生成的 API.md 文档

完整的结构如下

• 包含了完整的接口说明和请求地址,请求参数说明

  

• 请求示范
  尽可能多的给出接口的请求示范,让 AI 知道你的接口如何正确的调用

  

• 响应返回
  我这里让 AI直接 根据model生成MOCK，自动生成返回相关的数据和对应的类型

  

写这么多,其实就是为说一点:

你想让人办事 你得把事交代清楚

注释文档越详细越好，后面写起来就越快。

第三步：让代码自己蹦出来

有了前面的准备，这步就爽了 - 直接把需求扔给Cursor，坐等它变魔术！

到底多快？

—

说真的，标题说10分钟都是往多了说。按我这套路来，准备工作到位的话，2分钟就搞定了。不骗你，是真的这么快！

想要参考文档和代码？

—

项目文档和JSON配置有点长（1000多行），这里放不下。感兴趣的小伙伴可以加我微信，我发给你看看~

参照参照这个配置文件，应该会更加好的理解一点,也能够直接喂给AI告诉他这个具体怎么做