掘金 人工智能 前天 22:15
AI编程实战:使用Trae从零开始实现写作助手的后端开发及前后端联调
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文详细介绍了如何从零开始搭建一个AI写作助手,重点阐述了后端功能的实现过程。文章首先回顾了前端开发基础,并介绍了工程拆分及Git在AI协同开发中的重要性。随后,作者通过TRAE IDE和Claude-4-Sonnet,演示了如何使用Spring Boot、Hibernate和MySQL构建后端服务,包括数据库设计、API接口生成以及AI自检修复编译错误。最后,文章展示了前后端联调的整个流程,以及最终实现的写作助手效果,并预告了后续的图片上传、用户配置和AI快捷指令等功能的开发计划。

🛠️ **工程拆分与版本控制**:为了更好地管理和实现后端功能,作者将原有的前端工程拆分为独立的`chengzhang-vue`(前端)和`chengzhang-rest`(后端)两个工程,并分别初始化了Git仓库。在AI协同开发模式下,Git的重要性被强调,它能作为最终的兜底保障,即使AI IDE提供回滚功能,Git依然是关键的协同和版本管理工具。

🚀 **后端服务开发与技术选型**:利用TRAE IDE和Claude-4-Sonnet,作者为写作助手后端选择了Spring Boot框架,ORM采用Hibernate,数据库为MySQL 5.7。在简化项目结构后,AI能够高效地生成包括数据库表结构(如`articles`表)、配置文件及初始化SQL在内的后端代码,大大提高了开发效率。

🔧 **AI自检与问题修复**:在代码生成后,AI会自动进行编译和运行状态检查。作者通过具体的指令引导AI修复代码中的语法错误和编译问题,甚至能自动处理前后端端口冲突等潜在问题,确保后端服务能够稳定启动,为后续联调打下基础。

🔗 **前后端联调与功能验证**:在后端服务成功启动后,文章重点介绍了如何将前端代码中的接口调用从本地存储(localStorage)迁移至实际的后端Java接口。通过“选择元素”等TRAE IDE的特性,AI能够识别后端API并更新前端逻辑,最终实现数据的落地和功能的正常运行,并通过预览和测试验证了开发成果。

💡 **AI开发效率与未来展望**:文章展示了AI工具在全栈开发中的强大能力,尤其是在后端接口开发、数据库设计和前后端对接方面,极大地简化了开发流程。作者对AI辅助开发的顺利程度表示满意,并计划继续实现图片上传、用户配置及AI快捷指令等高级功能,以进一步完善写作助手。

前言

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

AI编程实战:Cursor突然收费封禁?用Trae开发一个写作助手(前端篇) - 掘金

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

TRAE SOLO 实测,从需求到上线,这次真的只需要一句话了(附 SOLO CODE 获取方式) - 掘金

结果,直接暂不支持。

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

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

项目介绍

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

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

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

前期工作

工程化调整

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

拆分为两个工程:

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

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

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

简化项目

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

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

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

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

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

实战记录

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

初版生成

指令

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

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

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

过程

TRAE 会先查看文档。

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

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

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

结果

后端代码、包括配置文件、初始化 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 快捷指令等功能,大家如果喜欢,可以持续关注下。

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

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

AI编程 写作助手 TRAE Spring Boot 后端开发
相关文章