不需要懂代码,30分钟搞定一个前后端分离项目
- 2026-08-28 11:19:43
今天用一种全新的方式开发项目，整个过程我手没碰过键盘，全靠"说"。
📱 那个让我崩溃的时刻
上周五下午5点，产品经理突然发消息：
"下周要上线一个微信公众号H5，功能不多：- 微信授权登录- 用户中心- 分享功能前后端分离，前端Vue3，后端Spring Boot"
我当时就懵了。
按照常规流程：
搭建项目脚手架：30分钟
写后端接口：2小时
写前端页面：3小时
联调测试：1小时
修bug：谁知道要多久
现在周五5点，搞到几点？
但我突然想起最近很火的 Vibe Coding——用中文对话让AI写代码。
我心想：死马当活马医，试试吧。
结果你们猜怎么着？
30分钟后，项目跑起来了。
今天就把整个过程分享给你们。
💡 什么是 Vibe Coding
先说个概念。
传统开发：
打开IDE → 新建项目 → 手写代码 → 报错 → 搜索 → 复制 → 调试 → 完成Vibe Coding：
描述需求 → AI生成代码 → 看一眼 → 说不满意的地方 → AI改 → 完成核心区别
传统开发是你教计算机怎么做，Vibe Coding是你告诉AI你想要什么。
举个例子：
| 我说的话 | 传统开发需要做的 | Vibe Coding |
|---|---|---|
| "微信的绿色" | 搜索微信品牌色、复制色号 | AI直接用 #07c160 |
| "要漂亮一点" | 思考UI设计、写CSS | AI自动生成渐变背景 |
| "按钮大一点" | 调padding、调fontSize | AI自动调整样式 |
你不需要知道怎么做，只需要知道你想要什么。
🚀 实战开始：我和 AI 的对话
第一次对话：创建项目
我打开 Claude Code，输入：
创建一个微信公众号项目，前端Vue3，后端Spring Boot要微信登录、用户中心功能，作者写AI杨遥
然后我就看着 AI 自动执行：
▶ 创建目录结构▶ 生成后端代码（10个文件）▶ 生成前端代码（8个文件）▶ 配置跨域▶ 配置代理
2分钟，一个完整的前后端项目就创建好了。
第二次对话：遇到问题
我启动前端，控制台报错了：
Access to XMLHttpRequest has been blocked by CORS policy以前的我：打开浏览器，搜索"CORS错误"，复制粘贴别人的代码，不知道啥意思先试试。
现在的我：直接复制错误信息，发给 AI：
后端接口报CORS跨域错误，前端3000访问后端8080被拒绝AI 回复：
这是前后端分离的常见问题，我来添加跨域配置▶ [Write] CorsConfig.java已添加：addAllowedOriginPattern("*")
刷新页面，错误消失了。
耗时：30秒。
第三次对话：开发首页
我说：
创建一个首页，要漂亮一点1. 顶部显示标题2. 中间有系统状态卡片3. 能检测后端连接4. 底部有登录按钮
AI 生成了这样的页面：
我看到：
✅ 紫色渐变背景（AI自己选的）
✅ 白色圆角卡片（AI自己设计的）
✅ 显示"后端状态：连接正常"（自动调用API检测的）
✅ 显示服务器时间（实时从后端获取的）
第四次对话：登录页
我说：
做个微信登录页面要有微信的绿色，按钮大一点方便点还要个模拟登录按钮方便我测试
AI 生成了：
注意这些细节：
微信的绿色（#07c160）——AI知道微信的品牌色
按钮够大（padding: 16px）——AI知道移动端要方便点击
模拟登录按钮——AI理解我需要测试功能
我问：怎么知道微信的绿色是这个色号？
AI回答： 微信的品牌色是 #07c160，这是微信官方使用的绿色。
第五次对话：用户中心
我说：
做个用户中心显示头像昵称、用户信息、功能按钮底部加个退出登录
AI 生成了：
所有功能都做好了：
用户头像和昵称
性别、地区、国家信息
分享、选图、位置功能
退出登录
最后一步：测试
我说：
测试一下完整流程，每一步都截图AI 自动：
打开首页
点击登录按钮
点击模拟登录
跳转到用户中心
保存3张截图
测试通过！
📊 我一共说了几句话？
8句话搞定
1. 创建一个微信公众号项目，前端Vue3，后端Spring Boot 要微信登录、用户中心功能，作者写AI杨遥2. 后端接口报CORS跨域错误3. 前端需要配置代理4. 创建一个首页，要漂亮一点（加4点要求）5. 安装依赖，启动服务，打开浏览器6. 做个微信登录页面（加3点要求）7. 做个用户中心（加3点要求）8. 测试一下完整流程，每一步都截图
AI 做了什么？
✅ 创建22个文件（1500行代码）✅ 解决跨域问题✅ 解决代理问题✅ 创建3个页面✅ 封装API✅ 状态管理✅ 安装依赖✅ 启动服务✅ 联调测试✅ 保存截图
我手写代码：0行
⚡ 这个方式的威力在哪？
1️⃣ 不需要懂技术细节
你不需要知道：
❌ CORS是什么
❌ 代理怎么配
❌ Vue怎么写
❌ Spring Boot怎么用
你只需要知道：
✅ 我想要什么
2️⃣ 速度快到离谱
| 任务 | 传统开发 | Vibe Coding | 提升倍数 |
|---|---|---|---|
| 创建项目 | 30分钟 | 2分钟 | 15倍 |
| 解决跨域 | 15分钟 | 30秒 | 30倍 |
| 写首页 | 2小时 | 1分钟 | 120倍 |
| 写登录页 | 2小时 | 1分钟 | 120倍 |
| 写用户中心 | 1.5小时 | 1分钟 | 90倍 |
| 联调测试 | 1小时 | 1分钟 | 60倍 |
| 总计 | 7小时 | 10分钟 | 42倍 |
3️⃣ 代码质量更高
AI 生成的代码：
✅ 符合最佳实践
✅ 有错误处理
✅ 有注释
✅ 结构清晰
很多人手写的代码：
❌ 复制粘贴不知道啥意思
❌ 没有错误处理
❌ 没有注释
❌ 结构混乱
4️⃣ 学习成本为零
你不需要：
❌ 上培训班
❌ 看厚厚的技术书
❌ 看100小时视频
你只需要：
✅ 会说话
✅ 会描述你想要什么
⚠️ 但这种方式也有局限
说点实话，不是所有场景都适合。
✅ 适合的场景：
常规业务开发（CRUD、页面展示）
快速原型验证
学习新技术
重复性工作
❌ 不适合的场景：
复杂算法实现
性能极致优化
底层系统开发
需要深度定制的架构
但说实话，80%的日常开发都是常规业务。
💭 我的真实感受
用完这种方式，我最大的感受是：
以前的开发像拼乐高，我要自己找零件、自己拼。
现在的开发像当导演，我说要什么场景，AI帮我搭好。
而且 AI 搭的比我好。
📝 给想试试的人几点建议
1️⃣ 从小需求开始
不要一上来就说"做一个电商系统"
从简单的开始：
创建一个登录页面做一个表单写一个API接口
2️⃣ 描述要具体
❌ 不要说："做一个好用的页面"
✅ 要说："做一个首页，顶部有标题，中间有卡片，底部有按钮"
3️⃣ 不满意就改
第一次生成的代码可能不是你想要的？
直接说：
"这个按钮太小了，改大点"
"这个颜色太深了，调浅点"
"这个布局不好看，换一种"
4️⃣ 多问为什么
AI 生成的代码你不懂？
直接问：
"这个配置是干什么的？"
"为什么要用这个方法？"
AI 会解释给你听，还能学到东西。
🎯 最后说句心里话
我知道很多人看到这里会想：
"AI 要取代程序员了吗？"
我的看法是：
会写" CRUD 代码"的程序员，确实会被取代。
但会"解决问题"的程序员，会更有价值。
因为 Vibe Coding 把你从重复劳动中解放出来，让你有更多时间思考：
这个功能真的需要吗？
有更好的解决方案吗？
用户体验还能怎么优化？
你从"代码工人"变成了"产品设计师"。
这难道不是好事吗？
📁 想看完整代码？
项目代码都在这里，可以自己跑起来试试：
wechat-backend/ # 后端wechat-frontend/ # 前端screenshots/ # 页面截图
或者直接用 Claude Code，复制我那8句话，自己体验一遍。
相信我，你会打开新世界的大门。
我是 AI杨遥，一个用 AI 写代码的全栈工程师。
如果这篇文章对你有帮助，点赞、转发、在看，三连支持一下。
我们下期见！ 👋
