首先要安裝。參考過前一篇 Node.js 學習資源 之後應該就會有 NPM 這個工具了。安裝 express 的方式很簡單就是以下指令
npm install -g express安裝完之後可以查詢目前 express 的版本，用如下的指令
express -V讀者將會在 Terminal 看到
3.0.0rc2目前的版本是 3.0 和 2.0 有比較大的差別。之後文章有用到會提一下差別之處。
來寫個簡單的 GET 和 POST 把
首先是 GET
var express = require("express");// in expressServer.js
var app = express();
app.get('/', function(req, res) {
res.send("Hello Express Server");
res.end();
});
app.listen(8800);
之後用 node expressServer.js 然後在 Browser 輸入
http://127.0.0.1:8800/就會看到
Hello Express Server我們來分析一下這個程式，一開始我們需要 express 所以有 require 這個很合理，然後 express() 取得一個 Server 的實體，給 app 這個變數。接下來是重點，
app.get('/', function(req, res) {app.get("/", "nameOfFunction"); 這個 function 就是用來處理 GET method 發生的事情，第一個參數是 "/" 也就是說，當 client 存取這個路徑的時候，會用第二個參數，某個 function 來處理。寫到這理 express 很簡單的就處理兩件事了，
res.send("Hello Express Server");
res.end();
});
- GET
- 路徑
http://127.0.0.1:8800/index才會有結果，對 Server 來說才是一個可以處理的路徑。
接著我們來看一下第二個參數 function 做了什麼事情？
function(req, res) {這個 function 有兩個參數，一個叫 req，一個叫 res 其實就是 request 和 response 的縮寫，client 給 server 的代理用 req ，相對的 server 給 client 的就用 res 這個變數，在這裡我們很簡單地用
res.send("Hello Express Server");
res.end();
}
res.send("Hello Express Server");也就是 server 要傳給 client 一個字串，其實也可以加上HTML Tag 比如改成
res.send("<h1>Hello Express Server</h1>");就會在 Browser 看到具有 Tag 效果的字串，如下圖
res.end();這個很重要，因為 client 會一直等待 server 的回應結束才會認為此次 request 結束了，如果不寫讀者將會看到 browser 一直在等待資料的樣子。
對我們對 GET 的了解，Browser 可以傳一些資料透過 GET 給 Server 就直接加在 link 後面比如說。
http://127.0.0.1:8800/send?name=michael&age=30這樣一來怎麼從 express 把 name 和 age 這兩個 key 的值讀取出來？筆者來寫一段 server 端的對應程式。如下
app.get('/send', function(req, res) {一開始新增一個路徑為 /send 然後在處理 request 和 response 的 function 裡加上一個很重要的 property 為。
var message = "<h1>Welcome to Express Server</h1>";
var name = req.query.name;
var age = req.query.age;
if (name) {
message = message +"<p> Hello "+name+"</p>";
}
if (age) {
message = message +"<p> You are "+age+" years old.</p>";
}
res.send(message);
res.end();
});
req.query在這個例子是把由 req.query.name 把 name 的值取出來還有 req.query.age 把 age 的值取出來。然後再用 req.send 把相對應的處理傳給 client。中間有兩個 if 來檢查 client 是不是真的有傳值到 server。這樣就是可處理各式的 GET Request 了。
再來是 POST
HTTP POST Method 最簡單的方式是用 HTML form 來和 server 溝通。可以參考以下程式碼。<form action="http://localhost:8800/formData" method="post">對於 form 來說要透過 POST 要傳資料給 server，要設定 method="post"，對於文字資料而言，傳給 server 的方法是在form 裡的 input 中，value，和 name 這兩個 attribute 的值，所以上面這個 from 要傳給 server 的資料就是，左邊是 key 右邊是 value
<input value="Username" name="username"/>
<input type="password" value="Password" name="password"/>
<input type="submit" value="login"/>
</form>
username : Username相對於 GET 的寫法就是
password : Password
http://localhost:8800/formData?username=Username&password=Password
只是 POST 要透過 from 來傳送給 server。
有了這個 POST Client 端的 HTML 那 server 要寫什麼程式對應呢？如下
app.post('/formData', function(req, res) {// 注意這個是錯誤的寫法
res.send("<h1>Hello "+ req.query.username+"</h1>");
res.end();
});
你會發現在按下 form 的 submit 之後，會在Browser 看到
app.use(express.bodyParser());
app.post('/formData', function(req, res) {
res.send("<h1>Hello "+ req.body.username+"</h1>");
res.end();
});
首先要用 bodyParser() 讓 express 可以來解析 post 傳來的資料，再來就是在處理 request 和 response 的 function 裡用 req.body 這個例子是用
req.body.username簡單想就是把 GET 用的 query 改成 body 就是了。也可以直接存取 key。再用 browser 執行一次 html 的 form 按下 submit 就會看到如下
Render HTML - Jade
最後一個部分要介紹的就是用 Express 和 Jade 來方便產生 HTML 格式給使用者看。介紹一下 Jade 這個好用的工具。首先來安裝
npm install -g jade馬上來看一個例子。如果筆者想要有一個這樣的 HTML 畫面。
<html>不過，<title> 和 <h1>裡面的文字是依照不同的使用者和不同情況下去改寫的。上的 HTML 可以用 Jade 改寫成
<head>
<title>Jade Demo</title>
</head>
<body>
<h1>Hello Michael</h1>
</body>
</html>
html// 檔名為 hello.jade
head
title #{title}
body
h1 Hello #{username}
我用粗體字標示下來的是會被換成 HTML 的 Tag 的部分，而 #{} 這樣的格式是指執行的時候會由 express 指定值的設定。先把 hello.jade 放到 expressServer.js 同一個目錄底下的 views (如果沒有就新建一個)。然後新增下面的程式碼到 expressServer.js
app.set('view engine', 'jade');我們一一來看解說一下。
app.set('views', __dirname+"/views" );
app.get('/hello', function(req, res) {
res.render("hello", {title:"Jade Demo", username:"Michael"});
res.end();
});
app.set('view engine', 'jade');指得是要用 jade 當成 view 的 engine 也就是要把 jade 格式來表示 html，還有其他的比如
ejs 詳情可以參考
express 官網app.set('views', __dirname+"/views" );這個設定是說 server 要去那找 jade 檔案？這邊的設定是 __dirname (注意是兩個下底線) 目前的目錄，再加上 "/views" 也就是底下的 views 資料夾裡。
然後在 app.get 這個我們熟悉的 function 裡用
res.render("hello", {title:"Jade Demo", username:"Michael"});來把 hello.jade (第一個參數) 檔轉成 html然後把
{title:"Jade Demo", username:"Michael"}送給 hello.jade ，也就是把 #{title} 換成 Jade Demo，#{username} 換成 Michael. 這樣一來就完成了，執行 node expressServer.js
然後在 browser 輸入
http://127.0.0.1:8800/hello就會看到
<html>也許可能會有讀者問，怎麼在 jade 檔中引入寫好的 css 或是 javascript ？可能會有讀者想要加入一些 framework 如 twitter bootstrap 之類的。請先準備好一個 css 和 一個 javascript 檔。
<head>
<title>Jade Demo</title>
</head>
<body>
<h1>Hello Michael</h1>
</body>
</html>
hello.css
h1 {
background-color: yellow;
}
hello.js
function sayHello(){然後這個 project 的目錄是這樣結構的，
alert("Hello User");
}
回到 hello.jade 要新增如下
html由 link 和 script 來導入 hello.css 和 hello.js。最後要在 expressServer.js 新增一個 static 的路徑設定。
head
title #{title}
link(rel='stylesheet', href='/style/hello.css')
script(type="text/javascript", src="/js/hello.js")
body
h1 Hello #{username}
#content(onclick="sayHello();") click
app.use(express.static(__dirname + '/public'));這個是和系統說 expressServer.js 這個目錄底下的 public 是 browser 也看得懂的靜態路徑。這樣一來就行了。說明一下靜態路徑的特色是可以從 browser 輸入路徑找到這個目錄底下的東西。比如
http://127.0.0.1:8800/style/hello.css這樣 browser 可以看到我們的 css
h1 {在這個 Project 底下雖然 views 也是個目錄，但是無法從 browser 看到其內容物。完成之後在 browser 試試 css 和 javascript 有沒有作用
background-color: yellow;
}
Jade 還有很多好玩的功能，書本上只要有提到 express 的都會介紹，包含 Node.js 學習資源
提到的兩本書都有。本文章的範例筆者上傳到 GitHub 了。希望有幫助到想學 Node.js 的朋友，咱們下次見。
你好
回覆刪除我照著你的方法做
但是在post的那一段
req.body 為 undefined
請問是我哪裡做錯了嗎？
可否幫我看一下呢？
https://github.com/WhiteFur/express_practice
感謝您
app.use(express.bodyParser()) 停用了
刪除改成這樣
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({
extended: false
}))
app.get('/formData', function (req, res) {
res.sendfile('你的html')
})
感謝回復
刪除