AI编程实战：使用Trae从零开始实现写作助手的后端开发及前后端联调

前言

上回把"写作助手"核心的前端页面搭得差不多了，UI看着也还可以，今天我们从零开始实现后端功能。

《AI编程实战：Cursor突然收费封禁？用Trae开发一个写作助手（前端篇） - 掘金》

上周尝试了 TRAE SOLO 生成完整前端工程，效果还不错，正好也有朋友关注后端实现的效果，就想着直接通过 TRAE SOLO 试试。

《TRAE SOLO 实测，从需求到上线，这次真的只需要一句话了（附 SOLO CODE 获取方式） - 掘金》

结果，直接暂不支持。

当时发布的时候说 Web Develop，我还以为能 Web 全栈开发呢。

好了，既然 SOLO 不行，那还是老实地使用 IDE 模式吧。

项目介绍

上期时间过去的有点久了，简单回顾下实战的项目情况。

现有的文章协作工具都有些不太满意，再加上 AI 辅助写一个小工具比较简单，就想自己搭建一套写作助手。

实现基本的写作管理。
方便输出为各平台样式。
支持定义各种 AI 快捷操作。

本次分享主要实现核心功能------"写作管理"的后端部分。

前期工作

工程化调整

上次的前端代码都在 chengzhang 工程中，现在要实现后端功能，都放在一个工程里不太方便管理。

拆分为两个工程：

chengzhang-vue：前端工程
chengzhang-rest：后端工程

同时也分别初始化了 Git 仓库。

Git 在 AI 协同模式下真的非常重要。

虽然大部分 AI IDE 已经支持 checkpoint 回滚了，但 Git 依然可以帮助我们最后兜底。

简化项目

最开始是想把文章、图片、设置三张表的后端代码一次性生成的。

结果生成代码的时候各种报错，估计是生成太多，上下文处理不够用了，导致幻觉出现的可能性增大。

这方面 SOLO 的效果更好一些，《前端篇》中直接生成一个完整前端项目都没什么问题。

反复试了几次都没成功，估计不是简单优化提示词能解决的。于是打算优先实现核心功能，一步步来。

这一简化立马见效，生成一次+自检一次，代码就可以了。

实战记录

整个实操环境：TRAE IDE + Claude-4-Sonnet。

初版生成

指令

css 复制代码

一个专为自媒体博主设计的写作编辑器，现在前端页面已经完成，请帮我完成后端接口的开发。
后端接口需要使用Spring Boot框架，orm采用hibernate，数据库采用mysql 5.7。
后端代码放置在chengzhang-rest工程中。

这里可以看到指令比较简单，原因是《前端篇》中已经生成了文档，结合文档可以大大减少指令的长度。

同时，为了减少 AI 发挥的空间，我指定了技术栈。

过程

TRAE 会先查看文档。

然后根据需求生成相关后端代码。

再接着就是总结到RERDME文档中，并启动服务。

最后就是整个生成过程的总结，包括创建的核心文件、实现的核心功能、技术特性、API 接口列表、数据库设计、使用说明、项目优势。

结果

后端代码、包括配置文件、初始化 SQL 都已经生成，但是有些语法错误。

数据库

上一步，初始化 SQL 已经生成了，我们先把 SQL 执行好。

核心建表 SQL 如下，其余 SQL 已省略。

sql 复制代码

CREATE TABLE `articles` (
  `id` varchar(36) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文章ID',
  `title` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文章标题',
  `content` longtext COLLATE utf8mb4_unicode_ci COMMENT '文章内容（Markdown格式）',
  `summary` varchar(500) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文章摘要',
  `status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'draft' COMMENT '文章状态：draft-草稿，published-已发布',
  `category` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文章分类',
  `tags` text COLLATE utf8mb4_unicode_ci COMMENT '文章标签（JSON格式存储）',
  `word_count` int(11) DEFAULT '0' COMMENT '字数统计',
  `read_time` int(11) DEFAULT '0' COMMENT '预计阅读时间（分钟）',
  `images` text COLLATE utf8mb4_unicode_ci COMMENT '文章图片（JSON格式存储）',
  `created_at` datetime NOT NULL COMMENT '创建时间',
  `updated_at` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_title` (`title`),
  KEY `idx_status` (`status`),
  KEY `idx_category` (`category`),
  KEY `idx_created_at` (`created_at`),
  KEY `idx_updated_at` (`updated_at`),
  KEY `idx_status_category` (`status`,`category`),
  KEY `idx_status_created_at` (`status`,`created_at`),
  KEY `idx_category_created_at` (`category`,`created_at`),
  FULLTEXT KEY `idx_content` (`content`),
  FULLTEXT KEY `idx_title_content` (`title`,`content`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='文章表'

AI 自检

第一步生成后，项目会自动编译，发现有些编译错误。

根据最佳实践，我们增加一步 AI 自检。

指令

复制代码

请检查后端代码，并修复相关错误

过程

首先，检查后端服务运行状态，如果没有启动，会重新启动。

发送指令前，记得把后端服务关闭，不然这里会发现端口被占用，AI 会花费大量功夫去解决这个无关问题。

然后自动解决编译问题。

这个过程会重复多次，一直到编译没有错误，正常启动。

结果

最终，后端在 8081 端口正常启动。

甚至，中间发现前后端端口冲突，AI也会自动帮你更换。

前后端联调

此时，后端服务已经正常启动，下面就要将前端、后端联通了。

指令

复制代码

将前端接口更换为已经实现的后端java接口

为了方便迁移，《前端篇》中我们使用 localStorage 实现了基本功能，因此，这里使用了"更换"。

过程

先是扫描现有的前端接口、后端配置。

然后，识别出可用的后端 API。

再接着，把 API 调用代码更新到 articles.js 中。

最后，再更新前端相关的配置文件，确保调用效果。

结果

更新后，自动打开预览。

SOLO 中的"选择元素"在 IDE 模式中也可以使用，这个特性修改具体的样式还是很好用的。

简单测试增加几篇文章，可以看到已经落库了。

最终效果

初始界面

分栏写作界面

预览界面

文章搜索

结语

今天，我们通过 TRAE 完成了"写作助手"写作功能的后端开发，整体过程还算顺利。

不管是建表、Java、前后端对接，真的省心。

接下来打算继续实现图片上传、用户配置，以及最关注的 AI 快捷指令等功能，大家如果喜欢，可以持续关注下。

好了，今天就到这里，大家周末愉快~