此系列文章会持续更新。。。
这篇主要讲 koa2 的路由
首先，我们先用 koa2 原生实现一个简单的路由然后再使用 koa-router 中间件深入学习，学路由自然先从 URL 入手，请看下面的例子
const koa = require('koa');
const fs = require('fs');
const app = new koa();
app.use(ctx => {
console.log(ctx.request.url);
});
app.listen(3000);
当我们进入 http://localhost:3000/index 地址时可以发现 Iterm 中打印出了 /index 说明我们可以通过 ctx.request.url 属性拿到 URL 的路径，这样我们就可以利用这个路径找到对应的页面实现路由。
下面实现一个简单的路由，文件目录如下
.
├── index.js
├── package.json
└── view
├── 404.html
├── index.html
└── todo.html
404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>404</title>
</head>
<body>
404.html
</body>
</html>
todo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todo</title>
</head>
<body>
todo.html
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>koa2 demo index page</h1>
<p>this is a index page</p>
<ul>
<li>
<a href="/">/</a>
</li>
<li>
<a href="/index">/index</a>
</li>
<li>
<a href="/todo">/todo</a>
</li>
<li>
<a href="/404">/404</a>
</li>
<li>
<a href="/nofund">/nofund</a>
</li>
</ul>
</body>
</html>
重点是 index.js
const koa = require('koa');
const fs = require('fs');
const app = new koa();
/**
* 用 Promise 封装一个异步读取文件的方法
* @param {String} page html 文件名称
* @returns {Object} Promise 实例对象
*/
function render(page) {
return new Promise((resolve, reject) => {
let viewUrl = `./view/${page}`;
fs.readFile(viewUrl, 'binary', (err, data) => {
if (err) {
reject(err);
} else {
resolve(data);
}
});
});
}
/**
* 根据 URL 获取 HTML 内容
* @param {String} url ctx.request.url
* @returns {String} 获取到的 HTML 内容
*/
async function route(url) {
let view = '404.html';
switch (url) {
case '/':
case '/index':
view = 'index.html';
break;
case '/todo':
view = 'todo.html';
case '/404':
view = '404.html';
default:
break;
}
let html = await render(view);
return html;
}
app.use( async(ctx) => {
const html = await route(ctx.request.url);
ctx.response.body = html;
});
app.listen(3000);
console.log('server is starting at prot 3000!');
执行脚本
node index.js
我们可以看到
route
手写路由很麻烦，所以需要用中间件的形式处理路由，用到了 koa-router
我的学习思路是先用法后原理，所以先学习用法
安装 koa-router
npm i -S koa-router
举一个简单例子：
// app.js
const Koa = require('Koa');
const koaRrouter = require('koa-router');
const app = new Koa();
// 这里可以直接调用函数也可以使用构造函数，const router = new koaRouter();
const router = koaRouter();
router.get(('/', next) => {
ctx.body = 'this this the home page';
});
app
.use(router.routes())
.use(router.allowMethods());
app.listen(3000);
执行 node app.js 打开 http://localhost:3000/ 可以看到
koa-router
这样一个最简单的路由就配置好了~
下面针对上面的例子做一些说明：
- get 方法代表一系列 HTTP 的动词方法，如 get | put | post | patch | delete | del。每一种 HTTP 动词对应一种方法，也可以连缀写：
router
.get('/', (ctx, next) => {
ctx.body = 'Hello World!';
})
.post('/users', (ctx, next) => {...})
.put('/users/:id', (ctx, next) => {...})
.del('/users/:id', (ctx, next) => {...})
.all('/users/:id', (ctx, next) => {...})
注：router.all() 用于表示上述所有的动词方法
- 上面代码中，
router.get()方法的第一个参数是匹配的路径，第二个参数对应的函数方法。
同时介绍一下动态路由
// 同时打开网址：http://localhost:3000/user/111
router.get('/user/:id', (ctx, next) => {
console.log(ctx); // 实际就是 context 对象，但是打印出的结果中并没有看到 params 属性，如果有童鞋知道麻烦指点一二，不胜感激~
console.log(ctx.params); // { id: '111' }
console.log(ctx._matchedRoute); // /user/:id
})
使用 ctx._matchedRoute 可以拿到匹配的原路由地址，如果这个路由被命名了也可以通过 ctx. _matchedRouteName 拿到路由的名称，比如：
// 同时打开网址：http://localhost:3000/user/111
router.get('user', '/user/:id', (ctx, next) => {
console.log(ctx._matchedRouteName); // user
})
下面讲一下 koa-router 的 middleware(中间件)
这是官方给出的实例代码：
router.get(
'/users/:id',
(ctx, next) => {
return User.findOne(ctx.params.id).then(function(user) {
ctx.user = user;
next();
});
},
ctx => {
console.log(ctx.user);
// => { id: 17, name: "Alex" }
}
);
middleware 类似于一个过滤器，在客户端和应用程序之间的一个处理请求和相应的方法，比如上面的实例代码，千万不要纠结这个 User 是个什么鬼👻，这是一段伪代码，User.findOne(ctx.params.id) 可以理解为从数据库中异步的获取到指定 id 的用户信息，然后 .then 获取到这个用户信息赋值给 ctx.user，然后执行 next()方法那么下一个中间件就可以拿到拥有用户信息的 ctx，当然还可以往下传，但是需要注意的是中间件的执行顺序，它很像一个洋葱，但并不是一层一层外下拨，而是先执行各个层中 next 之前的代码，然后再从最后一层往上返执行 next 后面的代码，听着是不是有点晕+_+，有一张图可以比较清晰的看懂中间件的执行顺序：
middleware 的执行顺序
const Koa = require('koa');
const app = new Koa();
app.use((ctx, next) => {
console.log(1);
next(); // next 不写会报错
console.log(5);
});
app.use((ctx, next) => {
console.log(2);
next();
console.log(4);
});
app.use((ctx, next) => {
console.log(3)
ctx.body = 'Hello World';
});
app.listen(3000);
// 打印出1、2、3、4、5，但是好像会打印两遍12345，这个还没有深入了解为啥
上述简单的应用打印出1、2、3、4、5，这个其实就是koa中间件控制的核心，一个洋葱结构，从上往下一层一层进来，再从下往上一层一层回去，乍一看很复杂，为什么不直接一层一层下来就结束呢，就像express/connect一样，我们就只要next就去下一个中间件，干嘛还要回来？
其实这就是为了解决复杂应用中频繁的回调而设计的级联代码，并不直接把控制权完全交给下一个中间件，而是碰到next去下一个中间件，等下面都执行完了，还会执行next以下的内容
解决频繁的回调，这又有什么依据呢？举个简单的例子，假如我们需要知道穿过中间件的时间，我们使用koa可以轻松地写出来，但是使用express呢，可以去看下express reponse-time的源码，它就只能通过监听header被write out的时候然后触发回调函数计算时间，但是koa完全不用写callback，我们只需要在next后面加几行代码就解决了（直接使用.then()都可以）
可能还是会不太理解这么做的好处，我觉得这种思路在实际应用中还会经常用到，后面遇到再结合实际应用场景来细读一下~
未完待续...
网友评论