codeBuddy 开发电商后台系统

codeBuddy 开发电商后台系统 codeBuddy 开发电商后台系统 Modified September 22, 2025 实现完成后，我们打开看看效果，这个效果不是很满意，先测试下功能 点击注册，看看能不能注册成功。 这里报错了， 看样子是调用的 API url 不对，截图发给 codeBuddy 确实是 url 没有正确的配置。 这里也给出了解决方案，先去创建一个项目 Code block Bash Copy 1、创建Supabase项目： 访问 Supabase官网 注册并登录 创建一个新项目 2、获取项目凭证并更新.env文件： 在Supabase项目仪表板中，点击左侧菜单的"设置" 选择"API" 复制"Project URL"和"anon public"密钥 将这些值替换到.env文件中的占位符 3、在Supabase中创建必要的数据表： 进入Supabase项目的"SQL编辑器" 执行以下SQL创建users表： 打开 https://supabase.com/，点击 Dashboard，打开仪表盘。 先创建一个 组织。 组织创建完成，接着创建项目。 填写项目名称、数据库密码。 创建完成后，点击刚刚创建的项目，在侧边栏找到 Project Setting。 点击 Data API ，复制 URL ，这就是我们要调用的 API URL，后面需要进行替换。 实现完成后，我们打开看看效果，这个效果不是很满意，先测试下功能 点击注册，看看能不能注册成功。 这里报错了， 看样子是调用的 API url 不对，截图发给 codeBuddy 确实是 url 没有正确的配置。 这里也给出了解决方案，先去创建一个项目 Supabase官网 打开 https://supabase.com/，点击 Dashboard，打开仪表盘。 先创建一个 组织。 组织创建完成，接着创建项目。 填写项目名称、数据库密码。 创建完成后，点击刚刚创建的项目，在侧边栏找到 Project Setting。 点击 Data API ，复制 URL ，这就是我们要调用的 API URL，后面需要进行替换。 接着在侧边栏点击 Table Editor 就能看见刚刚创建的这张表 现在我们返回页面，试试注册能不能成功。 打开控制台可以看到，接口调用成功了。 但是查看一下数据库里有没有数据，接下来就是一顿拉扯，执行 SQL，重新注册。 终于注册的用户，在库里有数据了。 再进行测试一下登录功能，登录和获取用户信息接口也正常。 登录进来，发现界面还是比较混乱的。 提示词没有优化好，后续可以再进行测试一下。 内嵌 Figma 这让设计和前端开发，都大大的提高了效率。预览、部署、提示词优化，确实对新手比较友好，更加适合新手上手 AI 编程的一款工具，确实也很期待腾讯后续的优化。 结尾： 昨天晚上字节旗下的 coze 宣布开源，今年真的是 Agent 爆发元年，群雄逐鹿。 作为普通人，唯有持续折腾，才能破局。 大家好，我是小林，元Coding 主理人，这个案例是和亦辰一起做的。 一、codeBuddy 做网页 中间出现了卡顿，它自己会进行判断，并进行继续执行 开发完成，不需要你手动再去打开 html 页面了，直接帮你自动执行 而且在右侧还有预览区域，直接帮你展示出来，相当于所见即所得 不仅可以自动预览，下面还有个 Publish CloudStudio，点击后，自动部署到远程服务器。 而且还生成了二维码 会出现危险网站 尝试了几次还是不行。 这个问题应该有更新版本，现在是解决了。 源码： 二、登录页面 我们把刚刚优化后的提示词进行实现 模型我们选择 Claude4，使用设计模式，组件选择 TDesign 询问设计风格，我们选择商务专业风格。 接下来就是一顿输出 也生成了 md 说明文档，但是这里面 UI 组件库怎么用的不是选择的 TDesign 检查 API 接口也预留。 实现完成后，并且在编译器里就运行了这个项目，直接能进行预览，不用打开浏览器再进行查看。 我们来看下效果，整体看起来还是不错的。 不仅可以自动预览，有一个 Publish CloudStudio，点击后可以直接把项目进行部署，这个功能有点方便。 直接生成了预览链接：http://7f44378cad7c48949907169eb5d2e8e9.ap singapore.myide.io http://7f44378cad7c48949907169eb5d2e8e9.ap singapore.myide.io 除了预览链接，还会生成预览二维码。 问它一下，为什么刚刚选择了 TDesign Components，但是使用的却是 shadcn/ui 组件库？ 系统自动使用的是 shadcn/ui 组件库。 选择让它重新创建一个 TDesign Components 来实现 部署失败后，它自己重新检查问题，并重新部署 TDesign 版本：http://cce0289c71e549b5b0edee50ece6e3aa.ap singapore.myide.io http://cce0289c71e549b5b0edee50ece6e3aa.ap singapore.myide.io 三、电商后台系统 提示词 这次我们特意使用 TDesign Components ，并且明确要求了，看它会不会使用，并且把把 设计模式 和 Plan Mode 都勾选了。 Plan Mode 就是会进行分析、设计，这个界面看起来还是很爽。 生成项目计划，然后自己完成了哪些，自己去自动更新。 刚刚我们是把 设计模式 和 Plan 模式都打开的，现在它要求我们关闭 问为什么建议关闭设计模式？ 设计模式主要是使用的是 React 快速实现前端的界面，而我这个项目需要有后端数据。 接着点击 API Keys，复制 API Key。 回到项目文件，进行替换 URL 和 API Key。 接下来进行创建 User 表，点击侧边栏的 SQL Editor ，再点击 New SQL Snippet 。 把创建表的语句复制到里面，接着点击 Run，在下方输出 Success 就说明创建成功了。