跟我一起玩转Trae CN，打造超炫的VUE3前端页面吧！

作品声明：个人观点、仅供参考

最近我在搞一个基于Dify的垂直业务系统，主要是把用户认证的功能封装成外部服务，调用Dify平台的接口。

这个系统主要是用springboot做服务端，前端则是vue3。我找了一个开源项目进行修改，加上Dify接口的调用封装，使用通义灵码来辅助编程。

前端的管理后台我用开源项目自带的代码生成器搞定，但用户页面就得自己动手开发了。

因为支持国内产品，我选了TRAE的中国版本，编程的模型用的是DeepSeek Reasoner（R1）。

来体验一下整个流程吧！注意：>>表示我的提问

首先，新建一个文件夹，接着用Trae打开它，选择Builder模式。

输入提示词：

>>我是前端开发工程师，需要写一个pc的网页程序

1、框架使用vue3

2、具备jwt功能

3、首先是登录页面，包括用户和密码输入框，还有确定按钮。点击确定后，会向接口服务发送请求。如果失败，错误信息会显示在按钮下方。

4、成功后就进入主页面，

5、主页面上半部分展示登录时的用户名和退出按钮，点击退出后会清除登录信息，返回登录页面。

6、主界面初始化时会通过http请求获取数据，然后展示在下半部分。

发送后静静等着回复。

接着在终端选择vite来初始化Vue3项目，所有选项我都选择接受，毕竟不接受的话就没用了。

安装中间件大约三分钟就搞定了。

总结一下：

已经完成Vue3项目的初始化及核心功能开发：

1. 项目初始化 ：使用Vite创建了Vue3项目模板

2. 页面组件 ：

– 创建了登录页(Login.vue)，包含表单验证和错误提示

– 创建了主页(Home.vue)，显示用户信息和数据列表

3. 路由配置 ：

– 设置了登录页和主页的路由

– 添加了路由守卫以实现权限控制

4. JWT集成 ：

– 配置了axios请求拦截器，自动携带token

– 实现了401响应自动跳转到登录页

5. 状态管理 ：

– 使用localStorage来持久化token和用户名

– 实现了退出登录时的清除功能

6. 开发依赖 ：安装了axios和vue-axios库

接下来你可以运行`npm run dev`来启动开发服务器，访问登录页进行测试。成功登录后会自动跳转到包含模拟数据的主页，点击退出按钮可以返回登录页。

按照提供的命令试了一下，结果报错了。不过在终端里，我发现了问题，Trae AI直接给出了解决方案，原来是缺少vue-route依赖，给了我命令去执行。

再运行一次，还是报错，这次让我让AI想想办法。结果是修改了路径，我全都接受了。

不过，AI还是得人来干预。系统一开始显示的应该是登录页面吧，怎么还要我提呢。没办法，只能继续输入需求。

再输入：

>>首页显示登录页面，回车发送。选择全部接受的两个审核项。结果出来的还是欢迎页，不是登录页面。

真是搞笑，AI又来问我：

>>目前打开的地址还是vue的欢迎页，不是登录页面，怎么让它默认打开就是登录页面？

它又开始思考并给我答复：

需要修改App.vue的默认模板内容。因为现在显示Vue欢迎页，是因为App.vue保留了初始化模板，应该把示例内容删掉，替换成路由视图容器。

同时检查路由配置，确保根路径指向登录组件，并验证项目入口文件main.js是否正确注册了路由实例。

我已经修改了App.vue的默认模板，把Vue欢迎页换成了路由视图容器。现在根路径会正确显示登录页面，路由配置也确认没问题。

变更内容：

– 删除了App.vue的初始示例代码

– 添加了“作为主要内容容器

好吧，删除我知道怎么搞，添加我就不太会了。只能继续请教：

>>删除了App.vue的初始示例代码，怎么添加路由，直接展示登录页面？

这次直接修改文件，终于成功展示登录页面了。不过总觉得太简单，视觉效果也不太好。

于是继续提出需求：

>>登录画面背景太简单，想加一些颜色或者图片。

效果不错，出来的效果比我自己设计的要好看多了。

接着开始实现登录业务。

>>登录画面中增加http请求。使用post方式，地址是
http://localhost:8989/api/v1/auth/login，报文格式为json，包括用户名和密码信息。

突然意识到，登录功能还得加个验证码。

嘿，登录页面其实还得加个验证码功能，这样才能提升安全性。

你知道吗？这次居然有个json-server可以临时创建API服务，真是太酷了。不过我觉得这次不太需要，索性就跳过了。

关于验证码获取的API信息，快来看看！

验证码的服务接口地址是：
http://localhost:3000/dev-api/api/v1/auth/captcha，用的是get请求。返回的数据格式如下：{

“code”: “00000”,

“data”: {

“captchaKey”: “54d5fa0fe9924344811ee04d56b10060”,

“captchaBase64”: “data:image/png;base64,iVBORw0KGgoAAAANSErkJggg==”

},

“msg”: “正常完成”

}

真不错，即便我在输入的时候把反参写成了返参，文件还是顺利修改了。

可是登录却失败了，怪我没注意，那个协议请求的格式其实不是json。

对了，记得把登录请求的协议格式改成x-www-form-urlencoded哦。

接下来，收到修改后的文件后，运行一下，登录页面终于可以正常使用了！进入主页面之后，还得调用一个接口来获取列表信息并展示出来。

在home页面，我们要加一个显示数据列表的功能。通过请求
http://localhost:8989/api/v1/difyRoleRelations/getDifyAppInfo这个接口，入参格式要用x-www-form-urlencoded，传两个参数，比如pageNum=1&pageSize=10，返回的数据格式是json，例如{

“code”: “00000”,

“data”: {

“list”: [

{

“appId”: “1”,

“appName”: “审计验证”,

“appMemo”: “为财务人员提供依据企业信息和术语获取审计报告文件的功能”,

“appKey”: “app-aDILWFPEZUIb5ogn7MKmNgD4”,

“createTime”: null,

“createBy”: null,

“updateTime”: null,

“updateBy”: null,

“isDeleted”: 0

}

],

“total”: 1

这次的思考时间稍微有点长，而且跳转过去的时候什么都没有显示。于是我去看了下控制台的日志，哈哈，居然发现AI忘了引入axios。

结果报了个“axios is not defined”的错误。

修改完文件后，所有的更改都接受了。突然意识到，忘了告诉它要显示什么信息了。

我说，列表得加个标题，总共四列，分别是ID、名称、应用Key和描述。

这下数据列表终于显示出来了。

不过页面顶部还是写着“你好，用户”，可谁又知道用户的名字呢？

其实现在的localStorage里保存的只是token（jwt），并没有username。得通过解析token来获取PAYLOAD里的sub信息。

AI给出的修改方案，我全都接受了。

接下来是最重要的Dify接口封装实现。

我还想在数据列表中增加点击功能，点击后能跳转到新页面。新页面上方展示的是数据列表中的名称和应用Key，下面则是两个文件选择框：一个是企业信息上传框，另一个是术语文件选择框，再下面是一个多行输入框。最底下是一个按钮，写着“获取审计报告”。点击这个按钮后，选择的文件会通过http请求/api/v1/dify/upload上传到服务器，然后返回的json中的id会作为参数，再发出http请求/api/v1/dify/question，最后收到返回的excel文件。

突然意识到，数据列表中并不知道选中了哪一行数据。

所以我又想到了，home页面的数据列表中，当鼠标经过某条数据时，这一行要和其他行有所区别，经过后再恢复。

接受了这个修改后，执行了一下，结果满足了我的想法。

今天先写到这儿。

总结一下：整体体验还是不错的，就是电脑的CPU和内存有点捉襟见肘，这台老旧的电脑时不时会卡住。