基於JavaScript的現代Web應用全棧開發：MEAN

stormslowly發表於2015-05-07
JavaScriptWeb全棧

　　Web應用的開發涉及到很多相關的技術和工具，比如資料庫操作、伺服器管理、前端資料的顯示等等。開始一個新專案的時候就需要花費一些時間在這些工具和專案目錄的建立上。這個時候我就需要框架或者工具組合來加速開發。

　　MEAN = MongoDB + Express + AngularJS + NodeJS，它是基於 JavaScript 的現代 Web 應用全棧開發工具。

　什麼是MEAN

　　“MEAN是基於javascript現代web應用全棧開發工具。”

　　這是MEAN的作者對它下的定義。可以看出MEAN是瞄準給前後端的Javascript工程師使用的，這個工具集主要包括下面幾個部分

　　MEAN這套工具匯聚了當前廣大碼農喜聞樂見的Javascript開發工具，為輕鬆構建複雜web應用打下了基礎

　安裝

　　兩種安裝方式

  1. 使用mean.io的安裝包
  2. 使用Yeoman的生成器

　　1 安裝包

　　這種安裝方式非常簡單。到mean.io，下載安裝包的zip檔案。

　　或者用git下載MEAN，在命令列輸入 git clone https://github.com/linnovate/mean.git

　　2. Yeoman方式

　　很多開發者都為MEAN開發了Yeo的生成器，使用yeoman的生成器就下面兩步。先安裝生成器

npm install -g generator-meanstack

　　然後生成專案

yo meanstack

　　上面的例子是假設你已經安裝mean的生成器和yeoman。想看看還有什麼其他的MEAN的生成器，可以來這裡，過濾下關鍵字“MEAN”,就會看到一大批。如果不知道如何安裝Yeoman，看這裡

　　Addy Osmani寫了一篇關於MEAN和它的生成器的部落格。強烈推薦，看了之後就知道如何安裝和使用MEAN的生成器了。

　　為了教程演示的目的，本文采用Git clone的方式來安裝演示。

　安裝收尾

　　在命令列進入到安裝(克隆)好MEAN的目錄(譯者注：記得先安裝下所需要node模組，npm install)，然後執行grunt命令(我想你一定已經安裝過grunt-cli了吧)。grunt會啟動一個監聽3000埠的Web伺服器，瀏覽器裡面看看http://localhost:3000。

　MEAN帶了什麼

　　MEAN預設是一個blog應用引擎，支援多種認證的方式：Facebook、GitHub、Twitter、Google已經郵件+密碼的方式。

　　估計你已將迫不及待的想看程式碼了。MEAN的目錄結構看起來是這樣的：

　　伺服器端

　　伺服器端相關的資料夾和檔案

  • app目錄,主要包括MVC三大部分
  • config目錄，包括應用的配置資訊，控制伺服器的行為
  • server.js 應用入口

　　我們一個一個來看

　　server.js

　　應用的入口，如果你不想用grunt來啟動服務的話，可以直接用node server.js

　　server.js的主要功能

  • 載入配置資訊. 主要是應用本身的配置，認證和資料庫連線的配置載入。
  • 載入模型. 遍歷models目錄下(包括子目錄)中模型定義檔案，並且載入。
  • 載入證照
  • 初始化Express應用
  • 配置Express應用
  • 配置Express路由資訊
  • 在指定埠啟動服務

　　config目錄

　　配置檔案都在這目錄中。在env目錄主要包括開發環境、生產環境已經測試模式的配置的資訊。

　　其他的配置檔案是對應用本身的配置，比如express的配置，登陸證照的配置等。

　　app目錄

　　app都是伺服器端的程式碼。為MVC建立的models，view和controllers三個目錄，還有為了路由建立的資料夾。

　　專案建立時，就有articles users和index三個控制器，models目錄下的articles users兩個模型檔案

　　預設建立的檢視是如下結構

　　includes目錄包web應用頁面的頁首頁尾。layout目錄是頁面的佈局檔案，這個佈局檔案應會用到view目錄下index.html。

　　users目錄包含註冊登陸的頁面程式碼。

　　在views根目錄，除了index.html還有404和500的頁面。

　　客戶端

　　客戶端的檔案都在public目錄下，css和img目錄分別包含專案的樣式檔案和圖片檔案。

　　特別要注意下js目錄，裡面包含了AngularJS程式碼，如初始化，指令，過濾器(目前都是空的)，還有默人blog應用建立的控制器和服務。views目錄下是為blog應用中articles建立，編輯，檢視的頁面。

　　lib目錄中是AngularJS庫的程式碼。

　測試

　　test目錄包含了專案的測試程式碼，伺服器端的程式碼採用Mocha測試框架，客戶端程式碼採用Karma

　所需工具

　　使用MEAN時，開發者需要安裝好npm，bower，和grunt。

　　還有jshint也需要安裝。通過grunt的配合就能監視程式碼，每次程式碼改動就會重新自動構建。

　預告

　　隨後還會有第二個教程來演示如何在MEAN上建立一個應用，包括如何配置MEAN以適應於不同的應用場景。

　　譯者贈送一視訊。

　　如果等不及tuts的第二篇教程，可以看看這個是視訊 http://tagtree.tv/mean-stack-episode1(不過需要翻牆和twitter賬號。)和對應的程式碼https://github.com/hendrikswan/tagtree-mean

　　原文地址:http://code.tutsplus.com/tutorials/introduction-to-the-mean-stack--cms-19918

相關文章