什么是全栈应用？通俗易懂的解释

全栈应用是指包含其运行所需的每一层的应用：人们看到并点击的前端、运行在服务器上并执行规则的后端，以及记住一切的数据库。一个能保存你的任务、让你在任何设备上登录、并且不会向别人展示你清单的待办事项应用，就是全栈应用。而只显示营业时间的单页，则不是。

“Stack”一词的意思只是技术的各层叠放在一起。“Full”则表示这些层都齐全了。

用 AI 做应用时，为什么这很重要

当你向 AI 应用生成工具描述一个应用时，你所用的措辞决定了它会构建哪些层。“做一个展示我们菜单的页面”会产生一个前端。“让顾客从我们的菜单下单，并让厨房看到新订单”则需要三层都具备，因为订单必须被保存、在两类用户之间共享，并且保持私密。

了解这其中的差别，能在三个方面帮到你：

• 你提出的要求更准确。 如果你希望数据被保存，就要明确说出来。一个只做前端的生成工具，做出来的东西看起来像完成了，但刷新后什么都会忘记。
• 识别“假的完整”。 一个带有示例数据的演示，可能与一个真正可用的应用看起来一模一样。了解各层的结构，可以帮你检查数据是否真的被保存到了某处。
• 了解运行成本。 只有前端的应用可以作为静态文件提供服务。后端和数据库则是运行在服务器上的程序，而大部分托管费用正来自于此。

日常类比：一家餐厅

把应用想象成一家餐厅。

• 用餐区就是前端。 菜单、餐桌和服务员的点菜本。这是顾客所看到的，应当令人愉快且易于使用。
• 厨房就是后端。 顾客不会进去。它接收订单、检查菜品是否有货、烹饪，并拒绝不合理的要求。规则都在这里。
• 食品储藏室和订单簿就是数据库。 它们记录了有什么货、已经点了什么，因此交接班时不会遗漏任何东西。

一家只有用餐区的餐厅可以给你看漂亮的菜单，但你吃不到东西。这就像一个只有前端、却假装是全栈的应用。

三层详解

这些层按固定的顺序相互通信。前端通过 API 向后端请求内容，API 是后端所接受的一组定义好的请求。后端检查请求，读取或写入数据库，然后返回结果。前端从不直接与数据库通信。

这一顺序是整个技术栈中最重要的安全理念。前端中的任何内容，访客都可以在自己的设备上读取和修改。因此，“只有所有者能看到这张发票”“优惠券只能使用一次”这类规则，必须在后端强制执行。关于两者的区别，参见前端与后端。

实际例子：一个课程预约应用

假设你经营一家瑜伽工作室，希望人们能在线预约课程。

访客做的事： 打开网站，看到本周的课程，点击其中一节，登录并预约一个名额。

背后发生的事：

1. 前端显示课程表。为了填充课程表，它向后端询问：“这一周有哪些课程？每节课还剩多少名额？”
2. 后端向数据库查询课程，并统计每节课的预约数，然后回复。
3. 访客点击预约。前端发送“为当前已登录的这个人预约第 42 节课”。
4. 后端检查：这个人确实已经登录了吗？课程是否已满？他是否已经预约过这节课？只有一切正常，它才会向数据库写入一条新的预约记录。
5. 后端回复“预约成功”，前端显示确认信息。
6. 之后，工作室老板登录，查看课程列表。后端会先检查她是否为管理员，然后才显示每个人的姓名。

现在设想这个应用只做了前端。课程表可能会显示出来，预约按钮也可能显示一个漂亮的对勾，但刷新后预约就消失了，“剩余名额”对其他人来说也是错的，老板也永远看不到这些预约。第 4 步——那些检查——会完全缺失。这就是实际的区别。

关键术语

• 前端（客户端）： 在浏览器中运行的部分。
• 后端（服务器端）： 在服务器上运行的部分，也叫 API 服务器。
• 数据库： 以有组织的方式存储数据的地方。参见什么是数据库。
• API： 后端接受的来自前端或其他程序的请求列表。
• 身份验证（Authentication）： 确认某人是谁（登录）。授权（Authorisation）： 确认他能做什么。
• 部署（Deployment）： 把所有层放到服务器上，供公众使用。
• 单体与服务拆分（Monolith vs services）： 一个程序完成所有工作，还是若干较小的程序（例如一个网站加一个独立的 API）。两者都可以是全栈。

常见错误与误解

• “它看起来完成了，所以它就是完成了。” 示例数据和看似正常的按钮，并不等于数据已被保存。请刷新页面、在隐私窗口中打开，检查数据是否还在。
• 把规则放在前端。 隐藏一个按钮并不等于安全。如果后端不做检查，任何知道请求方式的人都可以发出这个请求。
• 把密钥放在前端。 支付或 AI 服务商的密钥如果出现在浏览器代码中，每位访客都能读到。密钥应当放在后端，保存在环境变量中。参见环境变量和密钥。
• 认为全栈就意味着复杂。 一个小型全栈应用可能只有几个界面、几条后端路由和三张数据库表。它描述的是层次结构，而不是规模。
• 认为必须自己挑选每一项技术。 对于第一个版本，任何合理且广泛使用的技术栈都可以。更重要的是对数据和规则的清晰描述。

向你的 AI 生成工具提出的要求

即使你不说出这些层的名字，也可以按照三层来描述应用：

• 数据： “把课程（名称、时间、容量）和预约（课程、人员、预约时间）保存在数据库中。”
• 规则： “课程预约人数不能超过容量。每个人只能预约同一节课一次。只有管理员可以看到预约人员名单。”
• 界面： “一个每周课程表、一个预约确认页面、一个按课程列出预约人员的管理页面。”
• 检查： “这些规则必须在服务器上执行，而不仅仅是在页面中。API 密钥必须保留在服务器端。”

然后像一个怀疑论者那样进行测试：刷新页面，用两个不同的身份登录，尝试查看你不应该看到的数据。使用 AI 构建应用指南会完整地介绍这一循环。

Mythex 中的全栈应用

Mythex 会根据聊天中的描述构建全栈网页应用。默认情况下，新应用会获得 React 和 TypeScript 前端；当应用需要保存数据时，Mythex 会为项目添加一个专用的 Postgres 数据库，你也可以另外要求一个独立的 API 服务器（例如 Python、Node、C# 或 Java）与网站一起运行。所有内容都在实时预览中一起运行，并发布到一个公开的 URL。文档中关于多服务应用的页面，展示了网站和 API 如何一起预览和发布，而全栈应用构建器页面则提供了一些入门起点。

常见问题