vibecoding基础：前端、后端、数据库

在 Vibe Coding 的时候，你可能经常听到「前端设计」「后端处理逻辑」「数据库的结构」这些说法。

这三个概念基本上伴随你做 Vibe Coding 的全过程，甚至伴随着你去修改 bug。可以说，理解了前端、后端和数据库，你才能真正理解 Vibe Coding 的项目背后是怎么运行的。

这一期就来聊聊：到底什么是前后端、什么是数据库，它们在一个项目里是怎么分工协作的，以及听懂了这三个词之后，你在 Vibe Coding 的时候到底能占到什么便宜。

举个例子：你 Vibe Coding 做出来的产品，就像是开了一家餐厅，用户就是来吃饭的顾客。

• 前端：顾客刚进门看到的门厅、大堂、桌椅板凳、服务员，这些一眼能看到的东西就是前端。用餐环境好不好、服务员态度怎么样、菜单排得清不清楚，这些都是前端的事情。
• 后端：你点完菜，服务员把单子传到后厨。后厨开始思考——这道菜要怎么做、要用哪些食材、先炒哪个后炒哪个、要不要根据你的忌口调整，这就是后端。
• 数据库：饭店得有一个仓库来存食材，还得有账本用来收钱记账，这些存放和记录的东西就是数据库。

拿一个演示项目来说，这是一个个人读书笔记管理工具。

• 前端：打开浏览器你能看到的界面——整体的设计、页面的划分、点击反馈、按钮、页面、输入框等等，就是前端。
• 后端：当你把信息都输入进去、点击「保存笔记」的时候，程序已经在后台进行了大量的判断和处理——你有没有登录？数据格式对不对？这本书的笔记应该存在哪里？新增了哪些标签？这些判断和处理用户是看不到的，这个处理逻辑就是后端。
• 数据库：如果想要这些信息在你下次打开、甚至换了一台设备之后还能呈现出来，就需要存在一个叫数据库的地方。

所以三者的关系是这样的：前端负责给你看和让你操作，后端负责处理你的操作，数据库负责把结果记下来。

我们把刚才「保存笔记」这个动作，从头到尾再走一遍，你就彻底明白它们是怎么配合的了。

1. 你在输入框里写下这本书的读后感，点了保存——这一步是前端在收集你的操作
2. 前端把这些内容交给后端，后端开始判断：你登录了没有？内容是不是空的？这条笔记属于哪本书？
3. 判断都通过了，后端把它交给数据库存起来，存好之后再回一句「存好了」
4. 前端收到这个回复，把新的笔记显示在列表里，你就看到了那条刚写完的笔记

对于 Vibe Coding 新手来说，理解了前后端和数据库的工作关系有什么用呢？

首先最核心的，就是能理解不同的产品形态，选择不同的方案。

• 对于一些静态界面，像个人简历、门店信息、公司官网这些页面，基本不需要存储什么信息——所以可以不需要数据库，甚至不需要后端，只做纯前端页面就完全够用。
• 有些产品的用户信息需要实现云端存储、跨设备访问，那就必须使用数据库，而不是把数据存在浏览器的缓存里。

其次，你还能大概判断出那些莫名其妙的 bug，到底是从哪一层来的。

再也不用面对 bug 一脸懵逼，只能玄学抽卡，指望 AI 自己找到问题。

到这里，什么是前端、什么是后端、什么是数据库，它们在一个项目里怎么配合，你就全明白了。最后快速回顾一下：

前端负责给你看和让你操作，后端负责处理你的操作，数据库负责把结果记下来。搞懂这一句，你既能按产品形态选对方案，也能一眼判断 bug 出在哪一层。