理解koa-router 路由一般使用

阅读目录

一：理解koa-router一般的路由
二：理解koa-router命名路由
三：理解koa-router多个中间件使用
四：理解koa-router嵌套路由
五：分割路由文件

回到顶部

一：理解koa-router一般的路由

koa-router是koa的路由库，什么是路由库呢？比如当我们访问 http://localhost:3001/ 的时候，浏览器就会显示index页面的内容(一般默认是index)。如果当用户访问 http://localhost:3001/home 的时候，浏览器就会显示home页面的内容。

假如要实现上述功能，如果我们不使用 koa-router 或者其他路由中间件的话，我们一般需要在app.js如下代码编写：

const Koa = require('koa');
const app = new Koa();const route = (ctx, next) => {console.log(ctx.path);switch (ctx.path) {case '/':ctx.body = '<h1>欢迎光临index page 页面</h1>';break;case '/home':ctx.body = '<h1>欢迎光临home页面</h1>';break;default:// 404页面return;}
}app.use(route);app.listen(3001, () => {console.log('3001 server start....');
});

然后我们在node命令行中执行 node app.js 的时候就启动服务器。

当我们访问 http://localhost:3001/ 的时候，页面显示index page 信息，如下图所示：

当我们访问 http://localhost:3001/home 的时候，就显示欢迎光临home页面的信息。如下图所示：

这种方式不是很好，当我们项目变得很大的时候，我们需要编写很多 switch-case 这样的语句，代码变得更加耦合，并且当我需要对某个路由要加一个中间件过滤下的时候，这种方式并不好处理。并且当项目非常大的时候，我们不想把所有的路由编写的一个app.js 页面的时候，我们需要写到routes文件夹下多个js里面去，也就是说对路由进行分层级的时候，这样做的目的就是想让以后项目路由管理更加方便。那么目前的app.js中的switch-case 这种方式不支持了，因此我们这个时候就需要koa-router这样的中间件来做这件事情了哦。

因此我们现在需要安装 koa-router 模块了。命令如下：

npm install --save koa-router

通过 npm install supervisor --save-dev 安装supervisor模块, 用于node热启动.

package.json 代码如下：

{"name": "routers","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "supervisor app.js"},"author": "","license": "ISC","devDependencies": {"koa": "^2.7.0","koa-router": "^7.4.0","supervisor": "^0.12.0"}
}

然后我们把app.js 代码改成如下了：

const Koa = require('koa');
const app = new Koa();const router = require('koa-router')();// 添加路由
router.get('/', ctx => {ctx.body = '<h1>欢迎光临index page 页面</h1>';
});router.get('/home', ctx => {ctx.body = '<h1>欢迎光临home页面</h1>';
});router.get('/404', ctx => {ctx.body = '<h1>404...</h1>'
});// 加载路由中间件
app.use(router.routes());app.listen(3001, () => {  console.log('server is running at http://localhost:3001');
});

同样在node命令行中运行命令 node app.js, 然后在浏览器下访问 http://localhost:3001/ 或 http://localhost:3001/home 或 http://localhost:3001/404 的时候就会加载到对应路由的页面了。

如上是koa-router 中get方法请求，koa-router也支持处理其他的请求方法，如下：

router.post('/users', ctx => {// ....
})
.put('/user/:id', ctx => {// ....
})
.del('/user/:id', ctx => {// ....
})
.all('/user/:id', ctx => {// ....
});

如上demo实列中，我们可以看到有一个all方法，该方法通常用于匹配一组路由或者全部路由可以做一些统一的设置操作。

const Koa = require('koa');
const app = new Koa();const router = require('koa-router')();// 添加路由
router.get('/', (ctx, next) => {ctx.body = '<h1>欢迎光临index page 页面</h1>';next();
});router.get('/home', ctx => {ctx.body = '<h1>欢迎光临home页面</h1>';
});router.get('/404', ctx => {ctx.body = '<h1>404...</h1>'
});// all 方法
router.all('/', (ctx, next) => {console.log('match "all" method');next();
});
// 加载路由中间件
app.use(router.routes());app.listen(3001, () => {  console.log('server is running at http://localhost:3001');
});

如上代码，当我们运行 http://localhost:3001/ 刷新的时候，可以看到在node命令行中也会打印 all方法的信息，但是要打印该信息的时候，有一个前提就是上一个中间件必须 next() 执行下，才会执行到下一个中间件上来，否则的话，all方法内部的代码也不会执行的。

回到顶部

二：理解koa-router命名路由

如下代码来简单的理解koa-router命名路由了。当我们在浏览器访问 http://localhost:3001/users/2 的时候，会打印 ctx.params = {'id': 2}；并且会显示 'hello world';

const Koa = require('koa');
const app = new Koa();const router = require('koa-router')();// 添加命名路由
router.get('user', '/users/:id', (ctx, next) => {// 当我们在浏览器访问 http://localhost:3001/users/2 的时候，会打印 ctx.params = {'id': 2}console.log(ctx.params); // { id: '2' }ctx.body = 'hello world';
});// 加载路由中间件
app.use(router.routes());app.listen(3001, () => {  console.log('server is running at http://localhost:3001');
});

回到顶部

三：理解koa-router多个中间件使用

koa-router支持路由多个中间件的处理，通过这个特性，我们能够为一个路由添加中间件进行做一些操作的事情。比如如下代码：

const Koa = require('koa');
const app = new Koa();const router = require('koa-router')();// 添加命名路由
router.get('user', '/users/:id', (ctx, next) => {ctx.body = 'hello world';// 比如一个异步的操作，执行一些处理setTimeout(() => {ctx.user = {'id': 11};next(); // 把执行权转交给下一个中间件}, 100);
}, (ctx, next) => {// 在该中间件可以对数据进行一些操作等事情，console.log(ctx.user); // 会打印 {'id': 11}
});// 加载路由中间件
app.use(router.routes());app.listen(3001, () => {  console.log('server is running at http://localhost:3001');
});

当我们在浏览器运行 http://localhost:3001/users/1 的时候，会显示 'hello world'文案，并且在node命令行中会打印 {'id': 11}。

回到顶部

四：理解koa-router嵌套路由

我们可以在我们项目中定义很多路由，然后把这些路由组装起来。最后我们访问这些路由的时候，都可以支持。什么意思呢？
我们来简单的做个demo。如下代码：

const Koa = require('koa');
const app = new Koa();// 初始化 router1
const router1 = require('koa-router')();// 初始化 router2
const router2 = require('koa-router')();// 使用router1做一些事情
router1.get('/', (ctx, next) => {ctx.body = 'router1';next();
});
router1.get('/:id', (ctx, next) => {console.log(22222222);console.log(ctx.params);next();
});// 使用router2嵌套router1
router2.use('/user/:id/xxx', router1.routes(), router1.allowedMethods());// 加载路由中间件
app.use(router2.routes());app.listen(3001, () => {  console.log('server is running at http://localhost:3001');
});

当我们访问 http://localhost:3001/user/1/xxx 这个的时候，就可以匹配到第一个 router1.get('/', (ctx, next) => {}) 这个路由到，当我们访问 http://localhost:3001/user/1/xxx/x 的时候，就可以匹配到 router1.get('/:id', (ctx, next) => {}) 这个路由到了，其中/:id 就是命名路由了。不管是 /x 还是 /(任意的路径都是支持的)。也就是说 router1路由嵌套到router2路由里面了，只要访问 router2中的路由路径'http://localhost:3001/' + '/user/:id/xxx' 这样的路径的时候，就可以自动把router1的路径匹配到。也就是可以理解 router2是路由路径的前缀。

回到顶部

五：分割路由文件

比如现在项目的目录结构如下：

|----- 项目
| |-- node_modules     # 依赖的包文件
| |-- routes           # 所有的路由文件
| | |-- index.js       # 路由入口文件
| | |-- router1.js     # router1.js 路由文件
| | |-- router2.js     # router2.js 路由文件
| |-- app.js           # 项目启动的文件
| |-- package.json

如上目录结构，app.js 文件是启动代码文件，代码如下：

const Koa = require('koa');
const app = new Koa();const router = require('./routes/index');// 加载路由中间件
app.use(router.routes(), router.allowedMethods());app.listen(3001, () => {  console.log('server is running at http://localhost:3001');
});

routes 文件夹包含所有的路由文件，routes/index.js 是路由的入口路由文件，在app.js 会引入该文件，代码如上，该文件的作用是读取所有的路由的文件，并且对每个路由进行注册。
routes/index.js 代码如下：

const router = require('koa-router')();
const fs = require('fs');
const path = require('path');
const files = fs.readdirSync(__dirname);
/*/^[^\.].*\.js/ 该正则匹配以.js末尾的文件，包括比如： a.js，/xx/yy/x.js 类似的多个目录文件，只要以 .js 末尾的即可。/^[^\.].*\.js$/.test('a.js'); // true/^[^\.].*\.js$/.test('/xx/yy/a.js'); // true
*/
files.filter(file => ~file.search(/^[^\.].*\.js$/)).forEach(file => {// 获取文件名 比如 xx.js 这样的，截取 file.substr(0, file.length - 3); 因为 .js 长度为3const fileName = file.substr(0, file.length - 3);/* 获取每个路由的全局路径，比如文件夹 routes下的 router1.js.router1.js 代码如下：const router = require('koa-router')();router.get('/', (ctx, next) => {ctx.body = 'hello world';});router.get('/home', (ctx, next) => {ctx.body = '欢迎光临home页面';});module.exports = router;然后对每个路由进行注册*/const fileEntity = require(path.join(__dirname, file));if (fileName !== 'index') {router.use(`/${fileName}`, fileEntity.routes(), fileEntity.allowedMethods());
  }
});module.exports = router;

