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