導(dǎo)讀:
- 先通過封裝 Express 路由模塊然后導(dǎo)出到主入口文件靠胜,主入口文件直接注冊(cè)即可調(diào)用假褪。
-
目錄結(jié)構(gòu)如下:
涉及文件
結(jié)果展示:
首頁(yè).png
登錄頁(yè).png
注冊(cè)頁(yè).png
新聞頁(yè).png
封裝代碼:
- express_route.js (路由文件):
const url = require('url')
//封裝方法改變r(jià)es 綁定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 請(qǐng)求
this._get = {}
this._post = {}
let app = (req, res) => {
changeRes(res)
// 獲取路由
let pathName = url.parse(req.url).pathname
if(!pathName.endsWith('/')) pathName += '/'
// 獲取請(qǐng)求的的方式
let method = req.method.toLowerCase()
// 如果注冊(cè)了相應(yīng)請(qǐng)求的相應(yīng)方法
if(G['_' + method][pathName]) {
// 如果是 post 請(qǐng)求
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 (入口文件呻右,注冊(cè)路由即可調(diào)用):
const http = require('http')
const ejs = require('ejs')
const app = require('./express_route.js')
// 只要有請(qǐng)求傲隶,就會(huì)觸發(fā)app里的方法
http.createServer(app).listen(3000)
// 注冊(cè)根路由
app.get('/', (req, res) => {
var msg='這是首頁(yè)'
ejs.renderFile('./index.ejs', { msg: msg }, (err, data) => {
res.send(data)
})
})
// 登錄頁(yè)面
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傳過來(lái)的數(shù)據(jù)*/
res.send("<script>alert('登錄成功');history.back();</script>")
})
// 注冊(cè)頁(yè)面
app.get('/register', (req, res) => {
console.log('register')
res.send('register')
})
// 新聞頁(yè)面
app.get('/news', (req, res) => {
console.log('register')
res.send('新聞數(shù)據(jù)')
})
-
其余文件:
可能大家也比較好奇其他文件英上,ejs 主要是后臺(tái)模板渲染引擎祟峦,渲染HTML頁(yè)面用的罚斗。
總結(jié):
- 其實(shí)學(xué)框架最根本就在掌握其設(shè)計(jì)原理,如果小伙伴在學(xué)習(xí)Node.js宅楞,不妨嘗試動(dòng)手封裝一個(gè)類似 Express 路由的功能针姿,這對(duì)你今后開發(fā)對(duì)于路由的理解一定會(huì)很有幫助的,剩下自行體會(huì)厌衙!