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 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
js重写方法的简单实现
Jul 10 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
浅析vue-router原理
Oct 19 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
js针对图片加载失败的处理方法分析
Aug 24 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
php常用Stream函数集介绍
2013/06/24 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
详解Python中的正则表达式的用法
2015/04/09 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
Python常用知识点汇总
2016/05/08 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python3 中文文件读写方法
2018/01/23 Python
Python类中self参数用法详解
2020/02/13 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
考试不及格的检讨书
2014/01/22 职场文书
四年级下册教学反思
2014/02/01 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
年检委托书
2014/08/30 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
产品调价通知函
2015/04/20 职场文书
公司开会通知
2015/04/20 职场文书
Golang 遍历二叉树
2022/04/19 Golang
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android