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

導讀:

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


    涉及文件

結果展示:

首頁.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)  // 執(zhí)行方法

                })

            } else {

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

            }

        } 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 (入口文件,注冊路由即可調(diào)用)
const http = require('http')
const ejs = require('ejs')
const app = require('./express_route.js')


// 只要有請求,就會觸發(fā)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)
    })
})

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

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

    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('新聞數(shù)據(jù)')
})

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

總結:

  • 其實學框架最根本就在掌握其設計原理,如果小伙伴在學習Node.js,不妨嘗試動手封裝一個類似 Express 路由的功能,這對你今后開發(fā)對于路由的理解一定會很有幫助的,剩下自行體會!
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 引用:https://github.com/WangZhechao/expross 1.簡介 這篇文章是分析exp...
    宮若石閱讀 3,244評論 1 8
  • 1. 簡介 這篇文章主要的目的是分析理解express的源碼,網(wǎng)絡上關于源碼的分析已經(jīng)數(shù)不勝數(shù),這篇文章準備另辟蹊...
    沒事造輪子閱讀 1,475評論 0 8
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,789評論 0 3
  • Express是Node社區(qū)里的超級明星,他的作者TJ Holowaychuk也因此成為了社區(qū)里大紅大紫的開發(fā)者。...
    2MuchT閱讀 3,125評論 1 30
  • 搭建開發(fā)環(huán)境并模擬交互數(shù)據(jù) 一、實驗說明 下述介紹為實驗樓默認環(huán)境,如果您使用的是定制環(huán)境,請修改成您自己的環(huán)境介...
    玄月府的小妖在debug閱讀 2,229評論 0 15

友情鏈接更多精彩內(nèi)容