美文网首页
koa2框架学习

koa2框架学习

作者: tracyXia | 来源:发表于2019-06-13 17:18 被阅读0次

    koa是Express的下一代基于Node.js的web框架，目前有1.x和2.0两个版本。

    一、koa2的优势

    1. express

    虽然Express的API很简单，但是它是基于ES5的语法，要实现异步代码，只有一个方法：回调。如果异步嵌套层次过多，代码写起来就非常难看：

    app.get('/test', function (req, res) {
    fs.readFile('/file1', function (err, data) {
        if (err) {
            res.status(500).send('read file1 error');
        }
        fs.readFile('/file2', function (err, data) {
            if (err) {
                res.status(500).send('read file2 error');
            }
            res.type('text/plain');
            res.send(data);
        });
    });
});

    2. koa 1.0

    随着新版Node.js开始支持ES6，Express的团队又基于ES6的generator重新编写了下一代web框架koa。和Express相比，koa 1.0使用generator实现异步，代码看起来像同步的：

    var koa = require('koa');
var app = koa();

app.use('/test', function *() {
    yield doReadFile1();
    var data = yield doReadFile2();
    this.body = data;
});

app.listen(3000);

    3. koa 2.0

    随着ES7引入了新的语法糖async和await，JavaScript未来标准的异步代码是这样的

    async function () {
    var data = await fs.read('/file1');
}

    koa团队并没有止步于koa 1.0，他们非常超前地基于ES7开发了koa2。koa2的代码看上去像这样：

    app.use(async (ctx, next) => {
    await next();
    var data = await doReadFile();
    ctx.response.type = 'text/plain';
    ctx.response.body = data;
});

    二、koa2 的使用

    1.架设Http服务

    // 导入koa，和koa 1.x不同，在koa2中，我们导入的是一个class，因此用大写的Koa表示:
const Koa = require('koa');

// 创建一个Koa对象表示web app本身:
const app = new Koa();

// 对于任何请求，app将调用该异步函数处理请求：
app.use(async (ctx, next) => {
    await next();
    ctx.response.type = 'text/html';
    ctx.response.body = '<h1>Hello, koa2!</h1>';
});

// 在端口3000监听:
app.listen(3000);

    其中，参数ctx是由koa传入的封装了request和response的变量，我们可以通过它访问request和response，next是koa传入的将要处理的下一个异步函数。

    2.koa middleware

    app.use(async (ctx, next) => {
    await next();
    ctx.response.type = 'text/html';
    ctx.response.body = '<h1>Hello, koa2!</h1>';
});

    我们把每个async函数称为middleware，这些middleware可以组合起来，完成很多有用的功能。然后用await next()来调用下一个async函数。如果一个middleware没有调用await next()。后续的middleware将不再执行了

    3.koa-router

    const Koa = require('koa');

// 注意require('koa-router')返回的是函数:
const router = require('koa-router')();

const app = new Koa();

// log request URL:
app.use(async (ctx, next) => {
    console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
    await next();
});

// add url-route:
router.get('/hello/:name', async (ctx, next) => {
    var name = ctx.params.name;
    ctx.response.body = `<h1>Hello, ${name}!</h1>`;
});

router.get('/', async (ctx, next) => {
    ctx.response.body = '<h1>Index</h1>';
});

// add router middleware:
app.use(router.routes());

app.listen(3000);
console.log('app started at port 3000...');

    4. koa-bodyparser

    post请求发送表单或者JSON，它作为request的body发送，但无论是Node.js提供的原始request对象，还是koa提供的request对象，都不提供解析request的body的功能！

    所以，我们又需要引入另一个middleware来解析原始request请求，然后，把解析后的参数，绑定到ctx.request.body中。

    koa-bodyparser就是用来干这个活的。
    首先引入koa-bodyparser：

    const bodyParser = require('koa-bodyparser');

    在合适的位置引用该中间件：

    app.use(bodyParser());

    由于middleware的顺序很重要，这个koa-bodyparser必须在router之前被注册到app对象上。

    const Koa = require('koa');
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');
const app = new Koa();

