计划平均堆栈应用程序的实用指南

本文节选自 Manning 出版社的《精通 MEAN：使用 Mongo、Express、Angular 和 Node，第二版》。第二版已全面修订和更新，涵盖 Angular 2、Node 6 和最新的主流 JavaScript 版本 ES2015 (ES6)。本版将引导您学习如何使用更新后的 MEAN 堆栈开发 Web 应用程序。

关键要点

• 规划 MEAN 堆栈应用程序时，首先要构思所需的屏幕，而无需深入了解每个页面上的内容。此阶段的草图有助于可视化整个应用程序，并将屏幕组织成集合和流程。
• 将屏幕划分为逻辑集合。例如，所有处理位置的屏幕可以组合在一起，而“关于我们”之类的独立页面可以组合在一个杂项集合中。
• 考虑应用程序的架构，从 API 开始。构建与数据交互的 API 是架构的基点。根据应用程序的具体要求，决定是直接从服务器提供 HTML，还是选择单页应用程序 (SPA)。
• 架构可以封装在一个 Express 项目中，从而更易于管理和部署。但是，妥善组织代码以保持应用程序的不同部分彼此分离至关重要，以便在将来需要时更轻松地将其拆分为单独的项目。

实际应用规划：Loc8r

为了便于说明，让我们假设我们正在 MEAN 堆栈上构建一个名为 Loc8r 的工作应用程序。Loc8r 将列出附近带有 WiFi 的场所，人们可以在那里工作。它还将显示每个场所的设施、开放时间、评级和位置地图。

高级 MEAN 堆栈应用程序规划

第一步是考虑应用程序中需要哪些屏幕。我们将关注单独的页面视图和用户旅程。我们可以在高级别进行此操作，而不必关注每个页面上的细节。最好在此阶段在纸上或白板上画出草图，因为它有助于可视化整个应用程序。它还有助于将屏幕组织成集合和流程，作为构建时的良好参考点。由于页面或应用程序逻辑后面没有附加数据，因此可以轻松添加和删除部分、更改显示的内容和位置，甚至更改所需的页面数量。我们很可能第一次做不到位；关键是开始迭代和改进，直到我们对单独的页面和整体用户流程感到满意为止。

屏幕规划

阅读现代 JavaScript 紧跟不断发展的 JavaScript 世界！阅读本书 阅读本书

让我们考虑一下 Loc8r。我们的目标如下：

Loc8r 将列出附近带有 WiFi 的场所，人们可以在那里工作。它显示每个场所的设施、开放时间、评级和位置地图。访客可以提交评级和评论。

由此，我们可以了解到我们需要的一些屏幕：

1. 列出附近场所的屏幕
2. 显示单个场所详细信息的屏幕
3. 用于添加关于场所评论的屏幕

我们可能还想告诉访客 Loc8r 的用途和存在原因，我们应该将另一个屏幕添加到列表中：

1. 用于“关于我们”信息的屏幕

将屏幕划分为集合

接下来，我们要获取屏幕列表并将它们整理到逻辑上属于一起的地方。例如，列表中的前三个都与位置有关。“关于”页面不属于任何地方，它可以放在杂项“其他”集合中。绘制草图会得到类似图 1 的结果。

图 1：将应用程序的单独屏幕整理到逻辑集合中。

这样的快速草图是规划的第一阶段，我们需要在开始考虑架构之前完成此阶段。此阶段使我们有机会查看基本页面，并考虑流程。例如，图 1 显示了“位置”集合中的基本用户旅程，从“列表”页面到“详细信息”页面，然后到添加评论的表单。

架构设计

Loc8r 看起来很简单，只有几个屏幕。但是我们仍然需要考虑如何构建它的架构，因为我们将把数据从数据库传输到浏览器，让用户与数据交互并允许数据发送回数据库。

从 API 开始

由于应用程序将使用数据库并传递数据，因此我们将从我们肯定需要的部分开始构建架构。图 2 显示了起点，一个使用 Express 和 Node.js 构建的 REST API，用于启用与 MongoDB 数据库的交互。

图 2 从标准 MEAN REST API 开始，使用 MongoDB、Express 和 Node.js。

构建与我们的数据交互的 API 是架构的基点。更有趣也更困难的问题是：我们如何构建应用程序的架构？

应用程序架构选项

此时，我们需要查看应用程序的具体要求以及如何将 MEAN 堆栈的各个部分组合在一起以构建最佳解决方案。我们是否需要 MongoDB、Express、Angular 或 Node.js 的某些特殊功能来改变决策？我们是否希望直接从服务器提供 HTML，或者 SPA 是更好的选择？

对于 Loc8r，没有特殊或具体的要求，它是否应该易于被搜索引擎抓取取决于业务增长计划。如果目标是从搜索引擎带来自然流量，那么是的，它需要可抓取。如果目标是将应用程序推广为应用程序并以此方式推动使用，那么搜索引擎可见性就显得不那么重要了。

我们可以立即设想三种可能的应用程序架构，如图 3 所示：

1. Node.js 和 Express 应用程序
2. 带有 Angular 交互功能的 Node.js 和 Express 应用程序
3. Angular SPA

考虑到这三个选项，哪个最适合 Loc8r？

图 3 构建 Loc8r 应用程序的三个选项，从服务器端的 Express 和 Node.js 应用程序到完整的客户端 Angular SPA。

选择应用程序架构

没有具体的业务需求促使我们偏爱一种架构而不是另一种架构。构建所有三种架构使我们能够探索每种方法的工作方式，并使我们能够依次查看每种技术，逐层构建应用程序层。

我们将按照图 3 中显示的顺序构建架构，从 Node.js 和 Express 应用程序开始，然后继续添加一些 Angular，然后再重构为 Angular SPA。虽然这并非您通常构建网站的方式，但它为您提供了学习 MEAN 堆栈所有方面的大好机会。

将所有内容封装在一个 Express 项目中

我们一直在查看的架构图暗示我们将为 API 和应用程序逻辑拥有单独的 Express 应用程序。这是完全可能的，对于大型项目来说也是一个不错的选择。如果我们预计会有大量的流量，我们甚至可能希望我们的主应用程序和我们的 API 位于不同的服务器上。这样做的额外好处是，我们可以为每个服务器和应用程序设置更具体的设置，这些设置最适合各自的需求。

另一种方法是保持简单和简洁，并将所有内容都放在单个 Express 项目中。通过这种方法，我们只需要担心托管和部署一个应用程序，以及管理一组源代码。这就是我们将对 Loc8r 做的事情，它为我们提供了一个包含一些子应用程序的 Express 项目。图 4 说明了这种方法。

图 4 将 API 和应用程序逻辑封装在同一个 Express 项目中的应用程序架构。

以这种方式组合应用程序时，务必妥善组织代码，以便可以将应用程序的不同部分分开。除了使我们的代码更易于维护之外，它还使我们更容易在以后决定采取正确的路线时将其拆分为单独的项目。这是我们将在本书中不断重复讨论的一个关键主题。

最终产品

如您所见，我们将使用 MEAN 堆栈的所有层来创建 Loc8r。我们还将包含 Twitter Bootstrap 以帮助我们创建一个响应式布局。图 5 显示了一些可以构建的内容的屏幕截图。

图 5 Loc8r 是一个示例应用程序。它在不同的设备上显示不同，显示场所列表和每个场所的详细信息，并允许访客登录并留下评论。

结论

这就是本文的全部内容。如果您想开始将这些步骤付诸实践，请访问 Manning 的网站，您可以在那里下载《精通 MEAN：使用 Mongo、Express、Angular 和 Node，第二版》的免费第一章，或购买本书。否则，如果您对我在本文中介绍的内容有任何疑问，请在下面的评论中发布。

关于规划 MEAN 堆栈应用程序的常见问题 (FAQ)

什么是 MEAN 堆栈，为什么它在应用程序开发中很重要？

MEAN 堆栈是用于开发 Web 应用程序的基于 JavaScript 的技术的集合。MEAN 是 MongoDB、ExpressJS、AngularJS 和 Node.js 的首字母缩写词。MongoDB 是一个 NoSQL 数据库，ExpressJS 是一个 Web 应用程序框架，AngularJS 是一个 JavaScript 框架，Node.js 是一个服务器平台。MEAN 堆栈在应用程序开发中的重要性在于其效率和灵活性。它允许开发人员使用 JavaScript 为服务器端和客户端编写代码，从而实现无缝集成和高效的数据处理。

