koa-router路由参数和前端路由的结合详解


Posted in Javascript onMay 19, 2019

koa-router 定制路由时支持通过冒号形式在 url 中指定参数,该参数会挂载到 context 上然后可通过 context.params.paramName 方便地获取。

考察下面的示例:

var Koa = require("koa");
var Router = require("koa-router");

var app = new Koa();
var router = new Router();

router.get("/user/:id", async function(ctx, next) {
 const userId = ctx.params.id;
 ctx.body = `user id is:${userId}`;
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000);

console.log("server started at http:localhost:3000");

启动服务后可看到页面中展示出了从 url 中获取到的 id 参数。

koa-router路由参数和前端路由的结合详解

路由参数的获取展示

现在来考虑另一种情况,即路由中支持前端路由的情况。

即把现在的 url 由 /user/:id 的形式扩展成 /user/:id/foo/bar,这里 /foo/bar 部分可以是任何路由,作为前端处理的路由部分。

为了实现这样的前端路由部分,服务端路由的配置需要借助正则来进行,

- router.get("/user/:id", async function(ctx, next) {
+ router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
 const userId = ctx.params.id;
 ctx.body = `user id is:${userId}`;
});

这里将路由中 url 由单个字符串变成了数组形式,第一个还是原来的路由,这样正常的通过 /user/1 形式过来的页面能命中该路由。同时添加 /\/user\/([\w|\d]+)\/.*/ 部分,因为正则情况下不再支持路由中通过冒号进行参数的配置,所以这里 /user/ 后跟随的 id 也需要使用正则来替换掉。

但正则匹配下的路由就不能通过 context.params 来访问 url 上的参数了。不过好在可通过在正则中定义匹配组(Capturing Groups)的形式来定义参数,即其中 ([\w|\d]+) 括号包裹的部分,称为一个匹配组,一个匹配组是会自动被挂载到 context.params 上的,只是不像通过冒号定义的参数那样会有一个名字,这种形式的参数按照匹配到的顺序形成一个数组赋值到 context.params,所以访问第一个匹配组形成的参数可通过 context.params[0] 来获取。

于是上面的代码稍加修正后,就能够正确处理来自命名参数(通过冒号匹配)或正则参数形成的 query 参数了。

- router.get("/user/:id", async function(ctx, next) {
+ router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
- const userId = ctx.params.id;
+ const userId = ctx.params.id || ctx.params[0];
 ctx.body = `user id is:${userId}`;
});

最后完整的代码会是这样:

var Koa = require("koa");
var Router = require("koa-router");

var app = new Koa();
var router = new Router();

router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
 const userId = ctx.params.id || ctx.params[0];
 ctx.body = `user id is:${userId}`;
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000);

console.log("server started at http:localhost:3000");

此时访问以下连接进行测试,

  • http://localhost:3000/user/1
  • http://localhost:3000/user/2/foo
  • http://localhost:3000/user/3/foo/bar

均能正确命中页面并成功获取到路由中的参数。

koa-router路由参数和前端路由的结合详解

正则路由及路由参数的获取

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 #Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 #Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 #Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 #Javascript
vue+高德地图写地图选址组件的方法
May 18 #Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 #Javascript
js实现图片推拉门效果代码实例
May 18 #Javascript
You might like
第五节 克隆 [5]
2006/10/09 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
微信支付的开发流程详解
2016/09/13 PHP
永不消失的title提示代码
2007/02/15 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python运算符重载用法实例分析
2015/06/01 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
python中的global关键字的使用方法
2019/08/20 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python中_del_还原数据的方法
2020/12/09 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
小学优秀班集体申报材料
2014/05/25 职场文书
代办委托书怎么写
2014/08/01 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers