不想接口联调,不想写代码,那就交给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等工具的优势,快速完成功能开发;也会更加注重代码的审查和优化,确保代码都符合代码规范。

相关推荐
玄同7659 小时前
我的 Trae Skill 实践|使用 UV 工具一键搭建 Python 项目开发环境
开发语言·人工智能·python·langchain·uv·trae·vibe coding
豆包MarsCode11 小时前
不止是写代码|产品经理如何用 TRAE 重构工作流
trae
飞哥数智坊19 小时前
TRAE Friends@济南第3场圆满落幕,一次技术平权的具象化冲击
ai编程·trae
玄同7652 天前
从 0 到 1:用 Python 开发 MCP 工具,让 AI 智能体拥有 “超能力”
开发语言·人工智能·python·agent·ai编程·mcp·trae
hampeter4 天前
【填坑指南】Trae/VS Code 远程连接 Ubuntu,终端总是自动激活特定的 Conda 环境?三招教你彻底解决!
linux·ubuntu·conda·trae
代码匠心4 天前
Trae IDE 隐藏玩法:接入即梦 AI,生成高质量大片!
人工智能·ai·trae·skills
Java后端的Ai之路6 天前
【AI编程工具】-Skills和Rule傻傻分不清?(一文带你读懂)
ai编程·trae·rule·skills
玄同7658 天前
Trae国际版与国内版深度测评:AI原生IDE的双生花
ide·人工智能·ai编程·cursor·ai-native·trae
玄同76510 天前
TRAE Rules 高效使用指南:让 AI 更听话的秘密
ide·人工智能·ai编程·claude·cursor·trae