Node.js using express
1. 安裝express
npm install express
2. 安裝ejs
npm install ejs
3. 專案模組複製：此動作是希望將專案中會用到的模組存放在專案中，避免環境的變異造成專案執行上的異常
npm install
(於專案資料匣下執行此指令)
4. 建立專案(Project_Name為專案名稱)
express Project_Name
執行結果：
$ express ExpressPrj
create : ExpressPrj
create : ExpressPrj/package.json
create : ExpressPrj/app.js
create : ExpressPrj/views
create : ExpressPrj/views/layout.jade
create : ExpressPrj/views/index.jade
create : ExpressPrj/routes
create : ExpressPrj/routes/index.js
create : ExpressPrj/public
create : ExpressPrj/public/stylesheets
create : ExpressPrj/public/stylesheets/style.css
create : ExpressPrj/public/javascripts
create : ExpressPrj/public/images
dont forget to install dependencies:
$ cd ExpressPrj && npm install
4. 上面指令完成後，會產生一個以剛剛給定的名稱的資料匣，express預設以jade作為view engine，在此需要修改一些設定方可使用express之ejs作為view engine，目前專案的檔案結構說明如下：
- app.js: 實際主程式進入點
- package.json: 專案定義檔，含一些版本資訊
- public: 置放靜態檔案處，如javascript, css, image, html檔案等資料
- view: view engine主要讀取資料匣，包含jade的頁面程式，簡單說就是node.js的server端程式位置
- routes: 預設放置專案中router之位置，並且透過export提供給專案載入使用
5. 修改app.js檔案，增加使用ejs的定義
5-1. 首先修改configure區段：
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.session({ secret: "keyboard cat" }));
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
app.set("view options", {layout : true});
});
如果希望讓ejs用其他的副檔名，則可以參考下面設定：
app.set("view engine", "html");
app.set("views", __dirname + '/views');
app.register("html", ejs);
5-2. 然後移除：app.get('/', routes.index);
5-3. 增加app.get()如下：
app.get('/', function(req, res){
res.render('index', {
title: 'Express'
});
});
6. 在view之下新增layout.ejs檔案(express預設會找尋view下的layout.ejs作為樣板render頁面)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<!-- /page -->
<div data-role="page">
<!-- /header -->
<div data-role="header">
<h1>My Title</h1>
</div>
<!-- /content -->
<%- body %>
</div>
</body>
</html>
如欲使用其他樣板，可在router處增加額外樣板資訊 ：
app.get('/', function(req, res){
res.render('index', {
layout:'layout2',
title: 'Express'
});
});
7. 在view下新增index.ejs檔案：
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
8. 啓動server：
(首先開啓終端機，進入專案資料匣...)
node app.js
9. 檢視執行狀況：