不想接口联调,不想写代码,那就交给Trae

上一期Trae以完美的表现,帮我们完成nest项目interview模块的点赞、收藏功能,经过我们的swagger接口文档自测,交互功能、返回的数据格式都没有问题,符合本次新增的功能,接下来,前端联调的脏活累活还是交给Trae吧,让我们拭目以待,Trae出色的表现吧~

提问 :isFavorited,isLiked,likeCount后端在列表返回这三个参数,在答案下面展示一个点赞、收藏的icon,并展示数量 (这里没有把细节提问好,导致Trae生成的样式一言难尽,还好,第二次提问的效果还不错)

由于没有限制他的icon,页面不显示,所以我再次提问让他使用antd的icon,项目已经安装了antd的icon库,没有去单独制作icon,把之前的interview列表新增四个字段进行展示和交互

很好样式还不错,把后端的接口也给到Trae

/favorite/interview/{id}和/like/interview/{id}是对应的收藏,点赞接口,对接上,然后把icon的样式调整显眼点

最终Trae也完成了,点赞和收藏的高亮也完成了,count也对应的加上

测试过程中发现了一个bug,Trae也给出了原因和优化建议,很nice

造成 sideMenuId 变化时请求两次接口的原因是:

  • 你在 watchEffect 里监听 sideMenuId,每次变化都会执行一次 fetchInterviews。
  • 但在 onMounted 钩子里也会执行一次 initFromRoute 和 fetchInterviews,而 initFromRoute 还会修改 selectedCategory,这会导致 watchEffect 再次触发。

优化建议:

  • 只用 watch 监听 sideMenuId,不要用 watchEffect,并且不要在 onMounted 里主动请求。
  • 只在 sideMenuId 变化时,重置并请求数据。

顺便也让Trae进行修改,看看能不能把bug修复完美

看一下控制台,很好,完美

  1. 总结一下,Trae帮我们完成哪些任务

API对接:

  • 点赞按钮已对接 /like/interview/{id},点击后请求接口,成功才切换状态和数量。
  • 收藏按钮已对接 /favorite/interview/{id},点击后请求接口,成功才切换状态。

显眼样式:

  • 图标使用antd的icon,点击之后高亮色更明显。
  • 点赞高亮为主题蓝色,收藏高亮为黄色,未激活为灰色。

bug修复

  • 减少不必要的接口请求,优化性能

在我们团队的开发过程中,Trae代码编辑器确实发挥了巨大的作用,它凭借其强大的代码生成和优化能力,帮助我们快速完成了大部分功能的实现。无论是复杂的逻辑处理,还是繁琐的模板代码,Trae都能在短时间内提供高质量的解决方案。

我们始终认为,工具只是辅助开发的手段,而开发人员的专业素养和对代码质量的追求才是项目成功的关键。通过合理利用Trae和GPT,我们能够在保证开发效率的同时,确保代码的优雅性和高质量。同时也可以减少Trae的使用次数,毕竟花钱还是节约次数的

在未来的工作中,我们会继续坚持这种开发模式。我们会充分利用Trae等工具的优势,快速完成功能开发;也会更加注重代码的审查和优化,确保代码都符合代码规范。

相关推荐
兵临天下api8 小时前
微店店铺商品搜索(item_search_shop)接口深度分析及 Python 实现
trae
倔强的石头1068 小时前
用 Trae 玩转 Bright Data MCP 集成
智能体·trae·bright data mcp
兵临天下api9 小时前
微店 item_get 接口深度深度分析及 Python 实现
trae
飞哥数智坊1 天前
终端里用 Claude Code 太难受?我把它接进 TRAE,真香!
人工智能·claude·trae
程序员X小鹿1 天前
Trae SOLO实战分享:3小时上线一个网站,全栈开发 + 自动部署,吊打Claude Code?(附保姆级教程)
ai编程·trae·solo
围巾哥萧尘1 天前
TRAE技巧便利店第二期,教师智能点名网页系统,荣获第一名啦🧣
trae
豆包MarsCode2 天前
TRAE MCP 实践: 智能人情账本系统开发
trae
兵临天下api2 天前
1688 item_get_app 接口深度分析及 Python 实现
trae
兵临天下api2 天前
1688 item_review 接口深度分析及 Python 实现
trae
用户4099322502122 天前
如何在 FastAPI 中优雅地模拟多模块集成测试?
后端·ai编程·trae