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

相关推荐
大模型真好玩14 小时前
LangChain DeepAgents 速通指南(三)—— 让Agent告别混乱:Tool Selector与Todo List中间件解析
人工智能·langchain·trae
神秘的猪头3 天前
🚀 拒绝“手搓”工具!带你硬核手写 MCP Server,解锁 Agent 的无限潜能
agent·mcp·trae
豆包MarsCode3 天前
一文快速理解 Spec 模式
trae
用户4099322502125 天前
如何在Vue3中优化生命周期钩子性能并规避常见陷阱?
前端·vue.js·trae
okclouderx6 天前
【Easy-Vibe】【task5】完整项目实战
人工智能·trae·ai ide·vibe coding·easy vibe
低调小一7 天前
find-skills 安装与使用(Trae):把 Skills.sh 变成你的“能力商店”
trae·skills
okclouderx7 天前
【Easy-Vibe】【task4】给原型加上 AI 能力
人工智能·trae·ai ide·vibe coding·easy vibe
豆包MarsCode7 天前
模型选择指南|TRAE 中国版 SOLO 模式
trae
用户57573033462411 天前
🔥 别再手动改代码了!Trae SOLO + Agent 工作流,让 AI 当你的首席工程师!
trae
用户40993225021213 天前
Vue3组件开发中如何兼顾复用性、可维护性与性能优化?
前端·vue.js·trae