mean堆栈_规划MEAN堆栈应用程序的实用指南

mean堆栈

《规划MEAN堆栈应用程序的实用指南》摘自Manning的《 使用Mongo，Express，Angular和Node，Second Edition的MEAN》 。 《获取MEAN》第二版经过全面修订和更新，以涵盖Angular 2，Node 6和JavaScript ES2015（ES6）的最新主流版本。 第二版将指导您如何使用此更新的MEAN堆栈开发Web应用程序。

规划实际应用

出于本文的目的，让我们想象一下，我们正在MEAN堆栈上构建一个运行正常的应用程序，称为Loc8r。 Loc8r会列出附近有WiFi的地方，人们可以去做一些工作。 它还将显示每个地方的设施，开放时间，等级和位置图。

高层规划MEAN Stack应用程序

第一步是考虑我们的应用程序需要哪些屏幕。 我们将专注于单独的页面视图和用户旅程。 我们可以从高层次上做到这一点，而不必担心每个页面上的细节。 在纸上或白板上草绘此阶段是一个好主意，因为它有助于可视化整个应用程序。 它还有助于将屏幕组织到集合和流程中，成为构建屏幕时的良好参考点。 由于页面上没有数据或后面的应用程序逻辑没有附加数据，因此添加和删除部件，更改显示内容和位置，甚至更改所需的页面数都非常容易。 可能是我们第一次就做错了。 关键是开始，迭代和改进，直到我们对单独的页面和整个用户流感到满意为止。

规划屏幕

让我们考虑一下Loc8r。 如上所述，我们的目标如下：

Loc8r会列出附近有WiFi的地方，人们可以去做一些工作。 它显示每个地方的设施，开放时间，等级和位置图。 访客可以提交评分和评论。

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

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

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

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

将屏幕分为集合

接下来，我们要获取屏幕列表并在逻辑上属于它们的位置整理它们。 例如，列表中的前三个都与位置有关。 “ 关于”页面不属于任何地方，可以放在其他“ 其他”集合中。 勾勒出这一点会给我们带来如图1所示的效果。

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

进行这样的快速草图是计划的第一步，在开始考虑架构之前，我们需要经历这个阶段。 这个阶段使我们有机会查看基本页面，并考虑流程。 例如，图1显示了Locations集合中的基本用户历程，从List页面到Details页面，然后在表单上添加评论。

设计应用程序

Loc8r表面上是一个简单的应用程序，只有几个屏幕。 但是我们仍然需要考虑如何设计它，因为我们将要从数据库向浏览器传输数据，让用户与数据进行交互，并允许将数据发送回数据库。

从API开始

因为应用程序将使用数据库并传递数据，所以我们将开始使用肯定需要的部分来构建体系结构。 图2显示了起点，即使用Express和Node.js构建的REST API，以实现与MongoDB数据库的交互。

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

构建一个API与我们的数据接口是该体系结构的基础。 更为有趣和困难的问题是：我们如何构建应用程序？

应用架构选项

在这一点上，我们需要查看应用程序的特定要求，以及如何将MEAN堆栈的各个部分放在一起以构建最佳解决方案。 我们是否需要MongoDB，Express，Angular或Node.js的一些特殊功能，以某种方式做出决定？ 我们要直接从服务器提供HTML，还是SPA是更好的选择？

对于Loc8r，没有特殊要求或特殊要求，搜索引擎是否应该轻松对其进行爬网取决于业务增长计划。 如果目的是从搜索引擎引入自然流量，那么可以，它必须是可爬网的。 如果目标是将应用程序升级为应用程序并以此方式驱动使用，那么搜索引擎可见性就不再那么重要了。

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

1. Node.js和Express应用程序
2. 一个具有Angular附加功能的Node.js和Express应用程序
3. Angular SPA

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

考虑到这三个选项，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的网站，在该网站上可以免费下载《 Getting MEAN with Mongo，Express，Angular和Node，Second Edition》的第一章，也可以购买该书。 否则，如果您对我在本文中介绍的内容有任何疑问，请在下面的评论中发布它们。

翻译自: https://www.sitepoint.com/planning-mean-stack-application/

mean堆栈