前端与后端：到底有什么区别？
前端是应用中运行在用户浏览器里的部分，包括他们看到和点击的页面、按钮、表单和动画。后端是运行在服务器上、用户看不到的部分：它存储和读取数据，执行业务规则，检查谁有权做什么，并与支付、邮件等服务通信。两者通过 API 交换信息，再加上数据库，就构成了一个“全栈”应用。
用 AI 搭建应用时，为什么要了解这一点
当你向 AI 搭建工具描述一个应用时，无论你是否意识到，你其实同时描述了两个部分。“客户可以预约时段”这句话，意味着一个预约表单（前端）、一套关于哪些时段可约的规则（后端），以及保存预约记录的地方（数据库）。
了解这种划分，在三个实际方面很有帮助：
- 安全。 前端中的任何内容都可能被用户看到和修改。规则和密钥必须放在后端。
- 排查问题。 “按钮没反应”和“按钮有反应但没保存”指向的是不同的部分。告诉 AI 你看到的是哪种情况，有助于它更快找到原因。
- 托管与成本。 纯前端网站便宜且易于托管。后端需要有地方运行，这会影响你的费用，以及应用在闲置时的表现。
一个日常类比
可以把它想象成一家餐厅。
前端是餐厅的用餐区：菜单、餐桌、装潢，以及为你点餐的服务员。它是为顾客设计的，顾客能看到并接触到其中的一切。
后端是厨房和办公室：厨师做菜、库房、收银台，以及经理制定的谁能享受折扣的规则。顾客不会进入那里，也不应该能进去。
API 是两者之间的传递窗口，就是点单和出餐的柜台，按照约定的格式传递信息。数据库则相当于库房和订单账本。
顾客可以随意改写自己的点单单（前端在他们的控制之下），但厨房仍然决定做什么菜、收多少钱。所以重要的检查应该放在后端。
各自负责什么
| 前端 | 后端 | |
|---|---|---|
| 运行在哪里 | 用户的设备，在浏览器中 | 你（或你的主机服务商）控制的服务器 |
| 主要工作 | 展示内容、收集输入、响应点击 | 存储数据、执行规则、强制权限、调用其他服务 |
| 用户能否看到和修改代码？ | 能，代码会下载到用户的浏览器中 | 不能 |
| 能否保存密钥？ | 不能 | 能，放在环境变量中 |
| 常用技术 | HTML、CSS、JavaScript/TypeScript、React、Vue、Svelte、Tailwind | Node.js、Python（FastAPI、Django）、C#、Java、Go、Ruby |
| 常见问题 | 移动端布局错乱、按钮无响应、页面加载慢 | 数据没有保存、显示错误的数据、报错、安全漏洞 |
有些框架会模糊这条界线。例如 Next.js 允许同一个项目同时包含浏览器端代码和服务器端代码。但基本思路不变：关键问题始终是“这段代码在哪里运行？”
实例：预约一节瑜伽课
下面是有人预约一节瑜伽课时，逐步发生的事情。
| 步骤 | 位置 | 发生了什么 |
|---|---|---|
| 1 | 前端 | 课程表页面加载，向后端请求本周的课程。 |
| 2 | 后端 | 从数据库读取课程和预约记录，计算剩余名额，并以 JSON 格式返回列表。 |
| 3 | 前端 | 显示每节课的时间、老师和剩余名额。 |
| 4 | 前端 | 用户选择一节课，填写姓名和邮箱。表单会检查邮箱格式是否有效（这只是友好提示，不是保证）。 |
| 5 | 前端 → 后端 | 通过 API 发送一个 POST /api/bookings 请求。 |
| 6 | 后端 | 再次验证输入，检查课程是否已满，保存预约，并使用一个密钥请求邮件服务发送确认邮件。 |
| 7 | 后端 → 前端 | 返回“预约成功”或“抱歉，名额已满”。 |
| 8 | 前端 | 显示确认页面。 |
注意第 4 步和第 6 步：输入被检查了两次。前端的检查提供即时反馈；后端的检查才真正有效，因为有心的用户完全可以绕过前端。
常见术语解释
| 术语 | 含义 |
|---|---|
| 客户端 / 服务器 | 客户端是发起请求的浏览器（或应用），服务器负责响应这些请求。 |
| UI | 用户界面，即屏幕和控件。 |
| API | 前端向后端请求数据或操作时所遵循的约定方式。 |
| 端点（Endpoint） | API 上的一个具体地址，例如 /api/bookings。 |
| 全栈 | 前端 + 后端 + 数据库的组合。参见什么是全栈应用。 |
| 静态网站 | 没有自己后端的前端，所有人访问的都是同一套文件。 |
| SPA | 单页应用：在浏览器中更新页面内容，而不是加载新页面的前端。 |
| 服务端渲染（SSR） | 服务器在发送页面前生成 HTML，有助于提升速度和搜索引擎优化效果。 |
| 环境变量 | 运行时提供给后端的设置和密钥，不写在代码中。 |
你的应用需要后端吗？
| 如果你的应用… | 是否需要后端？ |
|---|---|
| 展示对所有人都相同的信息 | 不需要 |
| 有一个只用来给你发邮件的联系表单 | 通常需要一个小型后端，或使用表单服务 |
| 保存其他人会看到的数据 | 需要 |
| 有登录功能和私人数据 | 需要 |
| 接收付款 | 需要，至少要用来创建结算页面并接收支付 webhook |
| 使用需要密钥的付费 AI 或其他 API | 需要，以便把密钥留在浏览器之外 |
常见错误和误区
- 把密钥放在前端。 任何人打开浏览器的开发者工具都能看到。这是 AI 搭建的应用中最常见也最严重的错误。
- 只在前端执行规则。 对非管理员隐藏“删除”按钮并不能起到保护作用，后端必须拒绝这类请求。
- 以为后端“就是数据库”。 数据库只负责存储数据。后端决定谁可以读取和修改这些数据，以及如何操作。
- 认为 JavaScript 就等于前端。 JavaScript 和 TypeScript 借助 Node.js 同样可以在服务器上运行。
- 怪错了地方。 如果页面显示正常但数据有误，问题通常出在后端或数据库，而不是设计上。
- 过度设计。 作品集网站不需要定制后端。添加后端只会增加成本和需要维护的环节。
向 AI 搭建工具提出的请求
- “这个应用的哪些部分在浏览器中运行，哪些在服务器上运行？”
- “把所有 API 密钥移到后端，并从环境变量中读取。”
- “每个表单既要在浏览器中验证，也要在服务器上验证。”
- “在后端强制规定只有管理员才能删除预约。”
- “页面显示正常，但数据没有保存，请检查后端日志中的这次请求。”
- “这是一个简单的营销网站，除非需要，否则保持只有前端。”
Mythex 中的前端与后端
新建的 Mythex 项目从基于 Vite、React、TypeScript 和 Tailwind 的前端开始。当你的应用需要后端时，智能体会添加；你也可以要求在同一个项目中同时运行一个独立的 Node、Python（FastAPI）、C# 或 Java API。在预览中，你可以在网站和 API 服务器之间切换，发布时两者会一起部署，并在需要时添加数据库和文件存储。多服务应用的文档有详细介绍；网站托管指南说明了上线后两部分各自运行在哪里；应用模板则是快速查看全栈示例的好办法。
常见问题
前端和后端有什么区别？
前端是应用中运行在用户浏览器里的部分，也就是他们看到和点击的页面、按钮和表单。后端运行在用户看不到的服务器上，负责存储数据、执行业务规则、检查权限，并与支付、邮件等其他服务通信。
每个应用都需要后端吗？
不一定。营销网站、作品集或简单的落地页只需要前端。一旦应用需要保存共享数据、用户登录、收款或使用密钥调用API，就需要某种形式的后端。
HTML 属于前端还是后端？
在浏览器中运行的 HTML、CSS 和 JavaScript 属于前端。JavaScript 也可以通过 Node.js 在服务器上运行，这时它就是后端代码。决定它属于哪一端的不是语言，而是代码运行的位置。
全栈是什么意思？
全栈指同时涵盖前端、后端（通常还包括数据库）。全栈应用就是三个部分都有的应用，全栈开发者则负责其中的全部部分。