導讀:
- 先通過封裝 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 路由的功能,這對你今后開發對于路由的理解一定會很有幫助的,剩下自行體會!