阅读目录

  • 一：理解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 路由一般使用相关推荐

  1. react更改路由入参_JavaScript基础教程 react router路由传参

    本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...

  2. Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)

    文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...

  3. router路由react_使用React Router在React中受保护的路由

    router路由react In this video, you will see how to create a protected route using React Router. This r ...

  4. React Router路由详解

    React Router路由详解 一.基础 1.安装使用 2.React Router 中通用的组件 路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...

  5. 在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案

    在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案 参考文章: (1)在nodeJs的Express框架下用TypeScript编写ro ...

  6. Vue Router 路由管理

    文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...

  7. 【Vue】相关生态——Vue Router路由

    Vue Router路由 基本使用 带参数的动态路由匹配 捕获所有路由或404 Not found 路由 嵌套路由 编程式导航 重定向和别名 将props传递给路由组件 不同的历史模式 进阶 导航守卫 ...

  8. android自定义队列,Android-自定义Router(路由)

    我们知道Android的组件化离不开Router,路由的主要主要作用是:消息的中转站,为我们的项目多模块的依赖解耦.,当然市面上有三方路由框架,比如阿里的ARouter就是一个不错的选择,但我们还是要 ...

  9. Vue Router路由常用功能总结

    Vue Router路由常用功能总结 一.前言 二.安装 1. vueCLI安装 2. npm安装 三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航 五.重 ...

  10. 趣味理解网关、路由等概念

    趣味理解网关.路由等概念 网关 网关是一种充当转换重任的计算机系统或设备.在使用不同的通信协议.数据格式或语言,甚至体系结构完全不同的两种系统之间,网关是一个翻译器.与网桥只是简单地传达信息不同,网关 ...

最新文章

  1. 跑步机到了，看能坚持多久
  2. 基于Visual C++2010与windows SDK fo windows7开发Windows 7的多点触摸特性应用程序(1)
  3. SAP UI5 Dropdown list binding debugging
  4. 如何提升 Kestrel 上传文件的大小限制？
  5. 1-26HashSet简介
  6. Linux下动态共享库加载及使用详解
  7. 随谈---------多年之后，我又回来了
  8. 2016 Google中国开发者大会游记
  9. 用MATLAB实现人脸识别
  10. 【301】怪诞行为学-可预测的非理性
  11. Snapchat面经
  12. 小技巧|H5禁止手机虚拟键盘弹出
  13. php查题,2020高校邦《PHP语言程序设计》答案在线查题
  14. 逻辑漏洞之密码找回漏洞（semcms）
  15. 计算机教 学计划,计算机教学计划
  16. 人工智能的发展，主要经历哪几个阶段？
  17. python 爬虫动态网页的区别_Python开发爬虫之动态网页抓取篇：爬取博客评论数据——通过Selenium模拟浏览器抓取...
  18. 第七章 本源时空
  19. Adobe Premiere基础-常用的视频特效(边角定位,马赛克,模糊,锐化,手写工具,效果控件层级顺序)(十六)
  20. IAR for ARM系列教程（四）_菜单（Ⅱ）

热门文章

  1. 一些关于找工作的书籍
  2. 「学习笔记-Linux」学习Shell Script
  3. 一个mongosee例子
  4. 编译httpd-2.4.46的RPM包
  5. 区块链膨胀：以太坊客户如何解决存储问题
  6. python添加数组元素_Python列表附录–如何向数组添加元素，并附带示例说明
  7. ecmascript_TC39及其对ECMAScript的贡献
  8. 完成工作表-使用Google Spreadsheets作为数据后端
  9. Hadoop集群的基本操作（二：HBase的基本操作）
  10. python 桑基图 地理坐标_【转载】Python数据可视化-实现Sankey桑基图