字节出品！全自动生成前端页面、Controller、Service、Dao、Mapper、VO！强的可怕！

统一回复 發表於 2025-5-15 10:16:00

字节出品！全自动生成前端页面、Controller、Service、Dao、Mapper、VO！强的可怕！

大家好，我是R哥。
在 AI 编程工具层出不穷的今天，大家都希望借助 AI 工具快速提升自己的开发效率，但市场上的 AI 编程工具通常要么费用高昂，要么功能鸡肋。
市面上也有不少 AI 编程插件，虽然号称能辅助开发，但真正上手后，你会发现，它们只会帮你写写函数、补补代码片段什么的，要完成复杂点的项目需求，根本难做到。
最近，字节跳动出手了，全新升级一个重量级的 AI 编程插件——Trae，听名字可能感觉还挺低调，但功能绝对让人眼前一亮。
首先，Trae 插件本身是完全免费的，不用订阅，大模型也是免费使用的，支持国内的 Doubao、Deepseek 大模型，同时支持市面上主流的 VS Code 和 JetBrains 插件。
Trae 背靠字节强大的 AI 能力和插件生态（特别是 Builder 功能支持），你只需要中文描述需求，Trae 就能一步步帮你生成项目结构、代码逻辑，甚至连 API 接口调用、页面 UI 都能帮你搞定。
所以说，在如今这个 AI 编程工具 “死贵” 的大环境下，Trae 插件就像一股清流，居然能完全免费使用，真是难得，既有大厂背书，真正一款国民级的AI 编程插件。
Trae 插件官网地址：
<blockquote>
https://sourl.cn/6Cj8fi
</blockquote>
<h2 id="trae-插件的安装和使用">Trae 插件的安装和使用</h2>
<h3 id="插件安装">插件安装</h3>
Trae 插件的前身是 豆包MarsCode 编程助手，现在品牌升级叫 Trae 了。Trae 插件提供以智能代码补全为代表的核心能力，支持主流编程语言及 IDE，能在编码过程中提供单行或整个函数的建议。
上面说了，Trae 支持市面上主流的 VS Code 和 JetBrains 插件，这里我介绍下如何安装 Trae 插件，以及基本操作使用。
Trae 插件下载地址：
<blockquote>
https://sourl.cn/6Cj8fi
</blockquote>
在 VS Code 中可以在扩展中快速搜索安装，首先在 VS Code 左侧导航栏上点击扩展面板，然后搜索 Trae，找到插件后点击 Install 安装即可。
我已经安装好了，如图所示：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101526992-1806784672.png">
JetBrains 也是一样，以 IntelliJ IDEA 为例，进入 Settings -> Plugins，然后搜索 Trae，找到插件后点击 Install 安装即可，如图所示：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101527662-256812444.png">
安装插件后，重启 VS Code 或者 IntelliJ IDEA，然后再根据提示登录帐号，即可体验 Trae AI 编程插件。
<h3 id="基本使用">基本使用</h3>
插件安装好了，我们就可以来体验下它的强大了：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101528083-986589800.png">
如图所示，Trae 支持 Chat 和 Builder 两种工作模式。
Trae 和传统 AI 编程助手不同的是，就是它最近出的 Builder 模式，可以实现用自然语言从 0 到 1 搭建一个完整项目，这也是本文要介绍的重点。
Trae AI 编程助手和传统的 AI 编程助手一样，不仅支持代码生成，还支持以下几个快捷辅助功能：
<ul>
<li>代码解释：/explain</li>
<li>问题修复：/fix</li>
<li>注释代码：/doc</li>
<li>单测生成：/test</li>
</ul>
除了这些，像其他的技术问答什么的都是小儿科，你只要输入 "/" 符号就会弹出快捷用法，如图所示：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101528387-493798330.png">
另外，还可以使用 "#" 符号来添加要引用的上下文：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101528625-878354870.png">
我们可以添加代码符号、文件、文件夹、工作区代码作为上下文，比如，我们有时候想要引用某个文件，让 AI 针对这个文件中的代码进行解读、修改等操作，让 AI 更精准的理解我们的意图。
点击插件右下角可以切换模型，目前支持以下几种模型：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101528894-73344833.png">
主要是国内的豆包和 Deepseek 模型，非常意外的是，这些模型居然都是免费使用的，不用自己去官方申请 API Key，也不用充值，字节这波操作真的太良心了。
学会这些基操，就能助我们快速提升编码效率与质量，当然，这不是本文要介绍的重点，本文重点介绍下最近出的 Builder 模式，使用自然语言全自动完成任务，这才是 AI 编程工具的灵魂所在。
<h2 id="开发实战">开发实战</h2>
本文我会站在小白的角度，重点介绍一下如何通过 Builder 模式，使用自然语言来开发前端页面、后端接口，适合对前端能力欠缺的后端人员，或者想快速实现后端功能的后端开发人员。
首先我会以 VS Code 来开发登录、退出功能，然后再以 IntelliJ IDEA 导入并解读项目，在此基础上再加一个美化首页功能。
<h3 id="builder-功能介绍">Builder 功能介绍</h3>
Builder 模式相当于一个 Agent，除了 Chat 中的已有功能，它还会自主完成任务，只需要使用自然语言，它便可以从 0 到 1 开发一个完整的项目/功能，包括项目结构、代码文件什么的，一步创建到位。
切换为 Builder 模式：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101529197-75740934.png">
在 Builder 模式下，AI 助手在回答时会根据需求调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等，从而让回答更精确、更有效。
如下图所示，Builder 模式可以快速从 0 到 1，自主拆解需求并自动完成多轮编码任务：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101529946-1104212910.png">
Builder 的工作流程包括以下几步：
<ul>
<li>拆解步骤执行；</li>
<li>自动提取仓库级上下文；</li>
<li>自动创建/修改代码文件</li>
<li>自动生成并运行终端命令；</li>
<li>自动分析命令运行状态。</li>
</ul>
说白了，AI 助手会主动读取当前项目中的文件内容，拆解任务并逐步执行，从自动创建文件到最后生成并执行命令、预览等，强的可怕，这相当于一个有独立思考能力的程序员了。
<h3 id="从-0-开发一个登录功能">从 0 开发一个登录功能</h3>
说了这么多，你如果还不知道 Builder 模式的强大，那我就来用它实现一个登录需求吧，让大家对对 Builder 模式有更深刻的理解。
我来用 Trae 插件实现以下需求：
<ul>
<li>登录页面：适合前端小白或者 0 编程基础的人。</li>
<li>登录接口：适合专业后端人员，实现快速编程。</li>
</ul>
挑战使用 Trae 插件，全程使用自然语言来完成这个需求。
<h4 id="开发详细过程">开发详细过程</h4>
向 Builder 窗口发送以下指令：
<blockquote>
实现一个登录功能，包括前端登录页面（login.html），页面上面有用户名、密码、验证码，这些都是必填项，还有登录、重置按钮，当点击登录时需要后端接口支持，后端使用java spring boot 项目，并使用thymeleaf模板来渲染，登录成功后跳到首页（index.html），首页上面显示登录的用户名。
</blockquote>
输入指令后，它就会自己工作，自己创建目录和文件，过程中我们只需要点「全部采纳」或者「全部拒绝」按钮即可。
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101530904-674810284.png">
如图所示，它已经创建了一些文件，但没有生成后端相关的类，因为我给的指令不是很全，所以我还得继续向它发送指令，这次我把数据库信息都给它了：
<blockquote>
# LoginController.java 登录接口请使用spring data jpa来实现，请生成对应的service、dao、entity类，查询mysql javastack库t_user表中的信息来验证登录信息是否正确，数据库信息为localhost,root,12345678；
</blockquote>
注意，我这里使用 # 号来引用了 LoginController.java 文件：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101531920-1584272472.png">
篇幅有限，更多对话略...
大概在经过 10 几个回合的沟通后，轻松搞定了一个包含前后端的完整登录功能。
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101532883-1323903698.png">
这是一个标准的 Spring Boot + Maven 项目，也采用了标准的三层架构，工程层次结构清晰、合理，命名也非常规范，能实现这个水平，我已经非常满意了。
当检查项目准备就绪后，它会自己弹出运行项目，也可以向它发送「运行这个项目」的指令来运行项目，运行完后，还会弹出是否预览项目，点「预览」按钮即可预览项目：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101533754-2096175352.png">
当然，我们也可以通过访问 localhost:8080 来访问项目：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101538516-1702946823.gif">
没想到，虽然页面是粗陋了点，但项目运行还挺顺利，页面上的控件有完整性和正确性检测，这个出乎我的意料。
<h4 id="开发退出功能">开发退出功能</h4>
登录功能可以正常使用，但是没有退出功能，现在我继续让它添加退出功能，发送以下指令：
<blockquote>
在首页顶部右侧添加一个退出功能，后端接口也要实现会话退出，退出后跳到登录接口。
</blockquote>
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101548614-1826722454.png">
点击「全部采纳」按钮后，再重新运行项目并登录：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101549362-803142889.png">
如图所示，已经按我的要求添加了退出功能了，测试也成功跳转到了登录页面。
下面是完整的登录、退出流程效果演示：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101554073-1685012477.gif">
测试了成功登录并退出，也测试了用户名、密码、验证码错误的场景。
还想添加什么功能，直接向 Builder 模式发送指令就好了。
<h4 id="美化首页-ui">美化首页 UI</h4>
上面的功能都是用 VS Code 的 Trae 插件开发的，下在我再来用 IntelliJ IDEA 的 Trae 插件来美化一下首页功能，索引并解读现有的项目也是Trae 插件 Builder 模式的主要亮点之一。
首先打开 IntelliJ IDEA 并导入 VS Code 创建的项目：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101603735-948717689.png">
我来问下它：
<blockquote>
现有的项目都有哪些功能？
</blockquote>
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101604616-1359890451.png">
这是它的解读：
<blockquote>
通过查看项目代码结构、关键文件、依赖配置和前端模板文件，总结出项目现有功能如下：
<ol>
<li>定义了用户实体类 <code>User</code>，包含用户名、密码等属性；</li>
<li>提供用户仓库接口 <code>UserRepository</code>，支持根据用户名和密码查询用户；</li>
<li>配置了 MySQL 数据库连接；</li>
<li>实现了用户登录和退出功能，登录页面包含验证码验证；</li>
<li>提供登录后的首页，显示当前用户信息。</li>
</ol>
</blockquote>
没毛病，就是首页有点太简洁了，我让它再继续美化一下首页吧，发送以下指令：
<blockquote>
# index.html 美化一下首页，在居中位置添加一个“网站正在维护”的字样及图标，美观大气。
</blockquote>
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101605746-1476702867.png">
再在 IntelliJ IDEA 中启动项目，最终效果如下：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101606477-76893139.png">
Builder 模式的体验就到这了，虽然前端页面还是丑了点，但这并不是问题，因为我给的信息太少了，我完全有信心通过接下来的对话来丰富成我想要的样子。
<blockquote>
使用 Builder 模式，最好把大任务拆解成小任务、步骤化、细节化，比如：1、2、3、4，...，然后再分步去完成任务，这样完成的任务会更接近我们想要的效果。
</blockquote>
<h4 id="回退历史版本">回退历史版本</h4>
除了正常的操作，你可以将项目回退到指定会话轮次发起前的版本，如图所示：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101606774-781637293.png">
首先确认本次回退的影响范围，若本次回退符合预期，点击「确认」按钮后，Builder 便开始回退项目。
<blockquote>
需要注意的是：
<ul>
<li>回退操作不可撤销；</li>
<li>仅支持在最近活跃的 Builder 窗口中回退版本；</li>
<li>仅支持回退至最近 10 轮会话内的版本。</li>
</ul>
</blockquote>
<h4 id="管理历史会话">管理历史会话</h4>
如果开启了多个会话，点击右上角的「历史会话」按钮，打开「历史会话」面板，该面板展示 Chat 模式和 Builder 模式的所有对话记录，如图所示：
<img src="https://img2024.cnblogs.com/other/1218593/202505/1218593-20250515101606993-1321026435.png">
点击对应的对话条目，可以查看某轮具体的历史对话详情，将鼠标悬浮至某条对话，然后点击右侧的「删除」图标可以删除对话，
<h2 id="builder-与-chat-的差异">Builder 与 Chat 的差异</h2>
虽然 Trae 的 Chat 和 Builder 模式看上去都能干活，但通过本文的实战介绍，可以看出它俩其实是两个完全不同的物种，有着明显的区别和适用场景。
Chat 模式是传统的对话式 AI 助手，你问一句，它答一句。你可以让它补全代码，解释代码，或者帮你找 bug，总之就是问什么答什么，每次都是一次性服务，需要你自己掌握节奏和细节。
Builder 模式它是全自动型的 AI 助手，你只需要告诉它想要的功能，Builder 会自己规划、自己动手，不仅能写代码，还能自己创建目录、编辑文件、执行命令，甚至根据上下文自主调整步骤。
比如前面我们开发登录功能，如果用 Chat，你得自己一步步问它怎么写 Controller、Service、Dao、Entity 类，还得自己手动建文件。而用 Builder，直接一句话搞定大部分工作，效率起飞！
所以，一般情况下可以这样区分使用场景：
<ul>
<li>日常编程、小功能修改 → 用 Chat；</li>
<li>需要系统搭建、复杂功能实现 → 用 Builder。</li>
</ul>
说白了，Chat 如果是秘书，Builder 就是助理工程师！
<h2 id="总结">总结</h2>
聊了这么多，相信大家对 Trae 及 Builder 模式有了深刻的理解了吧？
下面我再来总结一下 Trae 插件它到底牛在哪！
1、大厂出品！插件免费！模型免费！
不像那些国外插件，突然封号了、限流了，Trae 是正儿八经国产大厂字节背书，实力强悍，服务器稳定，体验更好更流畅，长远来看更靠谱。
在一众又贵又复杂的 AI 编程工具里，Trae 作为字节出品，竟然提供了完全免费的工具，连大模型调用都免费，支持主流 Doubao 和 Deepseek，而且不用自己搞什么 API Key，开箱即用，非常友好。
2、双模式切换，自然语言开发全自动化！
小修小补时用 Chat，大项目从 0 到 1，用 Builder，一键切换，场景适配灵活，极大提升开发效率。
有了强大的 Builder 功能，就算你是前端小白、后端新手，只要能打字，会说人话，就能用 Trae 搞出一个网页、小程序、系统等等。不需要懂前端、不需要深度研究项目结构，AI 全程陪跑。
Trae 真正实现了从自然语言到代码落地的全流程自动化！
3、不再恐惧新项目，快速上手一个新项目！
很多人一换新工作，一入职新公司，面对陌生项目，代码又多又乱，光是理解业务逻辑就要半条命，别说动手敲代码了，这也是这么多人恐惧入职新公司的原因，怕跟不节奏被开。
而 Trae 提供了 Builder 模式，可以直接帮你梳理项目结构，理解模块职责，生成标准样板代码，这对新人来说，简直是救命稻草。
还有更多非常实用的功能，篇幅有限，就不多介绍了，用了就知道 Trae 有多香了，赶紧去试试吧！
相信我，用上 Trae AI 编程插件，你会体验到一种程序员效率起飞的新感觉！
最后，我再把 Trae 官网和插件地址送上：
<ul>
<li>官网：https://sourl.cn/tBfeEK</li>
<li>插件下载：https://sourl.cn/6Cj8fi</li>
</ul>
更多文章推荐：
1.Spring Boot 3.x 教程，太全了！
2.3,000+ 道 Java面试题及答案整理(最新版)
3.免费获取 IDEA 激活码的 7 种方式（最新版）
4.Java & DeepSeek & AI 学习资料分享
5.程序员精美简历模板分享
觉得不错，别忘了随手点赞+转发哦！

</div>
<div id="MySignature" role="contentinfo">

<div style="clear: both"></div> 
来源：https://www.cnblogs.com/javastack/p/18877237

頁: [1]

琼殿技术论坛's Archiver

字节出品！全自动生成前端页面、Controller、Service、Dao、Mapper、VO！强的可怕！