koa2框架学习
2019-06-13 本文已影响0人
tracyXia
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方法转换为流，替换模版里的内容，传给客户端
