iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0

Hi,大家好,今天接續昨天的進度,昨天我們安裝好環竟,並取得了專案骨架了,那今天來把 router 定義完成

建立自己的 router

使用 express-generator 產出的專案,會自帶 index.js 和 user.js,通常在開發時,會使用自己建立的 router 檔案,因此我們需要先刪除原先產出之router檔案,並建立自己的 router 檔,動作如下

刪除預設之 router

  1. 開啟app.js,刪除掉下圖紅線的部份

    說明:上半部份router的宣告,下半部分是指定 router 的作用網址
  2. 將 routes 既存的 index.js 和 user.js 刪除,並新增 saf.js 和 mgr.js,均先輸入下方之內容
"use strict";

const  express = require('express');
const router = express.Router();

module.exports = router;
  1. 回到 app.js,新增紅框之部份程式碼
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 就可以了

製作自己的 router

  1. 打開 saf.js,加入自己的 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 的終點

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 全部宣告完成啦


上一篇
開始寫程式了,node.js 的express 框架
下一篇
完成公開區域的router檔案
系列文
以vue.js + node.js 搭建一個客服填單系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言