图表 stack属性_想快速了解MEAN Stack吗？ 这是带有有用图表的文档。

图表 stack属性

This article is based on my capstone for the City University of Seattle. The title of my research is "Software Documentation and Architectural Analysis of Full Stack Development". The goal of my research was to reduce the learning curve in understanding open source projects and full stack development, and I choose the MEAN Stack.

本文基于我为西雅图城市大学所做的总结。 我的研究标题是“全栈开发的软件文档和体系结构分析”。 我研究的目的是减少了解开源项目和全栈开发的学习曲线，因此我选择了MEAN Stack。

I have created the following diagrams, using Lucidchart, for easier comprehension. These UML diagrams were based on the 4+1 architectural view model:

为了方便理解，我使用Lucidchart创建了以下图。 这些UML图基于4 + 1架构视图模型：

• Restaurant Analogy
  餐厅类比
• Process View using Sequence Diagram
  使用顺序图的过程视图
• Scenario using Sequence Diagram
  场景使用序列图
• Physical View using Deployment Diagram
  使用部署图的物理视图
• Development View using Package Diagram
  使用封装图的开发视图
• Logical View using Class Diagram
  使用类图的逻辑视图

The research was more focused on Deployment and Request and Response Flow.

该研究更侧重于部署以及请求和响应流。

平均堆栈 (MEAN Stack)

The MEAN Stack is a full-stack JavaScript open-source solution. It's made up of MongoDB, Express, Angular, and Node.js.

MEAN Stack是一个完整JavaScript开放源代码解决方案。 它由MongoDB，Express，Angular和Node.js组成。

The idea behind it is to solve the common issues with connecting those frameworks, build a robust framework to support daily development needs, and help developers use better practices while working with popular JavaScript components.

其背后的想法是通过连接这些框架来解决常见问题，构建一个强大的框架来支持日常开发需求，并帮助开发人员在使用流行JavaScript组件时使用更好的实践。

使用Node.js后端 (Back-end with Node.js)

Node.js is built for handling asynchronous I/O while JavaScript has an event loop built-in for the client-side. This makes Node.js fast compared to other environments. However, the event-driven/callback approach makes Node.js difficult to learn and debug.

构建Node.js是为了处理异步I / O，而JavaScript则为客户端内置了事件循环。 与其他环境相比，这使Node.js更快。 但是，事件驱动/回调方法使Node.js难以学习和调试。

Node.js includes modules such as Mongoose, which is a MongoDB object modeling, and the Express web application framework. Through Node modules, abstraction can be achieved, which reduces the overall complexity of the MEAN stack.

Node.js包含诸如Mongoose(该模块是MongoDB对象建模)之类的模块，以及Express Web应用程序框架。 通过节点模块，可以实现抽象，从而降低了MEAN堆栈的整体复杂性。

Express Framework后端 (Back-end with Express Framework)

Express is a minimalist and unopinionated application framework for Node.js. It is a layer on top of Node.js that is feature-rich for web and mobile development without hiding any Node.js functionality.

Express是Node.js的极简且不受限制的应用程序框架。 它是Node.js之上的一层，具有丰富的功能，可用于Web和移动开发，而不会隐藏任何Node.js功能。

前端与Angular (Front-end with Angular)

Angular is a web development platform built in TypeScript that provides developers with robust tools for creating the client side of web applications.

Angular是一个使用TypeScript构建的Web开发平台，为开发人员提供了用于创建Web应用程序客户端的强大工具。

It allows development of single-page web applications where content changes dynamically based on user behavior and preferences. It features dependency injection to ensure that whenever a component is changed, other components related to it will be changed automatically.

它允许开发单页Web应用程序，其中内容将根据用户的行为和偏好而动态变化。 它具有依赖项注入功能，以确保每当更改某个组件时，与之相关的其他组件都会自动更改。

MongoDB数据库 (Database with MongoDB)

MongoDB is a NoSQL database which stores data in BJSON (Binary JavaScript Object Notation).

MongoDB是一个NoSQL数据库，它以BJSON(二进制JavaScript对象表示法)存储数据。

MongoDB became the de facto standard database for Node.js applications to fulfill the "JavaScript everywhere" paradigm using JSON (JavaScript Object Notation) to transmit data across different tiers (front-end, back-end, and the database).

MongoDB已成为Node.js应用程序的事实上的标准数据库，以使用JSON(JavaScript对象符号)来实现跨不同层(前端，后端和数据库)传输数据的“ JavaScript Anywhere”范例。

Now that we've gotten those basics out of the way, let's look at these diagrams.

现在我们已经弄清了这些基础知识，让我们看一下这些图。

餐厅类比 (Restaurant Analogy)

As I wanted to tackle the steep learning curve, I chose a restaurant analogy to let the user understand and retain the process for request and response in a full stack application.

当我想解决陡峭的学习曲线时，我选择了一个餐厅类比，以使用户理解并保留全栈应用程序中的请求和响应过程。

The customer (end-user) requests their order through the waiter (controller), and the waiter hands over the request to the person at the order window (service factory).

客户(最终用户)通过服务员(控制器)请求他们的订单，服务员将该请求移交给订单窗口(服务工厂)处的人员。

These three components makes up the front-end server. The service factory will be the one to communicate with the cook (controller) in the back-end. The cook will then grab the necessary ingredients (data) in the fridge (database server).

这三个组件组成了前端服务器。 服务工厂将是与后端厨师(控制器)进行通信的工厂。 然后厨师将在冰箱(数据库服务器)中获取必要的配料(数据)。

The fridge will be able to provide the necessary material (data) to the cook in the back-end. The cook can now process that data and send back to the service factory of the front-end.

冰箱将能够向后端的厨师提供必要的材料(数据)。 厨师现在可以处理该数据并将其发送回前端的服务工厂。

The controller (waiter) will hand-over the prepared meal to the customer (user). The customer will now be able to consume the meal (data).

控制器(服务员)将准备好的饭菜移交给客户(用户)。 客户现在将能够消费餐点(数据)。

使用顺序图的过程视图 (Process View using Sequence Diagram)

Who uses it or what it shows:

谁使用它或显示什么：

• Integrators
  整合商
• Performance
  性能
• Scalability
  可扩展性

In the process view, I show the front-end server and back-end server separately at first and then connect them together with the database server.

在过程视图中，我首先分别显示前端服务器和后端服务器，然后将它们与数据库服务器连接在一起。

In the first example, an Angular application was deployed with hard-coded JSON in a service.ts file (located in the Service Factory).

在第一个示例中，在service.ts文件(位于Service Factory中)中使用硬编码JSON部署了Angular应用程序。

The Angular application can communicate with third-party APIs to obtain data and display it to the user.

Angular应用程序可以与第三方API通信以获取数据并将其显示给用户。

In our back-end, the Node.js application example starts with a hard-coded JSON that can be processed and used as a response.

在我们的后端，Node.js应用程序示例以硬编码的JSON开头，可以对其进行处理并用作响应。

This back-end can be connected to third-party APIs or a database server to obtain the JSON, process it, and send it back to the requester.

可以将此后端连接到第三方API或数据库服务器，以获取JSON，对其进行处理并将其发送回请求者。

With the front-end server, back-end server, and database server processes explained, I show the combination of these three servers below:

解释了前端服务器，后端服务器和数据库服务器进程之后，我在下面显示了这三个服务器的组合：

When an HTTP request is made, the front-end will be triggered and Angular will pick up the request. The request will be passed internally in Angular with Route sending a request for the view to View/Template.

发出HTTP请求后，前端将被触发，Angular将接听该请求。 该请求将在Angular内部传递，同时Route将视图请求发送到View / Template。

View/Template will request the Controller. The Controller will then create an HTTP request to a RESTful (Representational state transfer) endpoint to the Server Side, which is Express/Node.js. The request will then be passed internally with Express/Node.js from its Route to the Controller/Model.

视图/模板将请求控制器。 然后，控制器将创建一个HTTP请求，以发送到服务器端(即Express / Node.js)的RESTful(表示状态传输)端点。 然后，请求将与Express / Node.js在内部从其路由传递到控制器/模型。

The Controller/Model will make a request through the Mongoose ODM to interact with the Database Server that has MongoDB. MongoDB will process the request and respond the callback to Express/Node.js.

控制器/模型将通过Mongoose ODM发出请求，以与具有MongoDB的数据库服务器进行交互。 MongoDB将处理请求，并将回调响应给Express / Node.js。

Express/Node.js sends a JSON response to the Angular Controller. The Angular Controller would then respond with a view.

Express / Node.js将JSON响应发送到Angular Controller。 然后，Angular Controller将以一个视图进行响应。

使用序列图的场景视图 (Scenario View using Sequence Diagram)

Who uses it or what it shows:

谁使用它或显示什么：

• Describe interactions between objects and between processes
  描述对象之间以及过程之间的交互

The scenario described above involves a user accessing a book store application. When the user enters the URL, JavaScript will be run and will hit the router of the front-end server, which is the AppRoutingModule. The AppRoutingModule will call the BooksComponent, which will load fetchBooks as its dependency injection.

上述场景涉及用户访问书店应用程序。 当用户输入URL时，将运行JavaScript，并将命中前端服务器的路由器，即AppRoutingModule。 AppRoutingModule将调用BooksComponent，它将加载fetchBooks作为其依赖项注入。

fetchBooks will then create an HTTP request to the back-end server that has a router, controller, and model to process the request and query the database server.

然后，fetchBooks将创建一个到后端服务器的HTTP请求，该后端服务器具有路由器，控制器和模型，以处理该请求并查询数据库服务器。

