MEAN.js 文檔

時間 2020-01-23

標籤 mean.js mean 文檔欄目 JavaScript 简体版

原文原文鏈接

本文同步至我的博客 MEAN.js 文檔，轉載請註明出處。

Overview

感謝使用 MEAN.js 框架！javascript

本文檔涵蓋構建 MEAN 應用所需的基礎知識。php

在你開始閱讀該文檔以前,咱們建議您閱讀 MEAN.js 所使用的技術棧：html

MongoDB前端

請至 MongoDB 官網獲取 MongoDB 手冊，這對了解什麼是 NoSQL 和 MongoDB 大有裨益。java

Expressnode

理解 Express MVC 的最優方式依然是經過官網，尤爲是 Express 入門指南；另外，還能夠從 StackOverflow(譯改原連接沒法使用) 上獲取更多資料。git

AngularJSangularjs

從 Angular 官網開始學習是個不錯的開始。此外學習 Thinkster Popular Guide 和 Egghead 視頻教程也是不錯的開始。 github

Node.jsweb

通讀 Node.js 官網手冊及 StackOverflow Thred，可讓你儘快瞭解什麼是 Node.js 平臺。

當閱讀完上述資料後，若是你感受多這些技術有了大體瞭解，那麼如今能夠繼續咱們的 MEAN.js 學習了。

Enjoy & keep us updated,
The MEAN.JS Team.

一起步

這個章節會帶你學習如何使用 MEAN.js 框架，第一步就是安裝全部依賴和初始化應用。

1.1 依賴

在開始前，請先確認你是否已在開發機器上安裝了下面全部依賴。

確認是否已在機器上安裝了 Git 版本控制工具。 OSX 和 Linux 系統通常會默認安裝它。能夠輸入下列命令確認是否已安裝：

$ git --version

-- Node.js & npm

下載並安裝 Node.js 和 npm 包管理器，若是你遇到任何問題，您還可使用 Github Gist 來安裝 node.js。

MongoDB

下載並安裝 MongoDB 數據庫，並確保在默認端口 (27017) 啓動服務。

Bower

咱們須要使用 Bower 包管理器對前端代碼進行管理，安裝 Bower 須要預先安裝 Node.js 和 npm，而後使用 npm 執行下面的命令進行全局安裝 Bower：

$ npm install -g bower

Gulp

咱們還會使用 Glup 自動化構建工具來管理開發組件。安裝 Glup 須要預先安裝 Node.js 和 npm，而後使用 npm 執行下面的命令進行全局安裝 Glup：

$ npm install -g glup

Note: Your user might not have the permissions to install package globally, so use a super user or sudo.

1.2 下載 MEAN.js

咱們提供有多種方式獲取 MEAN.js 框架。

1.2.1 從 Github 版本庫複製

使用 Git 直接從 MEAN.js 版本庫複製：

$ git clone https://github.com/meanjs/mean.git <your-project-name>

1.2.2 下載 MEAN.js 壓縮文件

還能夠經過下載最新穩定版本的 MEAN.js 壓縮包。使用 wget 命令執行下載：

$ wget https://github.com/meanjs/mean/archive/0.5.0.zip -O meanjs.zip; unzip meanjs.zip; rm meanjs.zip

不要忘記將 mean-0.5.0 重命名爲你的項目名稱。

1.3 安裝依賴

上面全部的依賴工具安裝完成後，還需簡單的幾步處理就能夠開始開發 MEAN 應用了。

首先，須要安裝 Node.js 依賴庫。MEAN.js 初始項目中的 package.js 文件列出來全部項目依賴模塊，若是須要了解如何安裝模塊能夠閱讀 NPM & Package.json 章節。

要安裝這些項目依賴須要再次執行 npm 命令，僅僅須要運行下面的命令便可：

$ npm install

This command does a few things:
-First it will install the dependencies needed for the application to run.

If you're running in a development environment, it will then also install development dependencies needed for testing and running your application.
Finally, when the install process is over, npm will initiate a bower installcommand to install all the front-end modules needed for the application.

1.4 使用 Glup 啓動項目

完成全部安裝工做後，就可使用 Glup 啓動並運行項目，僅需執行下面的命令：

$ glup

項目會在 3000 端口執行，因此咱們能夠在瀏覽器輸入 http://localhost:3000 訪問項目。

That's it! your application should be running by now, to proceed with your development check the other sections in this documentation.

若是在此以前遇到什麼問題，能夠查閱「排錯」章節瞭解詳情。

二排錯

若是遇到各類疑難雜症請點擊原文

三目錄結構

MEANJS 項目的目錄結構以下圖所示:

<project-home> 文件夾爲項目的根目錄，你能夠給你的項目建立指定的項目名稱做爲根目錄名稱。如下是子目錄及其功能說明.

3.1 <project-home>

應用配置文件列表
應用默認配置文件列表
一系列用於構建和啓動應用的文件
包含四個主要模塊及相關類庫的模塊文件夾

3.2 config 目錄

項目全部的運行時環境配置文件和輔助函數文件都放置在 config 目錄中。下面詳細講解它的構成：

3.2.1 config/assets

該目錄用於管理框架的資源文件。當 MEAN.js 項目運行時，用戶界面須要使用的一系列靜態資源皆在此管理。靜態資源包括 images，CSS 樣式表，JavaScript 腳本和視圖(如 html 模版)。

另外，依據不一樣的開發環境 (NODE_ENV) 將會動態加載不一樣環境的資源管理文件（如: dev, test, prod）。該目錄中的配置是用於告知項目在運行中須要使用的全部靜態資源以及如何查找相關文件路徑。

3.2.2 config/env

該目錄用於管理 MEAN.js 項目運行時，提供針對不一樣開發環境（如： local, dev, test, prod）的配置設置。

3.2.3 config/lib

lib 目錄是各類輔助函數文件的管理目錄，用於 MEAN.js 使用的各個模塊就放置於此。

目錄中包含提供引導應用啓動的組件，建立 express 實例的組件，建立日誌服務的組件，建立 MongoDB 鏈接實例組件，多文件上傳組件，建立測試用戶數據組件及建立 socket 鏈接服務的組件等。

3.3 modules 目錄

modules 目錄是 MEAN.js 應用的 AngularJS 前端業務邏輯模塊的管理目錄。當你建立各類前端業務邏輯時，每一個功能特性建議以獨立命名的文件名做爲一個獨立的模塊進行管理。正如 AngularJS 開發指南描述的那樣, 「你能夠將一個功能模塊視做應用中對應部分的容器」。

MEAN.js 中提供了部分開箱即用的經常使用模塊，你須要作的是建立本身項目中須要涉及的功能模塊便可。

modules 目錄下的子目錄，如下面的目錄結構進行組織管理：

3.3.1 modules/*/client

前端代碼，相關資源文件和特定的模塊將在此目錄下進行管理。

3.3.2 modules/*/server

服務端代碼，相關資源文件和特定的模塊將在此目錄下進行管理。

