AI 原生开放教材

外观

鱼皮 AI 导航（ai-guide）工程手册·中文原文 ↗原件 ↓仓库 ↗

前后端概念 ​

前端 ​

前端（Frontend）是用户能直接看到和交互的部分，包括网页界面、按钮、表单、动画等。说得粗暴一点，你在浏览器里看到的一切，都是前端！

前端技术栈通常包括：

  • HTML：页面结构
  • CSS：样式和布局
  • JavaScript：交互逻辑
  • React/Vue/Next.js：现代前端框架

在 Vibe Coding 中，前端是 AI 最擅长生成的部分，因为效果可以直接看到，方便验证和调整。你还可以利用 Agent Skills 和精心编写的提示词来美化 AI 生成的前端页面，去掉那股子 AI 味儿。具体技巧可以看鱼皮的视频：如何去除网站的 AI 味儿

后端 ​

后端（Backend）是用户看不到的部分，负责处理业务逻辑、数据存储、用户认证等。

比如你在电商网站上点击 “下单” 按钮，前端把你的订单信息发给后端，后端负责校验库存、计算价格、扣款、生成订单，然后把结果返回给前端展示。

后端技术栈通常包括：

  • Node.js/Python/Java：编程语言
  • Express/FastAPI/Spring：Web 框架
  • MySQL/PostgreSQL/MongoDB：数据库

后端比前端更复杂，需要考虑安全性、性能、数据一致性等问题。因此 AI 生成的后端代码需要更仔细地审查。

全栈 ​

全栈（Full-stack）是指同时包含前端和后端的完整应用。全栈开发者是能同时处理前端和后端工作的程序员。

在 Vibe Coding 中，像 Cursor、Bolt.new 这样的 AI 编程工具可以一次性生成全栈应用，前后端代码都帮你写好。

想进一步了解全栈程序员是什么、怎么成为全栈程序员？可以看鱼皮的这篇文章：全栈程序员是什么？

API ​

API（Application Programming Interface）是不同程序之间通信的接口。

你可以把 API 理解成餐厅的菜单。菜单告诉你有什么菜可以点，怎么点，点了之后会得到什么。你不需要知道厨房怎么做菜，只需要按菜单点餐。

在 Web 开发中，前端通过 API 和后端通信，获取数据或提交操作。

想进一步了解 API 接口和标准的 API 接口设计规范，可以观看 鱼皮的 API 动画科普视频。

数据库 ​

数据库是存储和管理数据的系统。应用中的用户信息、内容、设置等都存在数据库里。

常见的数据库类型有：

  • 关系型数据库（MySQL、PostgreSQL）：数据以表格形式存储
  • 文档数据库（MongoDB）：数据以 JSON 文档形式存储
  • 键值数据库（Redis）：适合缓存和快速查找

在 Vibe Coding 中，你可以用 Supabase、Firebase 等现成的云数据库服务，不用自己搭建和管理数据库。

如果你想系统学习数据库知识，可以看鱼皮的数据库入门教程：数据库入门教程

BaaS 后端即服务 ​

BaaS（Backend as a Service 后端即服务）是提供现成后端功能的云服务，包括数据库、用户认证、文件存储等。

以前没有 BaaS 的时候，你得自己买服务器、装数据库、写后端接口、处理各种运维问题，光是搭环境就得折腾好久。而现在使用 BaaS，这些都是现成的，你不需要自己写后端代码和管理服务器，注册个账号就能直接用，能大大加快开发速度，特别适合 Vibe Coding 的场景。

常用的 BaaS 服务有：

  • Supabase：开源的 Firebase 替代品
  • Firebase：Google 的 BaaS 平台
  • PlanetScale：托管的 MySQL 服务