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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
学习javascript文件加载优化
Feb 19 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
es6函数中的作用域实例分析
Apr 18 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简单实现MVC
2015/02/05 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python实现文件名批量替换和内容替换
2014/03/20 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python sorted方法和列表使用解析
2019/11/18 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
团队精神口号
2014/06/06 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
高三英语教学计划
2015/01/23 职场文书
怎样写离婚协议书
2015/01/26 职场文书
校长师德表现自我评价
2015/03/05 职场文书
公司的力量观后感
2015/06/05 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