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

前言

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

網址

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

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

我稍微減少一些東西

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，這邊我稍微調整一下程式碼並沿用上一篇的範例

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 呢?一樣也是這樣做

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 底下可能有其他頁面、功能，例如新增使用者，那該怎麼寫?一樣寫法

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);
})

網址參數

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

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

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，假設我們會進入一個使用者的頁面，所以就可以這樣做

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')，所以這邊順便記錄一下

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);
})