没写一行代码,用Trae搭了个简易网站后台
- 2026-09-23 09:34:09
没写一行代码,用Trae搭了个简易网站后台点击上方蓝字关注我，加个星标不迷路 我是为了熟悉trae IDE这个软件，想着官网功能比较少，就打算做个简单的官网试试。 之前用Trae做了企业官网前端，想着做事要有始有终，今天就分享怎么用Trae做个简易的网站后台，包含：数据存储、联系表单、访客统计、管理面板。普通人也能做但要很耐心呢。 如下是网站的前端、后台、API（让前后端数据进行交互）。 
▲ 官网首页 
▲ 官网后台面板 一、网站后台要做什么 一个简单官网后台，需要这几个功能： • 联系表单：用户提交的信息要存起来• 访客统计：知道多少人看了你的网站• 管理面板：在一个页面看完所有数据 听起来复杂，用Trae做，就是几句话的事。 二、用Trae做后端 打开Trae，在SOLO Coder里输入这段话： 你是一位后端开发工程师。请在当前项目目录下创建后端服务，要求： 技术栈：Node.js + Express + TypeScript + Prisma ORM 项目结构：采用分层架构（controllers/services/routes/models） 数据表设计： - Contact表：id, name, email, phone, message, createdAt - Visitor表：id, ip, page, visitedAt API 接口： - POST /api/contact - 提交联系表单 - GET /api/contacts - 获取联系表单列表（支持分页） - POST /api/visitor - 记录访客 - GET /api/visitors/stats - 获取访客统计数据 其他要求： - 使用 SQLite 作为开发数据库 - 统一响应格式和错误处理中间件 - 配置 CORS 允许前端跨域访问 - 后端服务运行在 3xxx 端口 请先给出技术方案给我确认，确认后再开始编码。 AI会先给你技术方案，你在对话框中输入”执行“，确认后自动生成代码。后端框架就出来了。看到如下图就是成功了 
运行如下的命令，浏览器打开 http://localhost:3xxx/api/health，如果返回 OK 说明后端跑起来了。 
注意：这边真不知道成功没就截图问AI是否成功了，它会给你答案的。 三、前后端联调 后端做好了，接下来对接前端表单（底下提示词的xxx是你具体的端口号比如3002）： 请将前端联系我们页面的表单与后端 API 进行对接： 1. 创建一个 API 服务层（src/services/api.ts），封装 axios 请求 2. 表单提交时调用 POST /api/contact 接口 3. 添加表单验证：姓名必填、邮箱格式校验、手机号格式校验 4. 提交成功后显示友好的成功提示（"提交成功，我们会尽快联系您"） 5. 提交失败时显示具体的错误信息 6. 提交按钮添加 loading 状态，防止重复提交 注意：后端服务运行在 localhost:3xxx，前端运行在 localhost:xxx。 这一步执行后出现如下图成功。 
你可以去前端联系人那边填入信息提交，然后看下 /api/contact 有新增了一行联系人记录就是正确的了。 四、做管理后台 让AI生成一个简单的管理面板： 请实现访客统计功能： 1. 前端在页面加载时自动发送访客信息到后端 POST /api/visitor 2. 后端记录访客的 IP、访问页面、访问时间 3. 创建一个简单的管理后台页面（路径 /admin），显示： - 今日访客数 - 联系表单列表（姓名、邮箱、时间、状态） - 简单的数据统计 4. 管理后台导航栏添加"返回官网"链接 
这样每次有人访问你的网站，后台都能看到。 五、数据库完善 可以对联系人列表进行增删改查： 请完善当前项目的数据库功能： 1. 添加数据库迁移功能（Prisma Migrate），确保数据库结构变更可追踪 2. 添加数据库种子数据（seed.ts）：插入 3-5 条测试联系表单数据 3. 实现联系表单的 CRUD 完整接口： - GET /api/contacts - 分页获取列表（支持按状态筛选） - GET /api/contacts/:id - 获取详情 - PUT /api/contacts/:id - 更新状态（已读/未读） - DELETE /api/contacts/:id - 删除记录 4. 优化访客统计查询性能，添加适当的索引 请先给出技术方案给我确认，确认后再开始编码。 技术方案没问题就可以直接输入"执行"就会自动写代码。出现如下图就是成功了。 
▲ 联系人API创建成功 成功的标志就是你前端添加的联系人都会在列表显示，可以对列表进行增删改查和状态修改。 六、常见问题 Q：不了解后端技术能做好吗？能。AI生成代码后，你要做的就是理解逻辑、测试功能，不需要自己写代码。 Q：数据库怎么选？SQLite最适合入门，文件形式存储，不用单独装数据库软件。 Q：CORS报错怎么办？让AI帮你配置后端允许跨域，或者用代理转发。 七、总结 用Trae做网站后台，分这几步： 1. 后端项目初始化2. 前后端联调API3. 访客统计功能——后台可以看到有多少人访问了页面4. 数据库完善——增加点测试数据，对联系人列表进行增删改查功能 我这个是比较简单啦，每一步都是几句话的事。你如果对做的结果不确定的时候，可以反问AI你怎么测试它把这个功能做好了。 你要对你要做的东西要有大概认知就是。有问题你就让AI改。目前trae用下来GLM挺适合写代码，推理能力挺强还会在末尾给你几个选项选，有些是你没考虑到的。 有问题评论区问我，看到了都会回。希望对大家有帮助。
▲ AI生成的后端API
▲ 启动后端命令
▲ AI生成的管理后台
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
