React+Go实战体验AI大模型IDE(Trae)，30分钟轻松搞定前后端服务我正在参加Trae「超级体验官」创意实践

我正在参加Trae「超级体验官」创意实践征文， 本文所使用的 Trae 免费下载链接： www.trae.ai/?utm_source…

本篇文章仅记录在使用Trae作为开发的IDE，从0-1快速闭环实现一个react+go的Todolist项目。

下面详细介绍一下Trae的入门使用和深入实战项目体验

Trae，**它是一款对标 Cursor 和 Windsurf 的全新 IDE，也是一款真正为中文开发者量身定制的开发助手。

Trae 底层集成了国外主流的大模型 Claude 3.5，提供了 Builder 和 Chat 两种模式 Builder 模式：它能根据开发这要求，轻松完成从零到一的项目构建 Chat 模式：支持编辑器内实时提供建议代码，快捷高效

Trae除了作为工具之外，亦可以作为一个能够理解上下文包括文件的开发者，共建项目是AI的另一个起点。无论是专业开发者还是新手开发者，都能体验到 Trae 带来的效率提升。

目前只支持MAC用户，安装地址：www.trae.ai/

1、首次安装，进入设置界面 Pasted Graphic.png

2、配置主题 Pasted Graphic 1.png

3、导入已有的vscode等相关配置，非常nice Pasted Graphic 2.png

4、支持快捷命令行启动 Pasted Graphic 3.png

5、一键登录，可使用 GitHub、Google 账号三方登录，也可以使用 Trae 账号登录 Pasted Graphic 4.png

6、登陆后打开IDE界面 Pasted Graphic 6.png

接下来，进入实战环节

新建文件夹Trae-Demo, 通过IDE打开

使用Builder 模式进行项目搭建，一键完成前端项目的搭建，非常高效，如果有特殊要求，也可以进一步通过手动或者工具进行调整

**请根据下面的要求，编写一个TodoList应用**
1、前端使用vite+react+typescript
2、使用t-design组件库
3、前端项目文件夹frontend

Pasted Graphic 9.png

cd frontend
npm install 
npm run dev

运行出现报错，将错误添加到对话框进行检查 Pasted Graphic 10.png

具体错误原因:

当前Node.js v16.14.0版本过低
npm v10.9.2需要Node.js ^18.17.0或>=20.5.0版本
由于版本不兼容，导致vite无法正常启动项目

使用n切换node版本

Pasted Graphic 11.png

重新运行，IDE内直接预览页面，项目成功启动 Pasted Graphic 14.png

此时的项目还没有应用完成todolist页面，执行提示完成页面搭建

根据要求完成todolist页面，并应用.png

todolist页面完成搭建 Pasted Graphic 16.png

接下来就是完善后端服务，添加如下要求

1、结合前端页面，新增后端接口，使用goframe框架
2、接入使用mysql
3、记录操作点击事件埋点功能，并通过echarts可视化展示操作记录
4、后端项目文件夹end

可以看到一键就完成了基本的后端项目搭建和接口的编写，监听8080端口

Pasted Graphic 17.png

同时前端界面也添加了接口请求处理逻辑，执行一下npm run dev，看前端项目是否能够运行

Pasted Graphic 18.png

前端页面出现错误，通过AI会话问题定位，检查发现前端代码中存在JSX语法错误，导致页面无法正常渲染。问题出在App.tsx文件中的Tabs组件结构有误，需要修复标签的嵌套关系 Pasted Graphic 19.png 修复之后 Pasted Graphic 20.png 运行正常，并可以看到前端的接口请求 Pasted Graphic 21.png

管理数据库和数据库表的处理

初始化数据库表结构，创建sql文件 Pasted Graphic 23.png

提前安装好mysql, 启动命令：mysql.server start

安装vscode mysql插件，连接本地数据库 Pasted Graphic 25.png

连接成功 Pasted Graphic 26.png

登陆数据库mysql -u root -p, 本地登陆没有设置密码，删除自动生成的mysql登陆密码，修改数据库名称为traeTodo 自动生成的link Pasted Graphic 27.png 修改之后的link

创建数据库名为traeTodo的sql

进入mysql, 创建数据库和数据库表,可以看到一键执行数据库建立成功，简直不要太高效！！！ Pasted Graphic 31.png

后端使用了GoFrame框架，并且已经配置好了MySQL数据库连接。启动服务前需要确保MySQL服务正在运行，并且数据库和表已经正确创建。启动后，服务将在8080端口监听，提供Todo相关的API接口。

运行go run main.go后端服务，出现如下报错，AI分析缺少go的相关依赖，一键执行安装

Pasted Graphic 32.png

后端服务启动成功

Pasted Graphic 33.png

接下来继续看前端的接口请求状况再次查看前端请求接口，出现500服务异常，将问题原因添加到AI会话中，进行代码诊断检查，发现没有配置前端端口的代理 Pasted Graphic 34.png

再次运行调用接口，出现跨域问题，后台请求自动添加允许跨域 Pasted Graphic 37.png Pasted Graphic 39.png

再次运行调用接口，出现接口返回如下报错，通过IDE进行检查修复检查到后端缺少MySQL驱动程序，这导致数据库连接失败。需要在go.mod中添加MySQL驱动依赖，并在main.go中导入该驱动。同时确保config.yaml中的数据库连接配置正确，这样后端就能正常连接到MySQL数据库了。

Pasted Graphic 38.png Pasted Graphic 40.png

接口请求成功，页面操作埋点记录成功，整个todolist应用大功告成！！！

Pasted Graphic 43.png

埋点记录数据 Todo List.png

总结一下Trae的实战体验

作为一款AI开发者助手的IDE，能够无缝接入VSCode相关配置和插件，开发体验基本一致。除了Chat能力之外，还具有Builder功能，与开发者共建项目，能够一键完成0-1项目的基本搭建，着实高效！！！项目运行起来之后，开发者可以更多的关注业务逻辑和优化处理，根据AI大模型提供的IDE编辑器内对话能力，快速对现有代码进行优化和问题排查，为开发者的提效有着显著的帮助，未来可期！！！

React+Go实战体验AI大模型IDE(Trae)，30分钟轻松搞定前后端服务