安裝 express
npm install express
//引入express
var express = require('express');
//建立一個 Express 伺服器
var app = express();
//設定靜態檔案所在目錄
app.use(express.static(__dirname + '/publc'));
app.listen(12345);
自訂路由 Routing
//處理首頁連線要求
app.get('/', function(req, res) {
//傳送字串給瀏覽器
res.send('This is a GET METHOD');
res.end();
});
//POST方法來處理路由
app.post('/post', function(req, res) {
res.send('This is a POST METHOD');
res.end();
})
大多數的連線都是以GET方法來要求葉面,而網頁上的表單傳送,則會使用到POST方法。我們可以針對需求,以get()或post()設定不同的路由處理函數。
路由處理函數
這個處理函數扮演著處理連線要求的重要腳色,它會被帶入兩個參數:
>>request-連線要求的資訊和方法
>>response-回應連線的資訊和方法
function(req, res) {
// 處理連線要求,並回應客戶端
}
根據模板動態生成頁面
使用Jade
安裝Jade模板引擎模組
npm install jade
//設定模板放置目錄
app.set('views', __dirname + '/views');
//設定模板引擎
app.set ('view engine', 'jade');
//設定首頁,導入(render)到/views/mypage裡
app.get('/', function(req, res) {
res.render('mypage');
//傳遞參數msg1給mypage
res.render('mypage', { msg1: 'Hello Template' })
}
Jade基本語法
a標籤HTML用法
<a href="http://www.mandice.com/">Heloo</a>
a標籤使用Jade
a(href='http://www.mandice.com/') Hello
id和class屬性
Jade仿用CSS用法 #開頭代表id屬性、 .開頭代表class屬性
div #myid.my_div
帶入參數
在Jade裡可以使用 #{參數名稱}的方式,去使用res.render()所傳進來的參數內容。
div #{msg1}
基本邏輯表示
使用if做判斷
- if (msg1 == 'Hello Template')
div Hello Template
- else
div Notjing
使用 for Each 方法
- for (var i=0; i<=10; i++ )
div #{i}
EJS模板引擎
跟Jade比較起來,EJS語法跟原來HTML相近
HTML
<html>
<head>
<title>Hello EJS</title>
</head>
<body>
<h1>Hello EJS</h1>
</body>
<html>
EJS 重述上頁面
發現語法都差不多
<html>
<head>
<title>Hello EJS</title>
</head>
<body>
<h1>Hello EJS</h1>
</body>
<html>
安裝EJS引擎
npm install ejs
基本語法
EJS使用 <% %>所包夾而成的特殊標籤,來表示動態內容,上述例子中的msg1變數,可以用 <%=msg1 %>來帶入變數內容。
if的判斷
<% if(msg1 == 'Hi EJS') { %>
<h1> YES </h1>
<% } else { %>
<h1> NO </h1>
<% } %>
使用for-loop迴圈,將每一個陣列一一印出
<ul>
<% for (var i=o; i<list.length; i++) { %>
<li><%= list[i] %></li>
<% } %>
</ul>
接受客戶端傳遞的資料
Query String
QueryString的使用方式,是在網頁路徑之後接一個?符號隔開,然後連接上所要傳遞的字串,如以下例子。
/mydir/hello?name=Fried&country=Taipei
express程式接值
app.get('/mydir/hello', function(req, res) {
console.log(req.query.name);
console.log(req.query.country);
});
get缺點:你雖然可以直接在瀏覽器上網址列輸入想送出的資料,測試容易且快速。但是,由於網址路徑是有長度限制的,往往不能使用QueryString傳太過複雜或太大的資料。
POST方法
對一般網站開發者來說,使用POST方法的方式,多半是使用HTML的表單form,當使用者按下送出按鈕submit,瀏覽器就會用POST的方法,把表單各個欄位內容放置在body中,送到伺服器上。
為了能讓Express讀取並處理POST方法的body資料區塊,你要先安裝body-parser模組。
npm install body-parser
安裝完就要設定啟用body解析器,由於範例將會用HTML表單form來傳送資料,所以要設定urlencoded來支援HTML表單:
var bodyParser = require('body-parser');
//設定bodyParser支援application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
//不用在bodyParser處理Query String
extended: false;
}));