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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
javascript arguments使用示例
Dec 16 Javascript
js点击选择文本的方法
Feb 09 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
分页栏的web标准实现
2011/11/01 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
JS 控件事件小结
2012/10/31 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
办公室前台岗位职责
2014/01/04 职场文书
教育见习报告范文
2014/11/03 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
安全员岗位职责
2015/02/10 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