是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2019-06-30 Nodejs

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

#Node.js #全端勇士之路 Node.js

前言

基本的 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);
})

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

Buy Me A Coffee | Portaly

Terminal

相關文章

全端勇士之路 Node.js-OAuth 2.0 & nodemailer & Gmail

2019-12-28

全端勇士之路 Node.js 基礎學習-會員機制(4)

2019-07-08

全端勇士之路 Node.js 基礎學習-會員機制(3)

2019-07-08

全端勇士之路 Node.js 基礎學習-會員機制(2)

2019-07-07

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme