MEAN Stack 备忘单

2025-06-10

MEAN Stack 备忘单

已弃用！！！

我已经两年没有更新过这篇文章了，请参考相应的文档来了解最新的变化。

MEAN Stack 备忘单 Github 仓库

对于那些想要成为全栈开发人员的人来说，他们的首选是MEAN Stack，因为它有很多范围，而且很容易学习，但准备起来很困难，所以这里有一个备忘单 - 灵感来自技术面试备忘单.md

捷径

此列表旨在作为进一步研究这些主题的快速指南和参考。它基本上是对重要主题的总结，不可能深入涵盖所有内容。它也将在Github上供所有人使用。如有任何遗漏或需要更正，请随时提交Issue或PR 。

MEAN Stack 到底是什么

  • MEAN 是MongoDB、ExpressJS、AngularJS和Node.js的首字母缩写
  • MEAN 堆栈的主要优点之一是单一语言 JavaScript 可以在应用程序的每个级别上运行，使其成为一种高效且现代的 Web 开发方法。

MongoDB

蒙戈

MongoDB 介绍

MongoDB 是什么以及在哪里使用？

MongoDB 是一种 NoSQL 数据库，适用于以下应用，例如架构不稳定、需要高度可扩展性和可用性的应用。了解更多

NoSQL 和 SQL 之间的区别？

MySQL 术语 MongoDB 术语
数据库 数据库
桌子 收藏
排 文档或 BSON 文档
柱子 场地
指数 指数
表连接 嵌入文档和链接
主键 指定任何唯一的列或列组合作为主键。 主键 在 MongoDB 中，主键自动设置为 _id 字段。
聚合（例如分组） 聚合管道

阅读有关 MongoDB 与 MySQL 的更详细比较

安装 MongoDB

如何安装 MongoDB 和 Robo 3T？

安装 MongoDB和Robo 3T（Robo 3T - 以前称为 Robomongo 是 MongoDB 爱好者的免费轻量级 GUI）

如何安装 mongoose 节点模块？

Mongoose是 MongoDB 驱动程序，用于连接 MongoDB 和 Node.JS阅读文档

与 Mongoose 合作

从 Schema 开始？

Mongoose 中的一切都始于 Schema。每个 Schema 映射到一个 MongoDB 集合，并定义该集合中文档的结构。



 var mongoose = require('mongoose');
  var Schema = mongoose.Schema;

  var blogSchema = new Schema({
    title:  String,
    author: String,
    body:   String,
    comments: [{ body: String, date: Date }],
    date: { type: Date, default: Date.now },
    hidden: Boolean,
    meta: {
      votes: Number,
      favs:  Number
    }
  });
Enter fullscreen mode Exit fullscreen mode

创建模型？

要使用我们的模式定义，我们需要将 blogSchema 转换为可用的模型。为此，我们将它传递给 mongoose.model(modelName, schema)



var Blog = mongoose.model('Blog', blogSchema);
Enter fullscreen mode Exit fullscreen mode

阅读更多 Mongoose 指南

基本 CURD 函数

Mongoose 模型为 CRUD 操作提供了几个静态辅助函数。

创造（）

将一个或多个文档保存到数据库

插入多个（）

验证文档数组的快捷方式，如果所有文档有效，则将其插入 MongoDB。此函数比 .create() 更快，因为它只向服务器发送一个操作，而不是每个文档都发送一个操作。

找到一个（）

查找一个文档

寻找（）

查找文档

更新一（）

更新数据库中的一个文档但不返回它。

更新（）

与 update() 相同，但不支持多重或覆盖选项。

updateMany()

与 update() 相同，但 MongoDB 将更新所有符合过滤器的文档

删除一个（）

从集合中删除符合条件的第一个文档。

删除多个（）

从集合中删除所有符合条件的文档

阅读有关Mongoose 查询的更多信息

聚合

聚合是处理数据记录并返回计算结果的操作

这些操作包括求和、计数、求平均值、分组等，我们需要根据集合生成分组结果。MongoDB
提供了一个基于管道的聚合框架，如下所示。阅读更多



Model.aggregrate([
   pipe1_operator : {...},
   pipe2_operator : {...},
   pipe3_operator : {...}
])
Enter fullscreen mode Exit fullscreen mode

$group

统计特定区域的用户数量

$匹配

$match 充当 where 条件来过滤文档。

$项目

$project 用于动态地向集合中添加列并用于进一步聚合。

数数

统计属于特定区域的用户数量

清楚的

查找所有不同的区域

管道操作符比上面讨论的要多得多，可以在这里看到

Node.JS

节点猫

什么是 Node.JS

为什么使用 Node.js

异步和事件驱动

Node.js 库的所有 API 都是异步的，也就是非阻塞的。这意味着基于 Node.js 的服务器永远不会等待 API 返回数据。服务器调用后会转到下一个 API，而 Node.js 的事件通知机制可以帮助服务器从上一个 API 调用中获取响应。

非常快

Node.js 库基于 Google Chrome 的 V8 JavaScript 引擎构建，代码执行速度非常快。

单线程但高度可扩展

Node.js 使用带有事件循环的单线程模型。事件机制帮助服务器以非阻塞方式响应，并使其具有高度可扩展性，这与传统服务器创建有限的线程来处理请求不同。Node.js 使用单线程程序，因此同一个程序可以处理比 Apache HTTP Server 等传统服务器多得多的请求。

无缓冲

Node.js 应用程序从不缓冲任何数据。这些应用程序只是将数据分块输出。

在哪里使用 Node.js

以下是 Node.js 证明自己是完美技术合作伙伴的领域。

  • I/O 密集型应用程序
  • 数据流应用程序
  • 数据密集型实时应用程序（DIRT）
  • 基于 JSON API 的应用程序
  • 单页应用程序

*** 不建议将 Node.js 用于 CPU 密集型应用程序 ***

新公共管理

NPM 是 JavaScript 编程语言的包管理器。它是 Node.js 的默认包管理器，也是世界上最大的软件注册中心，包含超过一百万个软件包。

安装 Node.js 和 NPM

只需直接从nodejs.org网站下载安装程序或按照特定平台的说明进行操作。

Linux

基于 Debian 的发行版

例如 Debian、Ubuntu、Linux mint 和 Raspbian



sudo apt-get install nodejs npm
Enter fullscreen mode Exit fullscreen mode

Arch Linux



pacman -S nodejs npm
Enter fullscreen mode Exit fullscreen mode

MacOS



brew install node
Enter fullscreen mode Exit fullscreen mode

视窗

只需直接从nodejs.org网站下载Windows 安装程序即可。

技术深度

单线程

单线程进程包含按单个序列执行的指令。换句话说，一次只处理一个命令。了解更多关于单线程与多线程的信息

事件循环

事件循环允许 Node.js 执行非阻塞 I/O 操作（尽管 JavaScript 是单线程的），方法是尽可能将操作卸载到系统内核。

由于大多数现代内核都是多线程的，它们可以处理在后台执行的多个操作。当其中一个操作完成时，内核会通知 Node.js，以便将相应的回调添加到轮询队列中，最终执行

阅读以下链接了解有关事件循环的更多信息

Node.js 事件循环

事件循环到底是什么？作者：Philip Roberts - JSConf EU

事件循环可视化工具

JavaScript 引擎与 JavaScript 运行时

JavaScript引擎是一个程序或解释器，它读取 JavaScript 代码，生成机器码，并最终运行该机器码。它存在于 JavaScript 运行时中，例如 Web 浏览器、Node.js 甚至 Java 运行时环境 (JRE)。与其他解释器一样，它的工作是读取和执行代码。

JavaScript 运行时是另一种软件。它使用 JavaScript 引擎，并根据需要提供一些附加功能。最常见的运行时示例是 Web 浏览器。第二大广泛使用的运行时可能是 Node.js。

点击此处了解更多

ECMAScript

ECMAScript(ES)是由Ecma International制定的脚本语言规范标准。它是为了标准化JavaScript而创建的，并且每年都会发布新的标准。

ES6 功能
ES7、ES8、ES9 功能

Node.js 中的 Hello World

请参阅express 中的 hello world 程序。

一些常见的 NPM 包

REST API

REST API

