使用Cursor实战: 实现管理后台的一些功能添加

122 阅读6分钟

仿写

需求描述: 在原来活动列表的基础上, 实现如下需求:只显示当前开启状态的活动,可以按结束时间的先后进行排序

实现过程### 输入创建Notepads

========================================================### 必要说明本项目的管理后台,使用express框架实现,
@AdminRouter.js 是路由文件
@AdminApi.js 路由对应的逻辑处理文件
@index.blade 是菜单使用的模板引擎文件
@nav.js 菜单对应的JS代码### 获得已开启的活动1. 仿照 @AdminRouter.js中 getactivitygrouptime的路由,帮我写一个getopenactivitygrouptime的路由,要求这个路由返回的是已经开启的活动列表 (开始时间字段: startTime,结束时间的字段: stopTime, 时间格式是: 2017-08-25T09:00:00.000Z); 结果按照结束时间从小到到排

  1. 在 @index.blade中加上对应的按钮, 可参考 @index.blade文件中的getactivitygrouptime写法
  2. 在 @nav.js中添加对应的点击事件,参考 #get_activity_group_time的点击事件
    ========================================================

输出路由和逻辑实现:

router.get('/getopenactivitygrouptime', function(req, res) {
   logger.info("getopenactivitygrouptime " + JSON.stringify(req.query));
   AdminApi.getActivityGroupTime(function(err, configList) {
       // 过滤出已开启的活动
       var now = new Date();
       var openActivities = configList.filter(function(activity) {
           var startTime = new Date(activity.startTime);
           var stopTime = new Date(activity.stopTime);
           return startTime <= now && stopTime >= now;
       });
      
       // 按照结束时间从小到大排序
       openActivities.sort(function(a, b) {
           return new Date(a.stopTime) - new Date(b.stopTime);
       });
      
       var rawResult = {error: err, tableContent: JSON.stringify(openActivities)};
       if (req.query.isRaw) {
           return res.json(rawResult);
       } else {
           return res.render("admin/mytable", rawResult);
       }
   });
});

菜单:在仿写按钮的下面也创建了一个新的按钮
nav.js
添加了点击事件: 
测试功能也很正常,完美完成任务

创造性任务

需求描述: 在原来活动列表的基础上, 实现如下需求:在活动列表中实现管理的功能:  需要在活动列表中的每一行添加 “开启/关闭”活动功能

实现过程虽然需求上看似简单,但是却包含了很多的信息

  • UI添加开启/关闭的按钮
  • 点击按钮对应的JS事件
  • 点击按钮对应的后台调用
  • 后台调用相关的逻辑

输入重新整理需求后修改了Notepads

========================================================

必要说明本项目的管理后台,使用express框架实现,

@AdminRouter.js 是路由文件
@AdminApi.js 路由对应的逻辑处理文件
@index.blade 是菜单使用的模板引擎文件
@nav.js 菜单对应的JS代码
@mytable.blade 内容的模板引擎

直接在活动列表中设置活动状态

  1. 仿照 @mytable.blade 创建一个新的模板引擎名字叫: activityTable.blade,它是活动列表专用的,和 @mytable.blade不同的点在于,它每一行的活动都包含管理能力, 这些管理能力包含: 开启活动(UI上应有一个输入框,表示开启活动的分钟数,如果活动是开启的,按钮状态为disabled); 关闭活动(如果活动是关闭的,按钮状态为disabled)
  2. 在 @nav.js中绑定这些操作按钮的JS事件
  3. 在 @AdminRouter.js中实现开启/关闭活动的路由
  4. 在 @AdminApi.js 中实现这些开启/关闭活动逻辑, 开启活动: 修改开启时间和结束时间,开始时间是当前时间的前5分钟,结束时间是当前时间加上UI输入框中输入的分钟数; 关闭活动: 修改开启时间和结束时间为一个过去的时间即可; 无论是开启活动还是结束活动都调用 @AdminApi.js中的setActivityGroupsTime函数,需要注意的是: 调用函数的disablePlatformsStr, needIapRangeStr两个参数都需要从UI上传进来
  5. 修改 @AdminRouter.js 中的getactivitygrouptime路由和 getopenactivitygrouptime渲染模板为activityTable.blade,让这两个列表有活动管理的功能
  6. 在玩家修改活动状态后,我想立即看到修改后的效果
    ========================================================
    我们发现将一个完整的需求进行了拆分,拆分成了几个可执行的步骤
    下面来看下AI给出的输出

输出创建了新的模板引擎

文件:activityTable.blade文件,在仿照的文件mytable.blade中添加了一段代码

添加UI对应的JS! 问题:

  • 点击按钮没反应,应该是事件未绑定成功
  • 请求的url不对
  • disablePlatformStr和参数needIapRangeStr参数是写死的

渲染模板也修改了 也实现了开启活动和关闭活动两个路由 问题:

  • 请求 setActivyGroupTime函数的参数类型和值都不对,应该是他没办法理解参数的含义,还需要进一步的和它说明

针对nav.js的问题,再次沟通

nav.js中的open-activity和close-activity活动的写法有如下问题: 

  1. 不应该写到 @nav.js 文件中,应该写到 @activityTable.blade 中
  2. 请求的url应该是拼接 : 当前url + 路由名称,而不是写死的字符串 
  3. disablePlatformsStr和needIapRangeStr参数是写死的,不满足需求 (这里其实沟通的有问题,我只是说不满足需求,但我没告诉他我的需求是什么样的,后续也进行了对应的沟通)

=======================================================

新生成的代码确实放到了 activityTable.blade中 现在解决了UI上的点击和事件绑定,现在请求能顺利的到达后端了

但还有别的问题: AdminRoute.js中调用AdminApi的setActivityGroupsTime函数的参数都不正确,

再次沟通

========================================================
@AdminRouter.js  中的 openactivity函数和closeactivity函数都调用了 @AdminApi.js 的setActivityGroupsTime函数,请注意这个函数的参数,比如第一个参数应该是数组类型的,第二个参数是活动的开始时间,第三个参数是活动的结束时间等 ========================================================
AI清晰的理解了我的意思,也修改了对应的代码
到现在代码基本生成完成

使用后的感觉

  1. 第一个需求比较简单,基本上是仿照着已有的代码来实现一个新的,告诉AI一些参考的内容和具体的执行步骤,AI能特别好的完成我设定的需求,AI在这种 1到100的事情上做的很好
  2. 第二个需求相对就比较复杂了,既有UI也有逻辑上一些实现,首先就要考验我们对需求的拆分能力,我们需要把需求一步一步的进行拆解,将抽象的需求具体变成一条条可执行的步骤,另外还需要更细致的把需求和步骤给AI描述清楚
  3. 想一步到位的实现一个需求是不太可能的,还是需要多次的进行沟通才行