routes/router1.js 是其中一个路由文件，代码如下：

const router = require('koa-router')();router.get('/', (ctx, next) => {ctx.body = 'hello world';
});router.get('/home', (ctx, next) => {ctx.body = '欢迎光临home页面';
});module.exports = router;

routes/router2.js 是另外一个路由文件，代码如下：

const router = require('koa-router')();router.get('/', (ctx, next) => {ctx.body = '已经进入router2页面了';
});router.get('/detail', (ctx, next) => {ctx.body = '已经进入详情页面了';
});module.exports = router;

当我们访问 http://localhost:3001/router1 的时候，会打印 "hello world", 如下图所示：

当我们访问 http://localhost:3001/router1/home 的时候，会打印 "欢迎光临home页面", 如下图所示：

当我们访问 http://localhost:3001/router2 的时候，会打印出 "已经进入router2页面了", 如下图所示：

当我们访问 http://localhost:3001/router2/detail 的时候，会打印出 "已经进入详情页面了", 如下图所示：

github源码查看

转载于:https://www.cnblogs.com/tugenhua0707/p/10686634.html

理解koa-router 路由一般使用相关推荐

react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案
在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案参考文章: (1)在nodeJs的Express框架下用TypeScript编写ro ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
android自定义队列,Android-自定义Router(路由)
我们知道Android的组件化离不开Router,路由的主要主要作用是:消息的中转站,为我们的项目多模块的依赖解耦.,当然市面上有三方路由框架,比如阿里的ARouter就是一个不错的选择,但我们还是要 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
趣味理解网关、路由等概念
趣味理解网关.路由等概念网关网关是一种充当转换重任的计算机系统或设备.在使用不同的通信协议.数据格式或语言,甚至体系结构完全不同的两种系统之间,网关是一个翻译器.与网桥只是简单地传达信息不同,网关 ...

理解koa-router 路由一般使用

理解koa-router 路由一般使用相关推荐

最新文章

热门文章