2021年1月14日 星期四

重新踏入網頁開發 (6) - Express - 3

 Express - Middleware

    Middleware 是會處理 req, res, next 三個物件並在 routing 時執行之 function,基本上就是 routing 時會處理的 callback function。是 Express 中蠻重要的概念。但用例子來理解比較容易。
    import express from 'express'

    // 建立 express 這 module
    var app = express()
    const port = 8888
    var userName = "Unknown"

    function hello(req, res) {
        res.send("Hello " + userName + "\n")
        res.end()
    }

    // 中間的匿名 function 就是 Middleware
    app.get('/hello/:userName.:userPassword', function (req, res, next){
        userName = req.params.userName
        console.log(userName)
        next()
    },  hello)
    
    app.listen(8888)
    所以 Express 可以用這些 Middleware 來作到流程控制,而非使用傳統的 if else。

 Express - Middleware Using

    Middleware 除了自己塞也可以有 2 種 Express 提供的方式使用。
  • Application-level
        import express from 'express'
    
        // 建立 express 這 module
        var app = express()
        const port = 8888
    
        function reqType (req, res, next){
            console.log('Request Type:', req.method)
            next()
        }
    
        function timer (req, res, next){
            var date = new Date()
            console.log('Time:', date.toString())
            if (req.params.userName == "Admin") {
                next('route') // 只能在 app.Method() 使用,在 use() 裡就會只是普通的 next()
            } else {
                next()
            }
        }
    
        function logger (req, res, next){
            console.log
            (
                'User Date:', '\n',
                'User:', req.params.userName, '\n',
                'Password:', req.params.userPassword, '\n'
            )
            res.end()
        }
    
        function warning(req, res, next) {  
            console.log("Warning: Your village is under attack\n")
            res.end()
        }
    
        // app.use() 在 route 之前,所以會先執行 use 裡的 Middleware function
        // 之後在依照 Request Method 去找相對的 app.Method() 做 Reuest Handle
        app.use('/hello/:userName.:userPassword', reqType)
    
        // 正常來講,若 Request 是 GET 且 URL 符合的話,會依照順序執行 routing function
        // 但 timer 裡有 next('route'),符合條件的話會直接把控制權交給下個 routing function,
        // 忽略它本身後面的 Middleware function,這裡就是 logger。
        app.get('/hello/:userName.:userPassword', timer, logger)
        app.get('/hello/:userName.:userPassword', warning)
        app.listen(8888)
  • Router-level
        使用方法跟 app (express()) 一模一樣,差把 app 改成 router (express.Router())
上一篇 :
下一篇 :
參考資料 :

Related Posts:

  • 重新踏入網頁開發 (6) - Express - 3  Express - Middleware     Middleware 是會處理 req, res, next 三個物件並在 routing 時執行之 function,基本上就是 routing 時會處理的 callback function。是 Express 中蠻重要的概念。但用例子來理解比較容易。 import express from 'express' // 建立 express 這… Read More
  • 重新踏入網頁開發 (6) - Express - 1  Express     Fast, unopinionated, minimalist web framework for Node.js,這是 Express 的自我介紹。這裡的 unopinionated 之於 opinionated 較為信任開發者,所以你可以擁有很多作法去達到相同的目的,例如像 PERL/PHP。而 opinionated 的 software 則會只提供一個方法去達到目的,例如撰寫維基百… Read More
  • 重新踏入網頁開發 (7) - React  React - Introduction     A JavaScript library for building user interfaces. React 在 MVC 分類上屬於 View,也就是主要用來開發前端。比起直接使用 npx create-react-app,我這裡想紀錄一些較簡單且原始的 React Sample Code。 原本既有的程式碼 <!-- Some HT… Read More
  • 重新踏入網頁開發 (6) - Express - 2  Express - Route parameters     Route parameters 可以用來擷取 URL 上的 value。 server.js import express from 'express' // 建立 express 這 module var app = express() const port = 8888 // 回傳 { "… Read More
  • 重新踏入網頁開發 (6) - Express - 4  Express - App v.s. Router     Express 通常都是用 app.Method 來做 request 的 routing。而 Express 4.0 加入的 router 則可視為可以掛載的迷你 app。 import express from 'express' var app = express() var router = express.Router… Read More

0 意見:

張貼留言

Popular Posts