MEAN 堆栈应用程序的架构如何工作？

MEAN 堆栈应用程序的架构设计灵活高效。MongoDB（一个 NoSQL 数据库）存储应用程序的数据。在 Node.js 服务器上运行的 ExpressJS 处理服务器端功能。AngularJS 管理客户端（面向用户）的功能。整个应用程序都是用 JavaScript 编写的，允许数据从用户的交互到服务器和数据库无缝流动。

使用 MEAN 堆栈进行应用程序开发的好处是什么？

MEAN 堆栈为应用程序开发提供了许多好处。由于 Node.js，它允许代码重用和高速。MongoDB 提供存储复杂数据的灵活性，而 AngularJS 提供了一种干净的方式来添加交互式功能。ExpressJS 简化了创建和管理服务器路由的过程。此外，由于所有内容都是用 JavaScript 编写的，因此它简化并加快了开发过程。

MongoDB 如何提升 MEAN 堆栈应用程序的效率？

MongoDB 作为一个 NoSQL 数据库，提供高性能、高可用性和易于扩展性。它基于集合和文档的概念，而不是使用表和行的传统关系数据库。这使得 MongoDB 特别擅长处理大量数据和复杂的层次数据结构，这有助于提高 MEAN 堆栈应用程序的效率。

AngularJS 在 MEAN 堆栈应用程序中扮演什么角色？

AngularJS 是一个强大的 JavaScript 框架，用于在 MEAN 堆栈中构建应用程序的客户端。它允许开发人员扩展 HTML 词汇表，从而创建更具表现力、更易读且开发速度更快的环境。AngularJS 还为 HTML 提供数据绑定功能，从而实现模型和视图组件之间数据的自动同步。

ExpressJS 如何简化 MEAN 堆栈应用程序中的服务器端操作？

ExpressJS 是一个最小且灵活的 Node.js Web 应用程序框架，它为 Web 和移动应用程序提供了一套强大的功能。它通过提供一个简单的界面来构建单页、多页和混合 Web 应用程序来简化服务器端操作。它还有助于管理路由、请求和视图以及执行中间件操作。

Node.js 如何增强 MEAN 堆栈应用程序的性能？

Node.js 是一个基于 Chrome 的 JavaScript 运行时构建的平台，用于轻松构建快速且可扩展的网络应用程序。它使用事件驱动的非阻塞 I/O 模型，使其轻量且高效，非常适合跨分布式设备运行的数据密集型实时应用程序。这通过允许它同时处理多个客户端请求而不会滞后来增强 MEAN 堆栈应用程序的性能。

开发 MEAN 堆栈应用程序的先决条件是什么？

要开发 MEAN 堆栈应用程序，您需要对 JavaScript 和 HTML 有基本的了解。还需要了解 NoSQL 数据库（特别是 MongoDB），以及了解客户端和服务器端脚本。熟悉 AngularJS、ExpressJS 和 Node.js 至关重要。此外，了解 JSON 和 AJAX 技术将大有裨益。

MEAN 堆栈与其他全栈选项相比如何？

MEAN 堆栈完全基于 JavaScript，提供无缝的开发过程，因为可以在客户端和服务器端使用相同的语言。这是其他需要精通多种语言的全栈选项的主要优势。此外，Node.js 的非阻塞架构使 MEAN 堆栈应用程序快速且可扩展，使其成为实时应用程序的首选。

我可以在 MEAN 堆栈中使用其他数据库吗？

虽然 MongoDB 是 MEAN 堆栈中的默认数据库，因为它与 JavaScript 兼容，但可以使用其他数据库。但是，这可能需要额外的配置和代码调整，并且 MEAN 堆栈已知的无缝数据流可能会受到影响。因此，除非有特定需要使用不同的数据库，否则建议使用 MongoDB。

以上是计划平均堆栈应用程序的实用指南的详细内容。更多信息请关注PHP中文网其他相关文章！