Routing

http server可能需要控制多個request，此時可以使用if...else...語法來處理。
>> node5_1_routing.js
const http = require('http'); const fs = require('fs'); const path = require('path'); http.createServer(function(req, res){ if(req.url === '/'){ res.write('<h1>World of Warcraft</h1>'); res.end(); } else if(req.url === '/Cities/StormWindCity'){ console.log(req.url); res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); let readstream = fs.createReadStream(path.normalize(__dirname + req.url)+".html", 'utf-8'); readstream.pipe(res); } else if(req.url === '/Cities/IronForgeCity'){ res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); let readstream = fs.createReadStream(path.normalize(__dirname + req.url)+".html", 'utf-8'); readstream.pipe(res); } else if(req.url === '/Cities/Danasus'){ console.log(req.url); res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); let readstream = fs.createReadStream(path.normalize(__dirname + req.url)+".html", 'utf-8'); readstream.pipe(res); } else{ res.writeHead(404,{'Content-Type':'text/html'}); res.end("Page Not Found."); } }).listen(3000, ()=>{ console.log("Server is runing at port 3000."); }); 不過當要處理的request形態越來越多時，程式碼也就越來越複雜了，屆時維護會愈來越困難。此時可以使用Express。
上面的程式碼可以簡化如下，好像也沒那麼複雜= =...不過這裡只是簡單顯示內容，若再加上其他操作還是會變得越來越龐雜。
>> node5_1a_routing.js
const http = require('http'); const fs = require('fs'); const path = require('path'); http.createServer(function(req, res){ if(req.url === '/'){ res.write('<h1>World of Warcraft</h1>'); res.end(); } else { res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); let readstream = fs.createReadStream(path.normalize(__dirname + req.url)+".html", 'utf-8'); readstream.on('error', function(){ res.writeHead(404,{'Content-Type':'text/html'}); res.end("Page Not Found."); }); readstream.pipe(res); } }).listen(3000, ()=>{ console.log("Server is runing at port 3000."); });

Form

---

我們可以自表單得到資訊，介紹常見的get與post。
>> node5_2_get.js
const http = require('http'); http.createServer(function(req, res){ res.writeHead(200, {'content-type':'text/html'}); res.write('<form action="/" enctype="multipart/form-data" method="get"><br>'); res.write('<input type="text" name="name"><br>'); res.write('<input type="text" name="occupation"><br>'); res.write('<input type="submit">'); res.write('</form>'); res.write(req.url); return res.end(); }).listen(3000, ()=>{ console.log("Server is runing at port 3000."); }); 使用get來取得資料，會出現在網址列，這樣的資料較不安全。再看若使用post的情況。
>> node5_2_post.js
const http = require('http'); const qs = require('querystring'); http.createServer(function(req, res){ if(req.url=="/"){ res.writeHead(200, {'content-type':'text/html'}); res.write('<form action="/One" method="post"><br>'); res.write('<input type="text" name="name"><br>'); res.write('<input type="text" name="occupation"><br>'); res.write('<input type="submit">'); res.write('</form>'); res.end(); } if(req.url=="/One"){ let body = ''; req.on('data', function(data){ body += data; }); req.on('end', function(){ var post = qs.parse(body); console.log(post['name'], post['occupation']); res.writeHead(200, {'content-type':'text/html'}); res.write(`<span style="color: blue">${post['name']}</span> <span style="color: red">${post['occupation']}</span> is added.`); res.end(); }); } }).listen(3000, ()=>{ console.log("Server is runing at port 3000."); }); 此處使用querystring module來parse傳來的資料，parse後為一物件。需使用req.on('data',callback)來收集資料，再使用req.on('end',callback)來結束。

Express

---

使用Express需要先下載package，因為會下載一大堆相關package，所以可能先建立一個新的資料夾再下載比較不會搞混。改變路徑到新建立的資料夾，使用以下指令:

• npm init --yes: 產生package.json檔案，包含此專案的資料(注意其中main:index.js，表示主程式要使用index作為名稱)。(也可以使用npm init指令來產生，會要求一項一項輸入相關資訊)
• npm install express --save(或 npm install express): 安裝Express，會建立node_modules資料夾，裡面包含所有相關的package。(也可以使用npm install -g express做全域安裝)

通常會專注於以下幾個routing方法，更多方法請見官網。

• post(path, callback [, callback ...]):增加
• get(path, callback [, callback ...]):取得
• put(path, callback [, callback ...]):更新
• delete(path, callback [, callback ...]):刪除

Get

---

>> index.js
const express = require('express'); const app = express(); app.get('/', function(req, res){ res.send('<h1>World of Warcraft</h1>');// can be called only once, equal to res.write()+res.end() //res.write('<h1>World of Warcraft</h1>'); //res.end(); }); // PORT (environment variable) const port = process.env.PORT || 3000; app.listen(port, ()=>{ console.log(`Listening on port ${port}.......`); // change the single quote mark }); 執行express()產生名為app的物件，使用get方法取得路徑'/'，callback函數內使用res.send()，此為res.write()+res.end()，僅用於express。process.env.PORT是自動取得可取得的PORT號碼。可以看到此方式比之之前的routing似乎容易管理一些。
似乎接下來要加上以下程式碼來回應對應的request。
>>
app.get('/Cities/StormWindCity', function(req, res){ res.send("<h1>暴風城</h1>"); }); 這樣雖然可以，不過當有很多城市時，又要一一列舉，所以可使用以下方式。
>>
app.get('/Cities/:cityname', function(req, res){ res.send(`<h1>${req.params.cityname}</h1>`); }); :cityname是輸入變數，使用req.params.cityname取得變數值，${req.params.cityname}是讓我們可以在字串內顯示變數值，記得要將字串的引號(')或雙引號(")換成(`)才能使用。
若是要讀取檔案再顯示，還是可以使用ReadStream方式。
>>
app.get('/Cities/:cityname', function(req, res){ let readstream = fs.createReadStream(path.normalize(__dirname + req.url)+".html", 'utf-8'); readstream.pipe(res); }); 不過在express內提供另一個函數sendFile可供使用。
>>
app.get('/Cities/:cityname', function(req, res){ res.sendFile(__dirname + "/Cities/" +req.params.cityname+".html"); });
接下來加上以下的code。
>>
var players = [ {id:1, name: 'Helen', occupation:'戰士'}, {id:2, name: 'Tom', occupation:'法師'} ]; app.get('/Players', function(req, res){ res.send(players); }); app.get('/Players/:id', (req, res)=>{ let hasrole = players.find(c => c.id===parseInt(req.params.id)); if(!hasrole){ //404 return res.status(404).send(`The role ${req.params.id} is unavailable`); }else{ let index = req.params.id-1; res.status(200).send(`Hi, 我是<span style="color:blue;">${players[index].name}</span>, \n 我是一個<span style="color:green;">${players[index].occupation}</span>`); } }); 這裡設計一個名為players的array，裡面的物件是player。第一個get('/')方法可以顯示所有的玩家，第二個get('/Players/:id')會根據id顯示個別玩家。

Post

---

使用post取得資料，資料可使用body-parser module來parse，所以先使用npm install body-parse來安裝body-parser，記得要將其request。(const bodyParser = require("body-parser");)
>>
app.use(bodyParser.urlencoded({ extended: true })); app.get('/Players', (req, res)=>{ res.writeHead(200, {'content-type':'text/html'}); res.write('<form action="/Players/" method="post"><br>'); res.write('<input type="text" name="name"><br>'); res.write('<input type="text" name="occupation"><br>'); res.write('<input type="submit">'); res.write('</form>'); res.end(); }); app.post('/Players', function(req, res){ let newRole = { id: players.length+1, name: req.body.name, occupation: req.body.occupation }; console.log(newRole); players.push(newRole); res.send(newRole); }); 使用app.use()來使用bodyParser的功能，並用app.get()來設計一個post表單，action對應app.post()要回應的位置，在app.post的callback內使用req.body來取得參數。