什么是 REST API

  • REST 代表表述性状态转移，是一种使用 HTTP 请求来获取、放置、发布和删除数据的应用程序接口 (API)。

  • REST 是一种软件架构风格。正如 Roy Fielding 在一篇论文中所描述的，REST 是一种“架构风格”，它基本上利用了现有的 Web 技术和协议。

HTTP 方法

RESTful API 让您能够开发任何类型的 Web 应用程序，并支持所有可能的 CRUD 操作。REST 指南建议对特定类型的服务器调用使用特定的 HTTP 方法（虽然从技术上讲，违反此指南是可能的，但强烈建议不要这样做）。

使用下面给出的信息来找到适合 API 执行的操作的 HTTP 方法。

HTTP 获取

使用 GET 请求仅检索资源表示/信息 - 并且不以任何方式修改它

HTTP POST

POST 方法用于将新资源添加到资源集合中。

HTTP 放置

主要用于使用 PUT API 来更新现有资源。

HTTP 删除

顾名思义，DELETE API 用于删除资源。

HTTP 补丁

PATCH 请求是对资源进行部分更新

阅读更多HTTP 方法

表达

快递猫

什么是 Express

适用于节点的快速、无偏见、简约的 Web 框架。

安装

按照 Express Community 提供的这个简单说明进行操作

使用 Express 创建 Hello World REST API



const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))
Enter fullscreen mode Exit fullscreen mode

此应用启动服务器并监听 3000 端口的连接。对于指向根 URL (/) 或路由的请求，应用会响应“Hello World!”。阅读Express 指南，了解更多关于 Express 路由的信息。

角度

有角的猫

注意：请务必参考Angular 文档以获取详细说明

什么是 Angular

Angular 是一个基于 TypeScript 的开源 Web 应用程序框架，用于构建移动和桌面 Web 应用程序

为什么使用 Angular

  • Angular 是用 TypeScript 编写的，它是 JavaScript 的超集，实现了许多新的 ES2016+ 功能。
  • 出色的命令行界面（CLI）
  • 跨所有平台开发
  • 速度、性能和可扩展性
  • 令人难以置信的工具
  • 非常适合单页应用程序

设置 Angular

步骤1：安装Node.js

Angular 需要 Node.js 10.9.0 或更高版本。要安装 Node.js，请前往“安装 Node”

第 2 步：安装 Angular CLI



npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

就这样，您已经在机器上安装了 Angular。

Angular CLI

Angular CLI 是一个命令行界面工具，可用于初始化、开发、搭建和维护 Angular 应用。您可以直接在命令行界面中使用该工具。

输入以下内容列出给定命令（例如生成）的命令或选项以及简短描述



ng help
ng generate --help
Enter fullscreen mode Exit fullscreen mode

了解有关Angular CLI 的更多信息

创建并运行应用程序

现在是时候创建您的第一个 Angular 应用程序了。

创建新的 Angular 应用程序

使用new命令创建一个新的应用程序。



ng new my-first-project
Enter fullscreen mode Exit fullscreen mode

并进入创建的应用程序cd my-first-project

用于serve运行应用程序。



ng serve
Enter fullscreen mode Exit fullscreen mode

在浏览器中打开http://localhost:4200/即可查看新应用的运行情况。使用 ng serve 命令构建应用并在本地提供服务时，服务器会在您更改任何源文件时自动重建应用并重新加载页面。

基础知识

建筑学

Angular 是一个使用 HTML 和 TypeScript 构建客户端应用程序的平台和框架。Angular 是用 TypeScript 编写的。它将核心功能和可选功能实现为一组 TypeScript 库，您可以将其导入到您的应用中。

模块

Angular 应用的基本构建块是NgModule，它为组件提供编译上下文。NgModule 将相关代码收集到功能集中；一个 Angular 应用由一组 NgModule 定义。一个应用始终至少包含一个用于启动引导的根模块，并且通常包含更多功能模块。

了解有关Angular 模块的更多信息

成分

组件定义视图，视图是一组屏幕元素，Angular 可以根据你的程序逻辑和数据进行选择和修改。每个组件都包含一个选择器、模板和样式。模板和样式可以是内联文件，也可以是单独的文件。

了解有关Angular 组件的更多信息

服务和 DI

组件使用服务，这些服务提供与视图不直接相关的特定功能。服务提供者可以作为依赖项注入到组件中，从而使您的代码模块化、可复用且高效。