app.use(async (ctx, next) => {
    console.log(`${ctx.request.method} ${ctx.request.url}`); // 打印URL
    await next(); // 调用下一个middleware
});

app.use(async (ctx, next) => {
    const start = new Date().getTime(); // 当前时间
    await next(); // 调用下一个middleware
    const ms = new Date().getTime() - start; // 耗费时间
    console.log(`Time: ${ms}ms`); // 打印耗费时间
});

app.use(async (ctx,next)=>{
    await next();
    console.log('先走');
});


router.get('/hello/:name',async (ctx,next)=>{
    var name = ctx.params.name;
    ctx.response.body = `<h1>Hello,${name}!</h1>`
});

router.get('/', async (ctx, next) => {
    ctx.response.body = `<h1>Index</h1>
          <form action="/signin" method="post">
               <p>Name:<input name="name" value="koa"></p>
               <p>Password:<input name="password" type="password"></p>
               <p><input type="submit" value="submit"></p>
          </form>`;
});

router.post('/signin', async (ctx, next) => {
    var
        name = ctx.request.body.name || '',
        password = ctx.request.body.password || '';
    console.log(`signin with name: ${name}, password: ${password}`);
    if (name === 'koa' && password === '12345') {
        ctx.response.body = `<h1>Welcome, ${name}!</h1>`;
    } else {
        ctx.response.body = `<h1>Login failed!</h1>
        <p><a href="/">Try again</a></p>`;
    }
});

app.use(bodyParser());
app.use(router.routes());
app.listen(3000);
console.log('app started at port 3000...');

    5.koa-static

    如果网站提供静态资源（图片、字体、样式表、脚本…），为它们一个个写路由就很麻烦，也没必要。koa-static模块封装了这部分的请求。

    const Koa = require('koa');

const KoaStatic = require('koa-static');

const path = require('path');

const app = new Koa();

app.use(KoaStatic(path.join(__dirname + './../dist')));

console.log(path.join(__dirname + './../dist'));

app.listen(8001);

console.log('app started at port 8001...');

    三、koa + react16实现服务端渲染的案例

    在app.js文件中搭建HTTP服务

    const Koa = require('koa');
const KoaStatic = require('koa-static');
const path = require('path');
const bodyParser = require('koa-bodyparser');
const router = require('./router');
const app = new Koa();
app.use(bodyParser()); //post请求实例化ctx获取body
app.use(KoaStatic(path.join(__dirname+'./../dist')));

//监听服务器异常日志
app.on('error',(err)=>{
   console.log(`服务器异常:${err}`);
})

app.use(router.routes());
app.listen(8001);
console.log('app started at port 8001...');

    router.js为路由管理文件

    const Router = require('koa-router');
const router_dynamic = new Router();
router_dynamic.get('/', async (ctx, next) => {
    console.log('匹配到页面' + ctx.params.pagename);
    let document = await renderServerDynamic(ctx, next);
    ctx.response.body = document;
});

router_dynamic.get('/:pagepath', async (ctx, next) => {
    console.log('匹配到页面路由' + ctx.params.pagepath);
    let document = await renderServerDynamic(ctx, next);
    ctx.response.body = document;
});

router_dynamic.get('/:pagepath/:brand/:series/:cid', async (ctx, next) => {
    console.log('匹配到页面路由' + ctx.params.pagepath + '/' + ctx.params.cid);
    let document = await renderServerDynamic(ctx, next);
    ctx.response.body = document;
});

forums.use('/hmbird/:pagename', router_static.routes(), router_static.allowedMethods());
forums.use('/hmbird_router/:pagename', router_dynamic.routes(), router_dynamic.allowedMethods());
module.exports = forums;

    其中renderServerDynamic方法为使用路由情况下的服务端解析

    import { pageComponent as PageComponent } from './pageInit'; //初始化ssr页面入口文件导入配置