3.3.3 modules/*/tests

用於數據校驗的組件及相關文件在此目錄進行管理。

3.4 public 目錄

項目中全部前端使用的靜態資源都放置在這個目錄中。靜態文件包括構建應用的資源文件及使用的外部第三方類庫。

3.4.1 public/lib

public/lib 包含應用所使用的外部類庫及由 bower 引入的資源文件。

3.4.2 public/dist

public/dist 用於存放構建後的資源文件。例如，生產環境中所使用壓縮後的腳本文件。

3.5 scripts 目錄

scripts 目錄存放開發，管理和操做項目的腳本文件。

4 Express

每一個優秀的 Web 應用最終都是一個 Web 框架。MEAN.js 使用的是 Express MVC 框架。Express 是這樣介紹的「Express 是一個簡潔而靈活的 node.js Web應用框架, 提供一系列強大特性幫助你建立各類Web應用 ...」

Express 的啓動配置在 config/lib/express.js 文件裏。本節咱們來聊聊在 MEAN.js 中要如何配置和啓動 Express。

4.1 可配置的屬性

4.1.1 app.locals

在 MEAN.js 裏可使用 app.locals 設置自定義的變量。變量一經設置便可在整個項目生命週期內使用。若是須要在前端代碼使用某個全局變量，這個特性會很是有用，好比 users/sessions 連接到服務器。

4.1.2 res.locals

此外 Express 應用還具備存儲響應數據到本地變量的能力，好比 res.locals 就能夠存儲請求數據。MEAN.js 就是用了這個特性。Express 中的 res 對象會存儲某個 HTTP 請求的響應的數據。從 API 文檔中咱們能夠看出若是須要獲取請求數據 res.locals 功能會很是有用。

4.2 路由

使用 Express 框架的優點之一就是提供開箱即用的路由功能。在 MEAN.js 中，路由主要處理來自前端的 URL 跳轉和處理 HTTP 請求。

一個請求的 URL 一般包括幾個部分：資源定位符，查詢字符串以及片斷信息等。

此外，一個 HTTP 請求還包含請求方法。 This is the desired action to be performed on the resource specified by the URL。經常使用的請求方法包括：GET, POST, PUT 和 DELETE。

請求的 URL 地址和請求方式共同組成一個路由。在 MEAN.js 中會在路由配置裏定義處理不一樣請求的方法。爲了實現路由功能，我麼直接使用 Express 的路由功能。在 Express 官網的路由使用中有講解如何定義一個路由：

app.METHOD(PATH, HANDLER)

app 是一個 Express 實例；
METHOD 爲 HTTP 請求方法；
PATH 對應 URL 中的路徑；
HANDLER 是當匹配到的路由時，用於處理請求的方法。

4.3 中間件

Express 設計哲學中一個重要組成部分就是爲 Web 應用提供中間件框架。Express 做者這樣描述過中間件「中間件能夠訪問請求和響應對象中的全部數據，並經過 next() 函數將請求傳送回請求-響應聲明週期中的下一個處理」。

須要注意的是在 MEAN.js 中自定義中間件的順序很是重要。當項目啓動時，中間件的定義順序決定了它們的執行順序。

除了自定義中間件外，MEAN.js 仍是用了諸多第三方的中間件，它們是：

五測試

咱們使用 Mocha 組件對服務端代碼進行測試。它是一款異步可維護的採用 BDD 語法的測試框架

5.1 斷言

Mocha needs an external assertion library to predicate the result of each test, in this case Should.js is being used. Should is an expressive library aiming to simplify tests and be readable. It extends the Object.prototype with a single non-enumerable getter that allows you to express how that object should behave.

5.2 Test Files

Each entity have its own test file located inside their respective module server tests folder. Ex.: modules/core/tests/server

5.3 Writing Tests

There are a few common steps we use to test an entity:

- In the beforeEach or before functions take care of prerequisites and create the objects you are about to use in your tests.
- For each test start with a describe function to indicate which method is being tested.
- Next, add your scenario tests using the it function.
- In the it function run the tests functionality and use should to assert what the end result should be.
- Finally use after or afterEach functions to finalize your tests and clear the test database.

六認證

Passport is an authentication middleware, which allows you to implement many authentication methods in your Express application.

Passport utilizes a modular approach that uses authentication strategies modules, offering a simple, configurable authentication solutions.

This boilerplate comes pre-bundled with 7 authentication mechanisms implemented in the config/passport.js file:

Local

The Local Strategy is used to authenticate users via username and password.

Facebook

The Facebook Strategy is used to authenticate users via their Facebook account.

Github

The Github Strategy is used to authenticate users via their Github account.

Google

The Google Strategy is used to authenticate users via their Google account.

The Linkedin Strategy is used to authenticate users via their Linkedin account.

PayPal

The PayPal Strategy is used to authenticate users via their PayPal account.

Twitter

The Twitter Strategy is used to authenticate users via their Twitter account.

七建立 AngularJS 導航

MEAN.js 提供了一個建立和管理 AngularJS 導航功能組件。這個組件提供不少使用方法：

Menus.getMenu(menuid)

返回導航 ID 爲 menuid 的菜單對象。

var menu = Menus.getMenu('myMenu');

Menus.addMenu(menuId, [options])

建立標識爲 menuId 的導航：

menuId 必選 - 識別當前導航
options 可選，默認值爲 {} - 值爲導航對象信息，包括:
- items 默認 [] - 一個菜單項的數組，用來初始化菜單。
- roles 默認 ['user', 'admin'] - 可以以容許查看此菜單的角色的數組。

Menus.addMenu('myMenu', {roles:'*'});

Menus.removeMenu(menuId)

刪除一個導航配置.

Menus.removeMenu('myMenu');

Menus.addMenuItem(menuId, [options])

建立一個新的導航對象。方法同樣包含兩個參數：

menuId (Required) - 識別當前導航
options (Optional; Default: {}) - 導航選項具體初始化選項。可能的選項包括:
- title (Optional; Default: '') - 導航名稱.
- state (Optional; Default: '') - The UIRoute value, which is used to define the URL scheme where this menu item is marked as active.
- type (Optional; Default: 'item') - 值爲 'item' 或 'dropdown'.
- class (Optional; Default: undefined) - CSS class(es) to apply to the menu list item (li) that is created.
- roles (Optional; Default: menu.roles) - An array indicating the roles that are allowed to view this menu item.
- position (Optional; Default: 0) - Specify the order of appearance.

Menus.addMenuItem('topbar', {title: 'Menu Item', state: 'menuitemstate'});

Menus.removeMenuItem(menuId, menuItemState)

刪除給定的導航配置。方法接收兩個參數：

menuId (Required) - 識別當前導航
menuItemState (Required) - Indicates the menu item state that should be removed.

Menus.removeMenuItem('topbar', 'menuitemstate');

Menus.addSubMenuItem(menuId, parentItemState, [options])

向給定標識符導航元素中添加子導航對象。

menuId (Required) - 識別當前導航
parentItemState (Required) - Indicates the parent menu item state.
options (Optional; Default: {}) - Indicates the options object to initialize the sub menu item with. Possible options include:
- title (Optional; Default: '') - A String title for the menu item.
- state (Optional; Default: '') - The UIRoute value, which is used to define the URL scheme where this menu item is marked as active.
- roles (Optional; Default: parent.roles) - An array indicating the roles that are allowed to view this menu item.
- position (Optional; Default: 0) - Specify the order of appearance.

Menus.addSubMenuItem('topbar', 'dropdown1state', {title: 'Sub Menu Item', state: 'submenuitemstate'});

Menus.removeSubMenuItem(menuId, submenuItemState)

從已有導航中刪除給定標識的導航配置。接收兩個參數：

menuId (Required) - 識別當前導航
submenuItemState (Required) - Indicates the sub menu item state that should be removed.

Menus.removeSubMenuItem('topbar', 'submenuitemstate');

導航信息配置一般在應用模塊中進行定義配置。一個簡單的導航配置示例以下：

angular.module('example').run(['Menus',
  function(Menus) {
    Menus.addMenuItem('topbar', {title: 'Example', state: 'example'});
    
    Menus.addMenuItem('topbar', {title: 'Example Dropdown', state: 'exampledropdown', type: 'dropdown'});
    Menus.addSubMenuItem('topbar', 'exampledropdown', {title: 'Example Sub Item', state: 'examplesubitem'});
  }
]);