您可以将可共享的方法和数据纳入服务。

了解有关Angular 服务的更多信息

路由

Angular Routing 有助于控制应用程序的导航路径。
这也有助于保留应用程序状态。

了解有关Angular 路由的更多信息

指示

Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令给出的指令来转换 DOM。指令是一个带有 @Directive() 装饰器的类。

从技术上讲，组件是一种指令。然而，组件对于 Angular 应用来说如此独特且至关重要，因此 Angular 定义了 @Component() 装饰器，它扩展了 @Directive() 装饰器，使其具备面向模板的功能。

  • 结构指令

结构型指令通过添加、移除和替换 DOM 中的元素来改变布局。例如 *ngFor、*ngIf、*ngSwitch 等等。

Angular 结构指令

  • 属性指令

属性指令可以改变现有元素的外观或行为。在模板中，它们看起来像常规的 HTML 属性，因此得名。例如[style.color]、[color]、[(ngModel)] 等等。

Angular 属性指令

生命周期钩子

  • 组件具有由角度管理的生命周期。

  • Angular 创建它、渲染它、创建并渲染它的子项、在其数据绑定属性发生变化时检查它并在将其从 DOM 中删除之前销毁它。

  • Angular 提供了生命周期钩子，可以查看这些关键生命时刻，并能够在它们发生时采取行动。

生命周期序列

通过调用构造函数创建组件/指令后，Angular 会在特定时刻按以下顺序调用生命周期钩子方法：

  • ngOnChanges()
  • ngOnInit()
  • ngDoCheck()
  • ngAfterContentInit()
  • ngAfterContentChecked()
  • ngAfterViewInit()
  • ngAfterViewChecked()
  • ngOnDestroy()

了解有关Angular 生命周期的更多信息

文件结构

您可以看到您的 Angular 应用程序有数十个文件和文件夹。让我们看看它们的用途是什么。

  • 端到端

e2e 文件夹包含所有单元测试文件，您应该只在此目录中编写单元测试。

  • 源/应用程序

该文件夹包含我们所有的应用程序代码，例如组件、服务等。

  • 源/资产

此文件夹用于存放图像、字体等资产文件。

  • src/环境

这适用于开发模式、生产模式等环境配置。

  • src/polyfills

所有浏览器兼容性内容都在这里。

  • src/style.css

此样式文件对于整个 Angular 应用程序来说是通用的。如果您想为整个应用程序定义一种样式，您可以在这里进行定义，例如主题样式。

  • 源/业力

单元测试配置文件

  • 包.json

Package.json 包含所有 npm 和脚本相关的东西

  • 角度.json

该文件包含与角度应用程序相关的元数据

TypeScript 的编译器配置

Linter 配置

EditorConfig 有助于为多个开发人员保持一致的编码风格

深潜

组件通信

  • 父级 -> 子级通过 @Input
  • 通过 @ViewChild 实现子级 -> 父级
  • 通过 @Output EventEmitters 实现子级 -> 父级
  • 子级<->父级通过服务

Angular 组件之间共享数据 - 四种方法

管道

Angular 管道允许你在模板 HTML 中声明显示值转换。带有 @Pipe 装饰器的类定义了一个函数，该函数将输入值转换为输出值以在视图中显示。




<!-- Default format: output 'Jun 15, 2015'-->

 <p>Today is {{today | date}}</p>



<!-- fullDate format: output 'Monday, June 15, 2015'-->

<p>The date is {{today | date:'fullDate'}}</p>



<!-- shortTime format: output '9:43 AM'-->

 <p>The time is {{today | date:'shortTime'}}</p>
Enter fullscreen mode Exit fullscreen mode




数据绑定

从组件到视图的单向数据绑定

从视图到组件的单向数据绑定

组件与视图之间的双向数据绑定

就是这样。这些是 MEAN Stack 最重要的主题，如果有任何遗漏或需要更正的地方，请随时提交问题或PR 。

现在去练习吧。

练习猫

鏂囩珷鏉ユ簮锛�https://dev.to/thamaraiselvam/mean-stack-cheat-sheet-5a1n
Devto 翻译
PREV
首席工程师过于强调后端工程技能
NEXT
如何在终端中为命令添加书签