建立網(wǎng)路應(yīng)用程式涉及必須使用不同的技術(shù)和工具，處理資料庫操作、伺服器端操作以及客戶端 處理和顯示來自伺服器的資料。在開始之前 一個(gè)新項(xiàng)目，必須設(shè)定所有工具和項(xiàng)目結(jié)構(gòu)，這是 耗時(shí)的任務(wù)。使用框架或堆疊來執(zhí)行此任務(wù)可以加快速度 開發(fā)並減輕開發(fā)人員的工作。

什麼是平均數(shù)

「MEAN 是一個(gè)適用於現(xiàn)代 Web 應(yīng)用程式的全端 JavaScript 平臺(tái)」。

#這就是 MEAN 堆疊的作者在其網(wǎng)站上定義它的方式。很明顯，MEAN 面向各種 JavaScript 開發(fā)人員（伺服器端和客戶端），而且它是一個(gè)堆疊 platform 表示它由多個(gè)元件組成。

這些元件是：

• MongoDB
• 快遞
• AngularJS
• NodeJS

正如您所看到的，MEAN 匯集了四個(gè)最常用和最受讚賞的 JavaScript開發(fā)技術(shù)，為輕鬆開發(fā)奠定基礎(chǔ) 建立複雜的 Web 應(yīng)用程式。

安裝

MEAN 堆疊可以透過兩種方式安裝：

• 使用mean.io網(wǎng)站
• 使用各種 Yeoman 產(chǎn)生器。

使用其網(wǎng)站安裝 MEAN

這個(gè)方法很簡(jiǎn)單。您只需訪問 mean.io 網(wǎng)站，然後您可以下載該框架 zip 文件，點(diǎn)選綠色大按鈕。

此處提供的另一個(gè)選項(xiàng)是克隆 Git 儲(chǔ)存庫。只要打開一個(gè) 終端機(jī)並發(fā)出以下命令：

git clone https://github.com/linnovate/mean.git

使用 Yeoman 安裝 MEAN

有幾個(gè) Yeoman 生成器，由不同的人編寫 開發(fā)商。使用生成器安裝 MEAN 分兩步驟完成，首先 安裝發(fā)電機(jī)：

npm install -g generator-meanstack

然後使用 yo 建立應(yīng)用程式：

yo meanstack

上面的範(fàn)例假設(shè)安裝了 meanstack 產(chǎn)生器，並且也安裝了 Yeoman。有關(guān) MEAN 產(chǎn)生器的列表，請(qǐng)檢查此 按下“平均值”連結(jié)和過濾。為了 有關(guān)安裝 Yeoman 的信息，請(qǐng)查看 Yeoman 網(wǎng)站。

Addy Osmani 寫了一篇非常有趣的部落格文章 關(guān)於 MEAN 堆疊和 Yeoman 生成器。我強(qiáng)烈建議您閱讀該文章，以了解如何使用生成器安裝堆疊。

出於本文的目的，我將使用 Git 克隆方法。

安裝後

安裝後，只需將 cd 放入安裝 MEAN 堆疊的資料夾中 並發(fā)出 grunt 指令（您應(yīng)該安裝 grunt-cli）。這 命令將啟動(dòng)一個(gè)伺服器監(jiān)聽連接埠 3000，因此訪問 http://localhost:3000 在瀏覽器中會(huì)顯示以下內(nèi)容：

安裝後我們得到了什麼

MEAN 堆疊實(shí)際上是一個(gè)功能齊全的部落格引擎應(yīng)用程式。它有 使用各種方法進(jìn)行身份驗(yàn)證：Facebook、GitHub、Twitter 或 Google 以及 也可以透過簡(jiǎn)單的電子郵件和密碼。

我打賭到目前為止您一定很想看到一些程式碼...所以讓我們來看看。平均值 堆疊資料夾結(jié)構(gòu)應(yīng)如下所示：

伺服器部分

伺服器分為兩個(gè)資料夾和一個(gè)檔案：

• app 資料夾 - 包含構(gòu)成 app 的控制器、模型和視圖 應(yīng)用
• config 資料夾 - 包含控制應(yīng)用程式各部分的文件 表現(xiàn)得好
• server.js?- is the entry point of the 應(yīng)用程式

