MEAN Stack 专业应用程序开发
5.00/5 (1投票)
面向初学者的完整专业 MEAN stack 应用开发系列
引言
这是一个为初学者准备的完整的 MEAN 栈专业应用程序开发系列，我们将从零开始学习 MEAN 栈。我们将从头开始启动项目，学习我们所做的每一个步骤的原因和方法。我们将完成应用程序开发，并提供完整的代码片段以及步骤。在最初的六部分中，GitHub 上提供了可用的工作代码。
开始吧
此解决方案在 Angular 5 中实现，应该适用于 Angular 6/7，但由于 Angular 6 和 7 有一些更新，例如文件名、Angular Material、RxJs 库等。如果您在任何步骤中遇到错误，请告诉我，我会进行更新。
最终应用程序演练
阅读 MEAN 栈专业应用程序开发 - 第 1 部分
这将是一个系列文章，我们将使用 MEAN 栈开发专业的网站，并最终将其部署到服务器。首先，我们将开发一个静态网站，只使用 Node.js 在服务器上运行该网站。之后，我们将开发一个小型内容管理系统，以动态控制后端 MongoDB 的网站内容。
阅读 MEAN 栈专业应用程序开发 - 第 2 部分
在第一部分中，我们设置了开发环境，安装了必要的软件，并通过 Angular CLI 创建了基本的 Angular 应用程序。由于我们计划大量使用 Angular Material 组件，因此我们安装了所需的包，并将其导入到 AppModule 中以供整个应用程序使用。在这一部分中，我们将主要使用 bootstrap 菜单组件、Angular Material 卡片组件和第三方轮播控件等来设计我们的主页。
阅读 MEAN 栈专业应用程序开发 - 第 3 部分
在这一部分中，我们将开发一个“联系我们”页面，用户可以在其中提供他们的联系信息并提出任何疑问或建议，这些信息将通过电子邮件发送给管理员。我们将在 Node.js 中实现 Angular Reactive Form 和电子邮件功能。
阅读 MEAN 栈专业应用程序开发 - 第 4 部分
在上一部分中，我们通过使用 Angular reactive form 创建了“联系我们”页面，实现了客户端验证，并创建了 DataService 以将用户的信息从“联系我们”页面发送到服务器端。在这一部分中，我们将在 Node.js 中实现服务器端代码，以接收用户信息并通过电子邮件发送给管理员。
阅读 MEAN 栈专业应用程序开发 - 第 5 部分
在这一部分中，我们将创建 MongoDB 数据库，服务器端（Node.js）的“联系我们”页面模型，将用户消息信息保存到数据库中，并通过电子邮件将用户消息和联系信息发送给网站管理员。这将是我们开始创建动态网站的旅程。
阅读 MEAN 栈专业应用程序开发 - 第 6 部分
在这一部分中，我们将在 node.js 中创建菜单项 API，并动态加载它们，而不是硬编码菜单（主页、服务、客户等）。然后，我们将更新我们的客户端应用程序以通过 API 加载菜单并相应地创建菜单链接。
阅读 MEAN 栈专业应用程序开发 - 第 7 部分
在这一部分中，我们主要将在管理部分工作。我们将开发菜单管理页面，在那里我们可以添加、更新、删除和查看网站的菜单项。我们还将开发自己的数据网格控件，该控件将用于将来所有的管理页面，例如管理联系人、页面等。附注：本部分源代码为私有，只有订阅并注册 Full Stack Hub 账户才能获取！
阅读 MEAN 栈专业应用程序开发 - 第 8 部分
在前面的部分中，我们创建了“联系我们”页面来获取用户反馈，用户消息仅发送电子邮件给网站管理员。在这一部分中，我们还将消息保存在数据库中，并创建管理它们的管理页面。我们将使用上一部分创建的相同数据网格控件，这一次，我们将只提供删除消息的功能。
阅读 MEAN 栈专业应用程序开发 - 第 9 部分 - A
这是系列中重要的一部分，我们将使用 node.js 创建页面管理 API，并在 Angular 中开发前端。我们将能够创建页面，添加内容（文本、图片、链接等），并将它们与我们之前在菜单管理中开发的菜单项关联起来。您将能够创建任意数量的页面，并随时更新它们，而无需修改应用程序代码，这将充当一个简单的内容管理系统。对于页面编辑器，我们将使用 Angular 的 tinymce 控件，它提供了丰富的功能来创建出色的前端页面。事实上，您现在正在阅读的文章以及所有其他文章都是使用 Angular tinymce 控件编写的。
阅读 MEAN 栈专业应用程序开发 - 第 9 部分 - B
在第 9 部分的这一部分中，我们将在 Angular 中开发前端。我们将能够创建页面，添加内容（文本、图片、链接等），并将它们与我们之前在菜单管理中开发的菜单项关联起来。您将能够创建任意数量的页面，并随时更新它们，而无需修改应用程序代码，这将充当一个简单的内容管理系统。对于页面编辑器，我们将使用 Angular 的 tinymce 控件，它提供了丰富的功能来创建出色的前端页面。事实上，您现在正在阅读的文章以及所有其他文章都是使用 Angular tinymce 控件编写的。
阅读 MEAN 栈专业应用程序开发 - 第 9 部分 - C
在第 9 部分的最后一部分中，我们将更新“查看页面”部分，以渲染由管理部分中的“管理页面”组件动态创建的页面。我们的顶部菜单也在管理部分中进行管理，“管理页面”部分会在我们创建新页面时存储相应的菜单项。当用户点击任何菜单项时，“查看页面”将接收到菜单 ID，从数据库加载页面 HTML 并将其渲染到屏幕上。
阅读 MEAN 栈专业应用程序开发 - 第 10 部分 - A
在前面的部分中，我们开发了管理菜单、用户消息和页面的管理部分。在这一部分中，我们将通过实现登录功能来保护管理部分。在客户端，我们将学习如何实现 Angular Guard、JSON Web Token (JWT) 和浏览器本地存储。在服务器端，我们将使用 bcrypt 来比较哈希密码，使用 JSON Web Token 来创建公钥并将其嵌入到登录 API 响应中。
阅读 MEAN 栈专业应用程序开发 - 第 10 部分 - B
在第 10 部分 - A 中，我们在 node.js 中开发了登录 API。在这一部分中，我们将用 Angular 开发客户端。我们将开发登录/注销功能，并学习如何使用 Angular JWT 和浏览器本地存储。在本部分之后，只有经过身份验证的用户才能访问管理部分。
阅读 MEAN 栈专业应用程序开发 - 最后一部分
这是本系列的最后一部分，我们将为我们的网站开发搜索功能。之后，我们将为管理部分实现身份验证 Guard，用户在未登录的情况下无法访问管理部分。我们还将添加 HttpIntercepter 以自动将令牌嵌入 HTTP 请求中。最后，我们将更新 Express.js API 以处理 JWT 和部署准备步骤。