1. 程式人生 > >Koa幫我們做了什麼

Koa幫我們做了什麼

整理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就是,請求->中介軟體->返回
它把請求與返回優雅地處理好了,我們只需要關注中間部分邏輯,即中介軟體