摘要:[MAN鐵人賽]Day 19:NodeJS - Express plugin
前言
前面介紹了NodeJS與如何使用後，應該會覺得NodeJS的網頁要如何配置各檔案與如何開始一個網站的架構，這邊要介紹express這套基於NodeJS得輕量但強大的網頁框架架構。
Express 介紹
Express是一套在NodeJS上實現MVC架構的Framework，輕巧方便使用的特性讓他在Nodejs有不少的支持者～！
透過Express我們可以快速的建立NodeJS的網站架構，並透過直接修改這個成品的方式來快速開發網站。
想知道有哪些著名案例的話可看此
安裝
若您已按照先前的教學準備好了nodejs與npm的話，安裝 express 只需要一行指令
$ npm install express
安裝完後我們可以透過npm ls的方式來查看是否安裝成功
建立專案
接下來我們到我們要開啓專案的資料夾下輸入下列指令就可以建立專案了
$ express
結果：
很簡單的一行就弄好了我們的專案架構，接下來再輸入
$ npm install -d
結果：
就當看到npm in ok的字樣就表我們完成了，會不會太簡單阿！
開始第一個Node Express網頁
接下來我們透過下面的指令讓網站run起來
$ node app
結果：
是不是用到這邊都很順暢，完全不像先前講的NodeJS是一個很複雜的東西呢！
Express架構剖析
- app.js
大致上可以拆成三個部分：
- 首先是載入相依的模組，並建立 server。
- 第二個部分為設定檔，詳細的設定語法與參數可以參考官方文件。
- 最後一個部分是 Routes。
NodeJS run的時候的指定app檔案，這裡面包括了路由的設定(30,31行)我們就可以知道你可以從url預設指到routes資料夾下面的index(通常檔名會用這個命名)
- node_modules
該NodeJS載入的模組
- package.json
該NodeSJ的Package設定
- public
放images,javascripts,stylesheets的地方，這邊就可將能直接提供給網頁端使用
- routes
各路由導過來的頁面設定，通常我們會將檔案名稱跟路由設定為一制比較好一眼看出來架構，而透過下面的設定我們就可以呈現頁面要呈現什麼內容，如果有多個也可以分開指定：
- views
這就是你頁面實際上要呈現的內容，這邊我們要使用ejs這個plugin，基本上ejs的檔案本身都是可以做成組成架構的。
結合AngularJS讓前後台都變MVC架構
在開始前我們先看一下其他網路上前輩們的系統架構圖吧
透過此圖，我們應該可以很簡單的瞭解到前台跟後台還有資料庫的運作方式，那我們就來把AngularJS的網頁放到Express裡面來呈現吧。
首先我們先安裝ejs這個plugin
$ npm install ejs
安裝完後記得到package.json加入ejs設定，然後我們再把原本views的資料都砍掉並新增下面幾個頁面
- index.ejs
- header.ejs
- footer.ejs
- body.ejs
index頁面內容(把其他子ejs加進來)：
在index.ejs可以透過下面的語法載入Header與Body的Section
<% include header %>
<% include body %>
各ejs內容：
接下來我們再將body的內容與AngaulrJS的ui-router結合，透過這夜做切換到各子頁面的功能，如此一下就可將我們原先的AngularJS的網頁放進來摟
結語
使用Express幫我們建立NodeJS的網站架構應該不用一分鐘，這麼強大的工具當然要使用阿，上到今天MAN架構的主角與功能都介紹過一輪了，接下來就要開始跟大家一起hands on lab摟～ Are U ready?! Day-19 over!
