MVC 架构（concept）

让我们简要了解一下不同组件和技术如何协同工作。例如，React 如何与 Express 和 MongoDB 配合使用，或者 Express 如何与 MongoDB 进行通信。

虽然有很多关于 React、Express 和 MongoDB 的独立课程，但很少有内容能告诉我们如何将这些技术整合到一个完整运行的应用程序中。在本课程中，我们将学习如何让不同的技术协同工作，帮助我们的项目顺利上线。

MVC 架构

我们的应用程序主要遵循流行的三层架构、MVC 模式或 MVC 模型。这种设计是为了将信息的内部表示与用户交互和展示的方式分离开来。

视图层 使用 HTML、CSS 和 JavaScript，结合 React 与 Tailwind CSS 框架编写，是前端部分。用户通过这一层与应用进行交互，获得完整的使用体验。

控制器层 使用 Node.js 和 Express 框架编写，是后端部分。该层代表应用的服务器端，负责以下任务：

• 包含所有业务逻辑；
• 处理 HTTP 请求；
• 作为前端与数据库之间的桥梁。

最后，模型层 是由 MongoDB 托管的数据库，用于存储应用运行所需的所有数据。

视图：前端

视图层，也称为前端，是用户与应用后端之间的第一个交互点。这一层决定了应用对最终用户的外观和感受，因此在视觉和功能上都必须给予充分关注。

我们将使用 React 及其生态系统来构建视图层。正如我们在前面课程中讨论的，React 只是一个 JavaScript 库，因此我们还需要借助 HTML、CSS 和 JavaScript——这些网页开发的核心技术。

问题在于，React 应用本身没有任何内容可以呈现给用户！例如，如果我们想显示所有已保存文件的表格，就需要一个数据源。

控制器层：后端

我们需要有效地将存储在 MongoDB 数据库中的数据传递给 React 应用。为此，我们将在 React 和 MongoDB 之间引入一个 Express API。

这个 Express API 将包含应用的核心逻辑。它接收来自 React 应用的 HTTP 请求，从 MongoDB 数据库中提取数据，进行处理，然后将结果返回给 React 应用以供展示。

Express API 与 React 应用之间通过 HTTP 或 AJAX 请求协议进行通信。每个请求可能携带一些数据，这些数据将以 JSON 格式传输。

Express API 与 MongoDB 之间则通过 Mongoose 客户端进行通信。Mongoose 是一个 MongoDB 的对象建模工具，旨在为应用中的数据建模提供简单直接的解决方案。我们可以把 Mongoose 看作是 MongoDB 的前端接口。

模型层：数据库

如果我们要显示所有已保存文件的表格，就需要一个数据来源。再次强调，问题在于我们的 React 应用仍然无法向用户展示任何内容。在本课程中，我们将使用 MongoDB 来存储所有必需的数据，例如用户的邮箱和文件信息。然而，React 应用永远不会直接与数据库通信。这是为什么呢？

前端与后端分离且不直接通信的原因有四个：

• 抽象性
• 安全性
• 性能
• 关注点分离

如果直接将数据库连接到 React 应用，将来更换数据库将会非常困难且耗时。因此，抽象性是保持前后端分离的重要原因。安全性更是关键因素。除非数据库中的数据毫无价值，否则绝不应将数据库直接暴露给前端！

在性能方面，后端可以通过多种方式优化并保护对数据库的访问，例如缓存机制和认证策略。这些手段在前端难以实现，若强行使用反而可能降低应用性能。最后，关注点分离原则告诉我们，前端应专注于单一职责——即界面展示与用户交互。