Node.js - 封裝類似Express的路由

導讀:

  • 先通過封裝 Express 路由模塊然后導出到主入口文件,主入口文件直接注冊即可調用。
  • 目錄結構如下:


    涉及文件

結果展示:

首頁.png

登錄頁.png

注冊頁.png

新聞頁.png

封裝代碼:

  • express_route.js (路由文件)
const url = require('url')

//封裝方法改變res  綁定res.send()
let changeRes = (res) => {

    res.send = (data) => {

        res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'})

        res.end(data)
    }
}

// 暴露的module
let Server = () => {

    let G = this   // 全局變量

    // 處理 get和post 請求
    this._get = {}
    this._post = {}

    let app = (req, res) => {

        changeRes(res)

        // 獲取路由
        let pathName =  url.parse(req.url).pathname 

        if(!pathName.endsWith('/')) pathName += '/'

        // 獲取請求的的方式
        let method = req.method.toLowerCase()

        // 如果注冊了相應請求的相應方法
        if(G['_' + method][pathName]) {

            // 如果是 post 請求
            if(method === 'post') {

                let postStr = ''

                req.on('data', (chunk) => { 

                    postStr += chunk

                })

                req.on('end', (err, chunk) => {

                    req.body = postStr   // 表示拿到post的值

                    G['_' + method][pathName](req, res)  // 執行方法

                })

            } else {

                G['_' + method][pathName](req, res)  // 執行方法

            }

        } else {

            res.end('no router')
        }

    }

    // 綁定 app.get和app.post 方法
    app.get = (string, callback) => {

        if(!string.endsWith('/')) {
            string = string + '/'
        }
        if(!string.startsWith('/')) {
            string = '/' + string
        }

        G._get[string] = callback

    }

    app.post = (string, callback) => {

        if(!string.endsWith('/')) {
            string = string + '/'
        }
        if(!string.startsWith('/')) {
            string = '/' + string
        }

        G._post[string] = callback

    }

    return app

}

module.exports = Server()

  • express_module.js (入口文件,注冊路由即可調用)
const http = require('http')
const ejs = require('ejs')
const app = require('./express_route.js')


// 只要有請求,就會觸發app里的方法
http.createServer(app).listen(3000)


// 注冊根路由
app.get('/', (req, res) => {

    var msg='這是首頁'

    ejs.renderFile('./index.ejs', { msg: msg }, (err, data) => {

        res.send(data)
    })
})

// 登錄頁面
app.get('/login', (req, res) => {

    console.log('login')

    ejs.renderFile('./form.ejs', {}, (err, data) => {

        res.send(data)
    })
})

// 執行登錄
app.post('/dologin', (req, res) => {

    console.log(req.body)  /*獲取post傳過來的數據*/

    res.send("<script>alert('登錄成功');history.back();</script>")
})

// 注冊頁面
app.get('/register', (req, res) => {

    console.log('register')

    res.send('register')
})

// 新聞頁面
app.get('/news', (req, res) => {

    console.log('register')

    res.send('新聞數據')
})

  • 其余文件
    可能大家也比較好奇其他文件,ejs 主要是后臺模板渲染引擎,渲染HTML頁面用的。

總結:

  • 其實學框架最根本就在掌握其設計原理,如果小伙伴在學習Node.js,不妨嘗試動手封裝一個類似 Express 路由的功能,這對你今后開發對于路由的理解一定會很有幫助的,剩下自行體會!
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容