讓我們一一來看：

server.js 檔案

這是啟動(dòng)整個(gè)應(yīng)用程式的檔案。如果您不想使用 grunt 您可以使用 node server,js 來啟動(dòng)伺服器。

server.js 檔案負(fù)責(zé)：

• 正在載入配置。用於配置應(yīng)用程式本身的文件， 身份驗(yàn)證和資料庫連線已載入。
• 引導(dǎo)模型。這是透過迭代模型資料夾來完成的 載入該資料夾（或其子目錄）內(nèi)的所有檔案。
• 引導(dǎo)護(hù)照
• Initialize the express 應(yīng)用程式
• Configure the express 應(yīng)用
• 配置快速申請(qǐng)路線
• 開始偵聽配置的連接埠。

config 資料夾

此資料夾包含應(yīng)用程式設(shè)定檔。在裡面你可以找到一個(gè) env 資料夾，包含開發(fā)、生產(chǎn)和測(cè)試的配置 運(yùn)行應(yīng)用程式的模式。

此外，還有一些檔案包含應(yīng)用程式本身的配置， 用於登入的express部分和passport配置。

app 資料夾

在 app 資料夾內(nèi)，存放著整個(gè)伺服器端程式碼。這個(gè)資料夾 包含組成 MVC 的控制器、模型和視圖的子資料夾 伺服器應(yīng)用程式以及所提供的路由的資料夾。

預(yù)設(shè)情況下，有文章、使用者的控制器和索引文件 根路徑。此外，還創(chuàng)建了文章和用戶的模型以及路由 文章、使用者和根路徑是在安裝過程中建立的。

對(duì)於預(yù)設(shè)建立的視圖，會(huì)建立以下結(jié)構(gòu)：

includes 資料夾包含頁面的頁尾和頁首部分 被插入到屬於該應(yīng)用程式的所有頁面中。 layout 資料夾 包含頁面佈局的基本 HTML。此佈局從 views 資料夾擴(kuò)展到 index.html 檔案。

users資料夾包含登入、註冊(cè)和登入的標(biāo)記程式碼 正在驗(yàn)證。

在 views 資料夾的根目錄中，在 index.html?檔案旁邊，有文件 包含 404 和 500 錯(cuò)誤的標(biāo)記。

客戶端部分

客戶端部分程式碼位於 public 資料夾中。該資料夾包含一個(gè) css 用於應(yīng)用程式樣式的子資料夾和包含圖像的 img 資料夾 在應(yīng)用程式中使用。

應(yīng)特別注意 js 資料夾，其中 包含客戶端應(yīng)用程式的 Angular 程式碼、初始化程式碼等 指令和過濾器程式碼（目前為空文件）以及控制器和 為應(yīng)用程式的文章和標(biāo)題部分提供服務(wù)。 views 資料夾包含用於文章建立、編輯、顯示和的標(biāo)記 查看。

最後，lib 資料夾包含 Angular 函式庫程式碼。

應(yīng)用程式測(cè)試

test 資料夾包含用於測(cè)試應(yīng)用程式的檔案。主要有 是使用 Mocha 測(cè)試伺服器部分的檔案和用於測(cè)試 使用 Karma 的客戶端部分。

提供的工具

在使用 MEAN 堆疊時(shí)，您作為開發(fā)人員還可以存取 npm、bower 和 grunt，其中 應(yīng)該安裝，

值得一提的是，JSHint 已提供，並且所有 JavaScript 程式碼都已提供 掉毛了。此外，使用 Grunt，可以監(jiān)控項(xiàng)目的修改和 自動(dòng)重建。

結(jié)論

本文旨在作為第二個(gè)教程的後續(xù)內(nèi)容，其中完整的 應(yīng)用程式將建立在 MEAN 堆疊之上，向您展示 MEAN 如何能夠 進(jìn)行配置和調(diào)整，以用於其他類型的應(yīng)用程式。

敬請(qǐng)期待 第二部分！

以上是探索 MEAN 堆疊：簡(jiǎn)介的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！