全端勇士之路 Node.js 基礎學習-Express Route 篇

前言

基本的 Express 已經大致上了解,但是這邊要特別拉出 Route 來做一下紀錄,這邊的觀念對於後續的開發都有相當大的關聯

網址

首先在講 Route 之前,必須要先了解網址的相關規則,舉例 Google 搜尋頁面網址來講,當我在 Google 搜尋 Wiki 的時候,網址列會像這樣子

1
https://www.google.com/search?source=hp&ei=7UwYXdmPAoK5mAW4gIKADg&q=wiki&oq=wiki&gs_l=psy-ab.3..0l10.1081.2180..2428...2.0..0.124.429.4j1......0....1..gws-wiz.....10..35i39j0i131.piEocmCnIKQ

我稍微減少一些東西

1
https://www.google.com/search?q=wiki
  • https: 傳輸協定,通常兩種傳輸協定,各自所走的 Port 也不相同
    • HTTP: Port 80
    • HTTPS: Port 443,代表著安全傳輸協定,又稱 SSL
  • www: 子網域,主要掛在主要網域下,可以依照提供的服務做調整(例如: mail.google.com、drive.google.com 等)
  • google.com: 網域,主要的網域,可以透過網域供應商購買(例如: 台灣網域註冊管理中心、台灣中文網域)
  • search: route,前面有稍微介紹
  • ?q=wiki: Parameter (網址參數)

Node.js Route

大致上了解之後就可以回來 Node.js 來試著設計 route,這邊我稍微調整一下程式碼並沿用上一篇的範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var express = require('express');
var router = express();
var port = 8080;

router.get('/', function(req, res) {
// req → request
// res → response
res.send('HelloWorld');
})

router.get('/admin', function(req, res) {
// req → request
// res → response
res.send('Hello Admin!');
})

router.listen(port, function() {
console.log('已開啟 port: ' + port);
})

首先我們剛剛已經知道如何建立一個 admin 頁面的 router,那如果要再建立一個 user 呢?一樣也是這樣做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var express = require('express');
var router = express();
var port = 8080;

router.get('/', function(req, res) {
// req → request
// res → response
res.send('HelloWorld');
})

router.get('/admin', function(req, res) {
// req → request
// res → response
res.send('Hello Admin!');
})

router.get('/user', function(req, res) {
// req → request
// res → response
res.send('Hello User!');
})

router.listen(port, function() {
console.log('已開啟 port: ' + port);
})

但是如果我們假設 user 底下可能有其他頁面、功能,例如新增使用者,那該怎麼寫?一樣寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var express = require('express');
var router = express();
var port = 8080;

router.get('/', function(req, res) {
// req → request
// res → response
res.send('HelloWorld');
})

router.get('/admin', function(req, res) {
// req → request
// res → response
res.send('Hello Admin!');
})

router.get('/user', function(req, res) {
// req → request
// res → response
res.send('Hello User!');
})

router.get('/user/create', function(req, res) {
// req → request
// res → response
res.send('Hello Create User!');
})

router.listen(port, function() {
console.log('已開啟 port: ' + port);
})

Create User

網址參數

接下來一定是網址參數的部分,我們在新增資料的時候一定會有一個 ?XXX=XXX,就像這樣子 http://localhost:8080/user/create?name="Ray",那在 Express 它該如何取的這些參數?

這邊將會使用到一個方法,叫做 query

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var express = require('express');
var router = express();
var port = 8080;

router.get('/user/create', function(req, res) {
var name = req.query.name; // 取得使用者傳送的參數
// req → request
// res → response
res.send('Hello Create UserNmae:' + name);// 然後打印出來
})

router.listen(port, function() {
console.log('已開啟 port: ' + port);
})

這樣就可以將使用者傳送給 Node.js 的參數給輸出到網頁畫面上哩

參數給輸出到網頁

取得路徑

這邊另外講一個東西,我們也可以透過 Express 來取得網址的路徑,這邊會使用的是 params,假設我們會進入一個使用者的頁面,所以就可以這樣做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var express = require('express');
var router = express();
var port = 8080;

router.get('/user/:name', function(req, res) { // 透過分號 :name,可以自訂
var name = req.params.name; // 取得路徑
// req → request
// res → response
res.send('你現在查看的路徑是:' + name);// 然後打印出來
})

router.listen(port, function() {
console.log('已開啟 port: ' + port);
})

網址路徑取得

但是有可能有時候 Express 會推薦你使用 req.param('name'),所以這邊順便記錄一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var express = require('express');
var router = express();
var port = 8080;

router.get('/user/:name', function(req, res) { // 透過分號 :name,可以自訂
var name = req.param('name'); // 取得路徑
// req → request
// res → response
res.send('你現在查看的路徑是:' + name);// 然後打印出來
})

router.listen(port, function() {
console.log('已開啟 port: ' + port);
})
0%