探索 MEAN 堆棧:簡介

構建網絡應用程序涉及必須使用不同的技術和工具,處理數據庫操作、服務器端操作以及客戶端 處理和顯示來自服務器的數據。在開始之前 一個新項目,必須設置所有工具和項目結構,這是 耗時的任務。使用框架或堆棧來執行此任務可以加快速度 開發并減輕開發人員的工作。

什么是平均數

“mean 是一個適用于現代 web 應用程序的全棧 JavaScript 平臺”。

這就是 MEAN 堆棧的作者在其網站上定義它的方式。很明顯,MEAN 面向各種 JavaScript 開發人員(服務器端和客戶端),而且它是一個堆棧 platform 表示它由多個組件組成。

這些組件是:

  • MongoDB
  • 快遞
  • AngularJS
  • NodeJS

正如您所看到的,MEAN 匯集了四個最常用和最受贊賞的 JavaScript開發技術,為輕松開發奠定基礎 構建復雜的 Web 應用程序。

安裝

MEAN 堆??梢酝ㄟ^兩種方式安裝:

  • 使用mean.io網站
  • 使用各種 Yeoman 生成器。

使用其站點安裝 MEAN

這個方法很簡單。您只需訪問 mean.io 網站,然后您可以下載該框架 zip 文件,點擊綠色大按鈕。

此處提供的另一個選項是克隆 Git 存儲庫。只要打開一個 終端并發出以下命令:

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

使用 Yeoman 安裝 MEAN

有幾個 Yeoman 生成器,由不同的人編寫 開發商。使用生成器安裝 MEAN 分兩步完成,首先 安裝發電機:

npm install -g generator-meanstack 

然后使用 yo 創建應用程序:

yo meanstack 

上面的示例假設安裝了 meanstack 生成器,并且還安裝了 Yeoman。有關 MEAN 生成器的列表,請檢查此 按“平均值”鏈接和過濾。為了 有關安裝 Yeoman 的信息,請查看 Yeoman 網站。

Addy Osmani 寫了一篇非常有趣的博客文章 關于 MEAN 堆棧和 Yeoman 生成器。我強烈建議您閱讀該文章,以了解如何使用生成器安裝堆棧。

出于本文的目的,我將使用 Git 克隆方法。

安裝后

安裝后,只需將 cd 放入安裝 MEAN 堆棧的文件夾中 并發出 grunt 命令(您應該安裝 grunt-cli)。這 命令將啟動一個服務器監聽端口 3000,因此訪問 http://localhost:3000 在瀏覽器中會顯示如下內容:

探索 MEAN 堆棧:簡介

安裝后我們得到了什么

MEAN 堆棧實際上是一個功能齊全的博客引擎應用程序。它有 使用各種方法進行身份驗證:Facebook、GitHub、Twitter 或 Google 以及 也可以通過簡單的電子郵件和密碼。

我打賭到目前為止您一定很想看到一些代碼…所以讓我們來看看。均值 堆棧文件夾結構應如下所示:

探索 MEAN 堆棧:簡介

服務器部分

服務器分為兩個文件夾和一個文件:

  • app 文件夾 – 包含構成 app 的控制器、模型和視圖 應用
  • config 文件夾 – 包含控制應用程序各部分的文件 表現得好
  • server.js?– is the entry point of the 應用

讓我們一一來看:

server.js 文件

這是啟動整個應用程序的文件。如果您不想使用 grunt 您可以使用 node server,js 來啟動服務器。

server.js 文件負責:

  • 正在加載配置。用于配置應用程序本身的文件, 身份驗證和數據庫連接已加載。
  • 引導模型。這是通過迭代模型文件夾來完成的 加載該文件夾(或其子目錄)內的所有文件。
  • 引導護照
  • Initialize the express 應用
  • Configure the express 應用
  • 配置快速申請路線
  • 開始偵聽配置的端口。

config 文件夾

此文件夾包含應用程序配置文件。在里面你可以找到一個 env 文件夾,包含開發、生產和測試的配置 運行應用程序的模式。

此外,還有一些文件包含應用程序本身的配置, 用于登錄的express部分和passport配置。

app 文件夾

在 app 文件夾內,存放著整個服務器端代碼。這個文件夾 包含組成 MVC 的控制器、模型和視圖的子文件夾 服務器應用程序以及所提供的路由的文件夾。

默認情況下,有文章、用戶的控制器和索引文件 根路徑。此外,還創建了文章和用戶的模型以及路由 文章、用戶和根路徑是在安裝過程中創建的。

對于默認創建的視圖,會創建以下結構:

探索 MEAN 堆棧:簡介

includes 文件夾包含頁面的頁腳和頁眉部分 被插入到屬于該應用程序的所有頁面中。 layout 文件夾 包含頁面布局的基本 HTML。此布局從 views 文件夾擴展到 index.html 文件。

users文件夾包含登錄、注冊和登錄的標記代碼 正在驗證。

在 views 文件夾的根目錄中,在 index.html?文件旁邊,有文件 包含 404 和 500 錯誤的標記。

客戶端部分

客戶端部分代碼位于 public 文件夾中。該文件夾包含一個 css 用于應用程序樣式的子文件夾和包含圖像的 img 文件夾 在應用程序中使用。

應特別注意 js 文件夾,其中 包含客戶端應用程序的 Angular 代碼、初始化代碼等 指令和過濾器代碼(當前為空文件)以及控制器和 為應用程序的文章和標題部分提供服務。 views 文件夾包含用于文章創建、編輯、顯示和的標記 查看。

最后,lib 文件夾包含 Angular 庫代碼。

應用程序測試

test 文件夾包含用于測試應用程序的文件。主要有 是使用 Mocha 測試服務器部分的文件和用于測試 使用 Karma 的客戶端部分。

提供的工具

在使用 MEAN 堆棧時,您作為開發人員還可以訪問 npm、bower 和 grunt,其中 應該安裝,

值得一提的是,JSHint 已提供,并且所有 JavaScript 代碼均已提供 掉毛了。此外,使用 Grunt,可以監視項目的修改和 自動重建。

結論

本文旨在作為第二個教程的后續內容,其中完整的 應用程序將構建在 MEAN 堆棧之上,向您展示 MEAN 如何能夠 進行配置和調整,以用于其他類型的應用程序。

敬請期待 第二部分!

? 版權聲明
THE END
喜歡就支持一下吧
點贊14 分享