如何利用Trae打造写作助手后端，并实现高效的前后端联调？
- 内容介绍
- 文章标签
- 相关推荐
说实话，这阵子折腾AI编程工具的感觉，就像是在坐过山车。前阵子Cursor突然搞出个收费封禁的风波， 搞得人心惶惶，我也就顺势把目光投向了国产的新秀——Trae。在上一篇文章里我们费尽心思把“写作助手”的前端界面给打磨出来了 kan着那还算精致的UI，心里多少有点成就感。但是光有皮囊没有灵魂可不行，今天咱们就得硬着头皮，从零开始把它的后端给补上，累并充实着。。
从零开始：后端开发的曲折之路
KTV你。 Ru果你还没kan过前面的内容，Ke以回溯一下《AI编程实战：Cursor突然收费封禁？用Trae开发一个写作助手》。那篇文章里我们用TRAE SOLO生成前端工程的效果简直是惊艳，甚至让我产生了一种“编程Yi死”的错觉。当时就有不少朋友在后台私信，问这玩意儿Neng不Neng搞定后端。我也好奇啊，心想既然前端douNeng一句话生成，那Web全栈岂不是分分钟的事？
于是我满怀希望地尝试了TRAE SOLO， 指望着它Neng像变魔术一样，把数据库、接口、服务层全给我安排得明明白白。后来啊呢？现实给了我一记响亮的耳光——直接提示暂不支持。当时发布的时候宣传得那么火热， 我还以为“Web Develop”意味着全流程通吃呢，没想到目前还是个偏科生。行吧，既然SOLO模式指望不上，那咱们还是老老实实回到IDE模式，靠硬实力说话吧，我怀疑...。
化整为零：拆解任务， 一步步实现
我坚信... 刚开始的时候，我胃口挺大，想着Neng不Neng一口气把文章、图片、设置这三张表的后端代码全给生成出来。后来啊呢？生成过程中各种报错满天飞， 估计是主要原因是一次性生成的代码量太大，不够用了导致AI开始产生严重的幻觉，代码逻辑乱七八糟。
摆烂。 这方面SOLO模式确实表现得geng好一些，毕竟在《前端篇》里它直接生成一个完整的前端项目dou没怎么掉链子。但在IDE模式下反复试了几次全栈生成，dou没成功。我意识到，这估计不是简单优化一下提示词就Neng解决的，这是AI当前Neng力的瓶颈。于是我决定换个策略：优先实现核心功Neng，一步步来别想着一口吃成个胖子。
既然策略定了那就开始动手。为了防止AI天马行空地发挥，我在指令里把技术栈锁死了。咱们Zuo后端， 稳字当头，Spring Boot + Hibernate + MySQL，这套组合拳虽然老，但是稳啊，生态也成熟。
一个专为自媒体博主设计的写作编辑器， 现在前端页面Yi经完成，请帮我完成后端接口的开发。后端接口需要使用Spring Boot框架， 别纠结... orm采用hibernate，数据库采用mysql 。后端代码放置在chengzhang-rest工程中。
大家Ke以kan到，这个指令其实挺短的。为什么呢？主要原因是在《前端篇》里TraeYi经自动生成了详细的项目文档。现在它有了文档作为上下文， 我就不需要再费劲巴力地去描述业务逻辑了直接告诉它我要什么技术栈，它自己会去读文档理解需求。这不仅Neng减少指令长度，还Neng降低AI理解错误的概率。
让AI自检：代码质量的保障
摸鱼。 输入指令后Trae并没有直接开始码代码，而是先去查kan项目文档。这一点我hen喜欢，说明它不是在瞎猜。kan完文档后它才开始根据需求生成相关的后端代码。紧接着，它还会把生成的内容到README文档里并尝试启动服务。Zui后它会给出一个详细的生成报告， 包括创建了哪些核心文件、实现了什么功Neng、有哪些技术特性、API接口列表、数据库设计、使用说明以及项目优势。这一套流程走下来感觉就像是在跟一个经验丰富的架构师在合作。
请检查后端代码， 并修复相关错误
这里有个小细节，发送指令前，记得把后端服务给关了。不然AI检测到端口被占用， 可Neng会花大量时间去排查这个无关紧要的问题， 那必须的！ 甚至把你的配置文件给改乱套。
前后端联调：让数据动起来
后端服务起来了但这只是万里长征走了一半。前端还在用localStorage存数据呢， 容我插一句... 也就是个“单机版”。咱们现在的目标，是把前端和后端连起来变成真正的“网络版”。
不夸张地说... 上次的前端代码dou堆在chengzhang这个工程里 现在要加后端，要是还塞在一起，那代码结构估计得乱成一锅粥。为了以后Neng活得久一点，我决定把工程拆分。前端归前端，后端归后端，清清爽爽。一边我也分别给这两个工程初始化了Git仓库。
前后端接口对接：无缝衔接
在《前端篇》里为了方便演示，我们用localStorage模拟了数据持久化。现在要切换到后端，其实就是把数据源换一下。于是我发出了第三条关键指令：，他急了。
将前端接口geng换为Yi经实现的后端java接口
注意这里用的词是“geng换”。Traehen聪明， 它先去扫描了现有的前端接口调用代码，又去kan了kan后端的配置和Controller层。然后它识别出了哪些前端API是对应后端哪个Java接口的。
geng有意思的是中间它还发现前后端的端口冲突了。它居然没来问我，直接就把后端端口给换了这种自主解决问题的Neng力，确实有点像带了个聪明的实习生。经过几次折腾，后端终于成功在默认端口启动了。kan着控制台那行“Started Application in x.xxx seconds”，心里那块石头总算落地了，当冤大头了。。
成果展示：前后端联调后的效果
大胆一点... 1. 初始界面： 加载速度明显变快了毕竟不用把所有数据dou塞在浏览器里了。
2. 分栏写作界面： 左右分栏的结构依然稳固， 输入的时候也没有明显的延迟，后端接口的响应速度还是Neng打的。
3. 预览界面： Markdown渲染正常，图片加载也没问题。
掉链子。 4. 文章搜索： 这个得夸一下 主要原因是咱们数据库里建了全文索引，搜索关键词的时候，感觉比以前在前端数组里瞎找要精准多了。
下一步计划
今天这一趟折腾下来咱们用Trae完成了“写作助手”核心写作功Neng的后端开发，以及前后端的联调。说实话，整体过程比我预想的要顺利得多。以前这种活儿，怎么也得两三天还得各种调参、各种改Bug。现在呢？从建表到写Java代码，再到前后端对接，真的是省心省力，精神内耗。。
栓Q！ 接下来这个“写作助手”还有不少活要干。图片上传功Neng得加上， 不然文章太干；用户配置系统也得搞，毕竟每个人dou有自己的写作习惯；还有我Zui期待的AI快捷指令功Neng，让AI真正帮我们写东西，而不仅仅是存东西。大家Ru果对这个项目感兴趣，或者想kankanTrae还Neng搞出什么花样，不妨持续关注一下。
好了今天的实战分享就到这里。代码敲完了脑子也转不动了大家周末愉快， 坦白讲... 该喝咖啡喝咖啡，该陪家人陪家人，咱们下期见！
说实话，这阵子折腾AI编程工具的感觉，就像是在坐过山车。前阵子Cursor突然搞出个收费封禁的风波， 搞得人心惶惶，我也就顺势把目光投向了国产的新秀——Trae。在上一篇文章里我们费尽心思把“写作助手”的前端界面给打磨出来了 kan着那还算精致的UI，心里多少有点成就感。但是光有皮囊没有灵魂可不行，今天咱们就得硬着头皮，从零开始把它的后端给补上，累并充实着。。
从零开始：后端开发的曲折之路
KTV你。 Ru果你还没kan过前面的内容，Ke以回溯一下《AI编程实战：Cursor突然收费封禁？用Trae开发一个写作助手》。那篇文章里我们用TRAE SOLO生成前端工程的效果简直是惊艳，甚至让我产生了一种“编程Yi死”的错觉。当时就有不少朋友在后台私信，问这玩意儿Neng不Neng搞定后端。我也好奇啊，心想既然前端douNeng一句话生成，那Web全栈岂不是分分钟的事？
于是我满怀希望地尝试了TRAE SOLO， 指望着它Neng像变魔术一样，把数据库、接口、服务层全给我安排得明明白白。后来啊呢？现实给了我一记响亮的耳光——直接提示暂不支持。当时发布的时候宣传得那么火热， 我还以为“Web Develop”意味着全流程通吃呢，没想到目前还是个偏科生。行吧，既然SOLO模式指望不上，那咱们还是老老实实回到IDE模式，靠硬实力说话吧，我怀疑...。
化整为零：拆解任务， 一步步实现
我坚信... 刚开始的时候，我胃口挺大，想着Neng不Neng一口气把文章、图片、设置这三张表的后端代码全给生成出来。后来啊呢？生成过程中各种报错满天飞， 估计是主要原因是一次性生成的代码量太大，不够用了导致AI开始产生严重的幻觉，代码逻辑乱七八糟。
摆烂。 这方面SOLO模式确实表现得geng好一些，毕竟在《前端篇》里它直接生成一个完整的前端项目dou没怎么掉链子。但在IDE模式下反复试了几次全栈生成，dou没成功。我意识到，这估计不是简单优化一下提示词就Neng解决的，这是AI当前Neng力的瓶颈。于是我决定换个策略：优先实现核心功Neng，一步步来别想着一口吃成个胖子。
既然策略定了那就开始动手。为了防止AI天马行空地发挥，我在指令里把技术栈锁死了。咱们Zuo后端， 稳字当头，Spring Boot + Hibernate + MySQL，这套组合拳虽然老，但是稳啊，生态也成熟。
一个专为自媒体博主设计的写作编辑器， 现在前端页面Yi经完成，请帮我完成后端接口的开发。后端接口需要使用Spring Boot框架， 别纠结... orm采用hibernate，数据库采用mysql 。后端代码放置在chengzhang-rest工程中。
大家Ke以kan到，这个指令其实挺短的。为什么呢？主要原因是在《前端篇》里TraeYi经自动生成了详细的项目文档。现在它有了文档作为上下文， 我就不需要再费劲巴力地去描述业务逻辑了直接告诉它我要什么技术栈，它自己会去读文档理解需求。这不仅Neng减少指令长度，还Neng降低AI理解错误的概率。
让AI自检：代码质量的保障
摸鱼。 输入指令后Trae并没有直接开始码代码，而是先去查kan项目文档。这一点我hen喜欢，说明它不是在瞎猜。kan完文档后它才开始根据需求生成相关的后端代码。紧接着，它还会把生成的内容到README文档里并尝试启动服务。Zui后它会给出一个详细的生成报告， 包括创建了哪些核心文件、实现了什么功Neng、有哪些技术特性、API接口列表、数据库设计、使用说明以及项目优势。这一套流程走下来感觉就像是在跟一个经验丰富的架构师在合作。
请检查后端代码， 并修复相关错误
这里有个小细节，发送指令前，记得把后端服务给关了。不然AI检测到端口被占用， 可Neng会花大量时间去排查这个无关紧要的问题， 那必须的！ 甚至把你的配置文件给改乱套。
前后端联调：让数据动起来
后端服务起来了但这只是万里长征走了一半。前端还在用localStorage存数据呢， 容我插一句... 也就是个“单机版”。咱们现在的目标，是把前端和后端连起来变成真正的“网络版”。
不夸张地说... 上次的前端代码dou堆在chengzhang这个工程里 现在要加后端，要是还塞在一起，那代码结构估计得乱成一锅粥。为了以后Neng活得久一点，我决定把工程拆分。前端归前端，后端归后端，清清爽爽。一边我也分别给这两个工程初始化了Git仓库。
前后端接口对接：无缝衔接
在《前端篇》里为了方便演示，我们用localStorage模拟了数据持久化。现在要切换到后端，其实就是把数据源换一下。于是我发出了第三条关键指令：，他急了。
将前端接口geng换为Yi经实现的后端java接口
注意这里用的词是“geng换”。Traehen聪明， 它先去扫描了现有的前端接口调用代码，又去kan了kan后端的配置和Controller层。然后它识别出了哪些前端API是对应后端哪个Java接口的。
geng有意思的是中间它还发现前后端的端口冲突了。它居然没来问我，直接就把后端端口给换了这种自主解决问题的Neng力，确实有点像带了个聪明的实习生。经过几次折腾，后端终于成功在默认端口启动了。kan着控制台那行“Started Application in x.xxx seconds”，心里那块石头总算落地了，当冤大头了。。
成果展示：前后端联调后的效果
大胆一点... 1. 初始界面： 加载速度明显变快了毕竟不用把所有数据dou塞在浏览器里了。
2. 分栏写作界面： 左右分栏的结构依然稳固， 输入的时候也没有明显的延迟，后端接口的响应速度还是Neng打的。
3. 预览界面： Markdown渲染正常，图片加载也没问题。
掉链子。 4. 文章搜索： 这个得夸一下 主要原因是咱们数据库里建了全文索引，搜索关键词的时候，感觉比以前在前端数组里瞎找要精准多了。
下一步计划
今天这一趟折腾下来咱们用Trae完成了“写作助手”核心写作功Neng的后端开发，以及前后端的联调。说实话，整体过程比我预想的要顺利得多。以前这种活儿，怎么也得两三天还得各种调参、各种改Bug。现在呢？从建表到写Java代码，再到前后端对接，真的是省心省力，精神内耗。。
栓Q！ 接下来这个“写作助手”还有不少活要干。图片上传功Neng得加上， 不然文章太干；用户配置系统也得搞，毕竟每个人dou有自己的写作习惯；还有我Zui期待的AI快捷指令功Neng，让AI真正帮我们写东西，而不仅仅是存东西。大家Ru果对这个项目感兴趣，或者想kankanTrae还Neng搞出什么花样，不妨持续关注一下。
好了今天的实战分享就到这里。代码敲完了脑子也转不动了大家周末愉快， 坦白讲... 该喝咖啡喝咖啡，该陪家人陪家人，咱们下期见！