Hi,大家好,今天接續昨天的進度,昨天我們安裝好環竟,並取得了專案骨架了,那今天來把 router 定義完成
使用 express-generator 產出的專案,會自帶 index.js 和 user.js,通常在開發時,會使用自己建立的 router 檔案,因此我們需要先刪除原先產出之router檔案,並建立自己的 router 檔,動作如下
"use strict";
const express = require('express');
const router = express.Router();
module.exports = router;
app.use("/sav", sav)
app.use("/sav/mgr", mgr)
當我們宣告 router 變數後,在使用時,可使用 「app.use("網址", router變數)」進行設定,如同上方之範例,之後專案啟動後,在瀏覽器中輸入 http://localhost:3000/saf/xxx ,會呼叫 saf.js 中之容,若輸入 http://localhost:3000/saf/mgr/XXX 時,則會呼叫 mgr.js 之內容,這樣設計的原因是我要區分出管制區與非管制區,後續可以很簡單的進行管理, 需要身分認證的功能放在 mgr.js 中,不需要驗證的就放在 saf.js 中即可
補充:利用這個機制,可以做出模組化的管理,後續網站變得龐大或是需要多種系統版本時,我們可以透過 router 的切換進行設計,例如說 a單位需要 a、b、c、d 4項功能,b單位只要 a、d 2項功能,那程式移轉到 b單位時,只要不掛載 b、c 的 router 就可以了
"use strict";
const express = require('express');
const router = express.Router();
/**
* 系統主頁
*/
router.get("/", async (req, res, next) => {
res.render("index", {)
})
/**
* 列出已通報之客服紀錄
*/
router.get("/api/listCase", async (req, res, next) => {
let obj = {id: 1, case: "設息1", guid: "XXXXXXXX"}
res.json(obj)
})
module.exports = router;
我們使用 「router.get|post("以/開頭之網址, callback) 進行 router,並將 router 的功能寫在 callback 位置,如上述之程式碼中,第一組 router為「/」,即之後的系統首頁,我在此只是先設定渲染到 index.ejs,第二組為 /api/listCase,預計之後會做為被呼叫之 ajax api,所以先設定一個物件後直接回傳 json 型態
router.get("/", async (req, res, next) => {
res.render("index")
})
上述的程式碼的用途是會打開 /view/index.ejs 做為畫面渲染顯示之用,亦即 router 會在程式執行完畢後,打開 index.ejs,並執行其中之 HTML,node.js 是一個必須有明確終點的程式語言,若是沒有執行到終點,伺服器會不停的等待,直到 timeout 為止,真的有這種狀況時,到時候就會接到使用者的電話了,所以開發時要小心。那 router 的執行終點有哪些呢?共有下列幾項
終點項目 | 說明 |
---|---|
res.render | 指定執行參數中的 ejs,使用者可看到畫面 |
res.json | 回傳 json 內容,且 mime 會自動設定為 application/json,供ajax 之用 |
res.jsonp | 同上,只是回傳的是 jsonp 格式,jsonp是一種可以跨域執行 ajax 的格式,一因為安全性考量,ajax的功能無法跨網站執行,但是若是回傳格式為 jsonp 的話,是允許跨網站的 |
res.send | 回傳文字 |
res.end | 直接結束 |
res.redirect | 重新導向至指定網址 |
今天礙於篇幅,我只先舉簡單的 router 例子,並加以說明,本日重點是 router 的建置方式,可以配合專案需求,設計若干個router,並透過 app.js 進行抽換。
另外在這裡分享我自己在規劃 router 的習慣,我在進行 router 設計時,只會讓 router 做3件事,分別是
1. 接收前端參數
2. 呼叫後端模組功能,並取得回傳值
3. 依照程式需求,進行程式重導、畫面渲染、顯示錯誤訊息等結果
那我們明天見了,明天會把 router 全部宣告完成啦