const renderServerDynamic = async (ctx, next) => {
    const context = {};
    var pagename = ctx.params.pagename;
    let App = PageComponent[pagename];
    let Html = '';
    let Htmlstream = '';
    let locationUrl = ctx.request.url.split(pagename)[1];
    try {
        Htmlstream = ReactDOMServer.renderToNodeStream(
            <StaticRouter location={locationUrl || '/'} context={context}>
                <App />
            </StaticRouter>
        );
    } catch (error) {
        console.log('服务端渲染异常，降级使用客户端渲染！');
    }
    if (context.url) {
        ctx.response.writeHead(301, {
            Location: context.url
        });
        ctx.response.end();
    } else {
        // 加载 index.html 的内容
        let data = await render(pagename);
        try {
            Html = await getStream(Htmlstream);
        } catch (error) {
            console.log('流转化字符串异常，降级使用客户端渲染！');
        }
        // 把渲染后的 React HTML 插入到 div 中
        let document = data.replace(/<div id="app"><\/div>/, `<div id="app">${Html}</div>`);
        // 把响应传回给客户端
        //let document = await RenderServer.renderServerDynamic(pagename,App)
        return document;
    }
};

    该方法中的 PageComponent[pagename]，其实就是服务端dist目录下对应项目的入口文件

    const pageInit = ()=>{
    return new Promise((resolve,reject)=>{
        try {
            //console.log("初始化导入项目"+targetDistPath)
            fs.readdir(targetDistPath,function(err,files){
                if(err){
                    reject(err);  
                }else{
                    for (const cateName of files) {
                        console.log(`初始化导入${cateName}`);
                        if (cateName != "index.html"&&cateName!=".DS_Store"&&ssrPageFilter.indexOf(cateName)=="-1"){
                            var component= require(targetDistPath+"/"+cateName+"/"+cateName+".js");
                           pageComponent[cateName] = component;
                           console.log(`import导入模块${cateName}`);
                        }else{
                            console.log("过滤页面---"+cateName);
                        }
                    }
                    console.log('end...'); 
                    resolve(pageComponent);
                }
            }) 
        } catch (error) {
            reject(error);
        }
        
    })
};
const getPageComponent = async()=>{
    pageComponent = await pageInit();
    console.log(`初始化服务端dist目录下所有的入口文件`);
    return pageComponent;
}
getPageComponent()
module.exports = {
    pageComponent,
    getPageComponent
};

    render方法为读取服务端dist目录下对应项目的模版文件。

    const render = pagename => {
    return new Promise((resolve, reject) => {
        let viewUrl = `./dist/${pagename}/${pagename}.html`;
        fs.readFile(viewUrl, 'utf8', (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        });
    });
};

    最后，回顾一下服务端渲染的思想简化为：
    1.未使用router时，获取项目的入口文件并通过ReactDOMServer.renderToNodeStream方法转换为流，替换模版里的内容，传给客户端

    const renderServerStatic = async(pagename,App)=>{
    let Htmlstream = '';
    let Html = '';
    try {
        Htmlstream = ReactDOMServer.renderToNodeStream(<App/>);
    } catch (error) {
        console.log(`${pagename}服务端渲染异常，降级使用客户端渲染！`);
    }
    // 加载 index.html 的内容
    let data = await render( pagename );
    try {
        Html = await getStream(Htmlstream);
    } catch (error) {
        console.log(`${pagename}------流转化字符串异常!`);
    }
    // 把渲染后的 React HTML 插入到 div 中
    let document = data.replace(/<div id="app"><\/div>/, `<div id="app">${Html}</div>`);
    return document;
    // 把响应传回给客户端
    
}

    2.配合router使用时，获取项目的入口文件并包裹在StaticRouter内通过ReactDOMServer.renderToNodeStream方法转换为流，替换模版里的内容，传给客户端

    相关文章

      网友评论

          本文标题：koa2框架学习

          本文链接：https://www.haomeiwen.com/subject/dyasfctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|koa2框架学习|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！