The database server processes the query, and with the back-end server waiting, will grab the data and sent it back to the front-end server as a JSON response.

数据库服务器处理查询，并且在后端服务器等待的情况下，将获取数据并将其作为JSON响应发送回前端服务器。

The front-end will now have the data and the template view to show to the user.

现在，前端将具有数据和模板视图以显示给用户。

使用部署图的物理视图 (Physical View using Deployment Diagram)

Who uses it and what it shows:

谁使用它以及它显示什么：

• System engineer
  系统工程师
• Topology
  拓扑结构
• Communications
  通讯技术

The deployment diagram shows 3 servers: front-end, back-end, and database. In the front-end, we require the browser as Angular applications are browser-based web applications.

部署图显示了3个服务器：前端，后端和数据库。 在前端，我们需要浏览器，因为Angular应用程序是基于浏览器的Web应用程序。

The back-end server hosts our Node.js with Express on top of Node.js. In Express, we have the application and Mongoose on top of it. Express will handle the communication on both front-end and database. The database server only includes MongoDB. It uses JSON to communicate across servers.

后端服务器通过Node.js之上的Express托管我们的Node.js。 在Express中，我们在其顶部有该应用程序和Mongoose。 Express将处理前端和数据库上的通信。 数据库服务器仅包括MongoDB。 它使用JSON在服务器之间进行通信。

In our first build of the MEAN Stack, we’ll be deploying locally using our local machine (localhost) to deploy the front-end server, back-end server, and database server.

在我们的MEAN Stack的第一个版本中，我们将使用本地计算机(localhost)进行本地部署，以部署前端服务器，后端服务器和数据库服务器。

We’ll be using the following default ports: Angular - port 4200, Node.js/Express – port 3000, and MongoDB – port 27017.

我们将使用以下默认端口：Angular-端口4200，Node.js / Express-端口3000和MongoDB-端口27017。

The diagram below shows the full stack web application in UML notation.

下图以UML表示法显示了完整的堆栈Web应用程序。

Moving further to actual production, the thing to migrate to the cloud is our database. For MongoDB, I chose MongoDB Atlas as the cloud solution.

进一步走向实际生产，要迁移到云的是我们的数据库。 对于MongoDB，我选择了MongoDB Atlas作为云解决方案。

The last step to production deployment is uploading our front-end code to Amazon S3 and uploading the back-end in an EC2 instance with AWS. They would all communicate to each other with HTTP / HTTPS endpoints.

生产部署的最后一步是将前端代码上传到Amazon S3，并在带有AWS的EC2实例中上传后端。 它们都将通过HTTP / HTTPS端点相互通信。

Here's another diagram to show our production deployment without using UML notation.

这是另一幅图，显示了不使用UML表示法的生产部署。

使用封装图的开发视图 (Development View using Package Diagram)

Who uses it and what it shows:

谁使用它以及它显示什么：

• Programmers
  程式设计师
• Software Management
  软件管理

The package view of the Angular application shows that every Angular Component is imported in the AppModule. AppModule and AppRoutingModule are dependent on BooksComponent. The BooksComponent is dependent on BookDetailComponentDialog and ApiService.

Angular应用程序的程序包视图显示，每个Angular组件都已导入AppModule中。 AppModule和AppRoutingModule依赖于BooksComponent。 BooksComponent依赖于BookDetailComponentDialog和ApiService。

The package view of the Node.js application shows that all CRUD operations (controllers) such as fetch all books, fetch a book, update a book, and delete a book are imported by the app. Also, all the CRUD operations logic resides in the model book.

Node.js应用程序的程序包视图显示，所有CRUD操作(控制器)(例如，获取所有书籍，获取书籍，更新书籍和删除书籍)均由该应用程序导入。 同样，所有CRUD操作逻辑都位于模型手册中。

使用类图的逻辑视图 (Logical View using Class Diagram)

Who uses it and what it shows:

谁使用它以及它显示什么：

• End-user
  最终用户
• Functionality
  功能性

The book store application only showcased a single class called Book. The class members are: title, isbn, author, picture and price. The methods are: addBook, fetchBooks, fetchBook, updateBook, and deleteBook.

书店应用程序仅展示了一个名为Book的类。 班级成员是：标题，isbn，作者，图片和价格。 这些方法是：addBook，fetchBooks，fetchBook，updateBook和deleteBook。

The model Book’s structure in JSON format.

JSON格式的模型Book的结构。

Here are some videos for the diagrams:

以下是图表的一些视频：

Documentation available on my GitHub:

我的GitHub上提供的文档：

Find me on LinkedIn. =)

在LinkedIn上找到我。 =)

翻译自: https://www.freecodecamp.org/news/cjn-understanding-mean-stack-through-diagrams/

图表 stack属性