Koa幫我們做了什麼
阿新 • • 發佈:2018-12-02
整理web渲染思路,與KOA作比較
1.開啟伺服器並監聽埠,註冊監聽事件
// 原生 let http = require('http') const server = http.createServer((req, res) => { // res.setHeader('Content-Type', 'text/html') // res.end('ok') }); server.listen(port)//port為埠 // Koa 將監聽事件request移出構造,設計到中介軟體內 let Koa = require('koa') let app = new Koa () app.listen(port)
2.請求資訊分析url模組
1.路徑url.parse(req.url) 請求路徑的獲取以及請求型別的獲取(這裡被Koa處理幷包裝成一個request物件)
// 原生 const server = http.createServer((req, res) => { let url = url.parse(req.url) let method = req.method }); // Koa 將資訊封裝到request物件上,並可以通過別名簡化訪問 app.use(async ctx => { let url = ctx.url let method = ctx.method })
2.引數接受querystring,以及POST方法引數獲取(監聽res的data事件,在end方法中獲取)(這裡設計成了一個koa-bodyparse中介軟體)
//get // 原生 const server = http.createServer((req, res) => { let url = url.parse(req.url) let query = querystring(url.query) }); // Koa 將資訊封裝到request物件上,並可以通過別名簡化訪問 app.use(async ctx => { let query = ctx.query }) //post // 原生 const server = http.createServer((req, res) => { let content req.on('data', chunk => { content+=chunk }) req.on('end', () => { let query = querystring.parse(content) console.log(query) }) }); // Koa 將過程封裝到中介軟體去 let bodyParser = require('koa-bodyparser') app.use(boodyParser()) app.use(async ctx => { let postQuery = querystring.parse(ctx.request.body); })
3.靜態資源與動態資源(返回頭資訊已經被Koa處理)
靜態資源 設定靜態資源路徑,對靜態資源路徑結合fs模組返回(中介軟體)
// 原生
//通過fs訪問靜態資源,需要手動設定內容型別以及狀態碼
function staticSend(filename, headers={'Content-Type': 'text/html;charset=utf-8'}, statusCode=200) {
res.writeHead(statusCode, http.STATUS_CODES[statusCode], headers);
content = fs.readFileSync(filename);
res.end(content);
}
const server = http.createServer((req, res) => {
let url = url.parse(req.url)
staticSend(`${__dirname}/${url}`)
});
// Koa 通過koa-static-cache中介軟體可以設定靜態資源訪問規則,只需定義訪問路徑即可
const koaStaticCache = require('koa-static-cache')
app.use( koaStaticCache( __dirname + '/static', {
prefix: '/public',
} ) )
動態資源 設定對應路徑的請求返回 路由處理
// 原生
// 根據訪問路徑case然後處理對應路徑返回結果
// Koa
const Router = require('koa-router');
const router = new Router();
router.get('/list', async (ctx, next) => {
ctx.body = await ctx.render('list.html', {
users
});
})
app.use( router.routes() );
Koa核心:這個框架有點思想和webpack類似,編寫檔案->loader/plugins->最終檔案,而Koa就是,請求->中介軟體->返回
它把請求與返回優雅地處理好了,我們只需要關注中間部分邏輯,即中介軟體