木灵鱼儿
阅读:2627
koa框架14 路由参数、重定向、嵌套
参数
koa-router的参数和vue中的router参数一下,一个分号带一个变量名
router.get("/news/:id",async ctx=>{
});
那么我们要进入这个路径,是一定要带上id的,不然就进不去:loaclhost:8080/news/1231
这个id可以是任何值,数字,英文,中文
参数也可以多个,这样你访问这个路径也要带上这么多的参数
router.get("/news/:id/:a/:eee",async ctx=>{
});
路径:localhost:8080/asda/ada/dada
如何获取这些参数呢?
ctx有一个params属性,他是一个对象,里面存储着所有的参数,键值对形式:
{
id:"asda",
a:"ada",
eee:"dada"
}
然后我们可以通过小标,key,解构,去获取这个对应的参数内容。
命名路由
这个和vue的命名路由差不多,也是给一个名字,以后路径发生变化,跳转用name也不会受到影响,但是用法略有不同。
router.get("news","/news/:id",async ctx=>{
});
第一个参数就是路由名了。
koa的路由跳转,他需要拼接出一条路径才行,他不想vue那样,直接push一个对象,对象里面带个name键值对就行。
他有一个专门凭借路径的方法:router.url("news",18)
;
然后他会返回一条路径:/news/18
此时,哪怕我原来的news的路由路径发生改变,只要路由名相同,我就能拼接出一条正确的路径。
重定向 慎用(301)
路由的重定向和ctx的重定向差不多,但是不一样,
因为路由的重定向默认使用301重定向。
router.redirect("/a","/b");
第一个参数是需要重定向的路径,第二个是301跳转到哪的路径
注意:路由的重定向不能改为302,不能像ctx的重定向那样我们可以修改。
嵌套
有时候网站做大了,对于路由我们可能需要做一个分类,比如,user为一个前缀,user前缀路径下要有login,singn两个子路由,还有有一个admin前缀,用于进入管理路由,admin下有list,banner两个子路由。
用户通过访问:/user/login
登录 /admin/list
查看数据列表
这就是路由的嵌套了,因为login,list这些都在一个父路由下
const Koa = require("koa");
const Router = require("koa-router");
const server = new Koa();
server.listen(8080);
//创建路由
const router = new Router();
//user路由
const user = new Router();
user.get("/login", async ctx => {
ctx.body = "登录";
});
user.get("/singn", async ctx => {
ctx.body = "注册";
});
router.use('/user',user.routes());
//admin
const admin = new Router();
admin.get("/list", async ctx => {
ctx.body = "数据列表";
});
admin.get("/banner", async ctx => {
ctx.body = "轮播数据";
});
router.use('/admin',admin.routes());
//主路由
server.use(router.routes());
new出一个新路由赋值给一个变量,然后这个变量设置对应的路由,然后通过主路由router的use方法,将这个new出的新路由的routes传入,并且设置一个对应的路径。
对于这个路径的生成,我们可以理解为字符串的拼接,也就是use第一个参数path+new出来的路由路径
第一个就是:
"/user"+"/login"
"/user"+"/singn"
所以需要注意一点就是:
"/"+"/xxx"
如果use设置了/
主路径,后面的子路由就不要再写/
了,不然字符的拼接会生成一个错误的路径。
要改为这样:
"/"+"xxx"
路由模块化
如果我们把路由全部写在server.js里面的话,路由一多,就会非常臃肿,所以我们要对其模块化处理。
我们可以对uer和admin两个路由作为一个js模块保存起来。
user
const Router = require("koa-router");
const router = new Router();
router.get("/login", async ctx => {
ctx.body = "登录";
});
router.get("/singn", async ctx => {
ctx.body = "注册";
});
module.exports = router.routes();
admin
const Router = require("koa-router");
const router = new Router();
router.get("/list", async ctx => {
ctx.body = "数据列表";
});
router.get("/banner", async ctx => {
ctx.body = "轮播数据";
});
module.exports = router.routes();
由于是在模块里面,是一个全新的作用域,所以我们可以直接使用router变量名也不用担心冲突。
最后通过module的exports导出路由的routes方法,然后直接在主路由里面激活就行了。
//user路由
router.use('/user', require("./router/user"));
//admin
router.use("/admin", require("./router/admin"));
如果项目再多了,这种主路由激活的也会变多,可能会有很多类似于user,admin这样额路由需要激活,这样server.js文件又会变得臃肿,我们可以将这些激活的路由丢到一个index.js文件内,然后在server文件中只需要引入这个存放index的目录即可。
比如在router文件夹内创建一个index.js
const Router = require("koa-router");
//创建路由
const router = new Router();
//user路由
router.use('/user', require("./user"));
//admin
router.use("/admin", require("./admin"));
//导出
module.exports = router.routes();
由于admin和user的路由文件也在router目录,我么调整了下文件路径,然后我们导出这个主路由的routes方法。
接着再去server.js中激活主路由
const Koa = require("koa");
const server = new Koa();
server.listen(8080);
server.use(require("./router"));
在server中我们已经你不需要引入koa-router了,然后直接use中require引入目录地址,node会自动获取index.js
当然我们也可以传统一点,用const创建一个变量,再去use里面使用这个变量,都可以的。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
centos 安装最新版 node.js
[hide]先用yum 安装一次node先升级yum update 提示下载程序,回复y安装nodeyum install nodejsyum安装的node一般都不是最新的,所以我们还需要升级node的版本npm i n -g全局安装一个n插件n lts表示安装最新的稳定版!一些常用命令n ls查看已安装的node版本n rm 16.0.3删除16.0.3版本更多功能阅读插件文档:n等待安装完毕后,此时其实版本已经安装好了,但是输入node -v还是低版本,是因为centos的用户缓存问题。我们退出登录再登录就会刷新缓存了,此时的node -v输出的就是最新版本exit 退...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
node npm yarn 如何同时运行多个指令
node的bash命令其实是有对应的指令字符的,但是,这个指令只能再linux,mac上才有生效,再windows是无效的,所以了解一下就行。命令说明&&顺序执行多条命令,当碰到执行出错的命令后将不执行后面的命令&并行执行多条命令||顺序执行多条命令,当碰到执行正确的命令后将不执行后面的命令|管道符windows上进行多命令"scripts": { "dev": "cross-env NODE_ENV=development webpack --env development --progress -...
关于使用this.$router对象进行跳转时产生重定向错误的解决方法
vue-router升级版本后,使用$router进行跳转时,将返回一个promise对象,这其实是好事,但是除了这个,官方对报错也做了调整。这里先看一下常见一个重定向错误:为什么产生这个错误,我在谷歌查了下,有这么一个解释:这是设计使然。为什么?阅读此评论。TL;DR:假设您在页面 A,然后单击一个按钮将您带到页面 B(有点像method: goToB() { router.push('/B'); }页面 A)。但是页面 B有一个导航守卫,将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌,但信息量很大这里最大的困惑是重...

koa教程2 HttpBearerAuth 传递token
前端发送token到后端,一般有三种方式:链接中携带token,query参数post这种请求body中携带token头信息携带token但是事实上http已经为我们提供了传token的方式,是一个相对来说比较安全的方式,就是HttpBearerAuth 其实他也是一个头信息来着,只是相对来说多了一点操作,在apipost软件中,我们可以直接可视化设置如果是axios,则是需要添加一个头信息:axios({ method: 'get', url: url, responseType: 'blob', headers: { 'Authoriz...

koa教程2 微信openid登录
微信的openid,前端登录时,会发送一个code码到后端,后端接收到这个code,然后配合appid、appsecret参数,像wx发送一个get请求。wx的请求地址:GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code具体查看文档:微信官方文档-服务端可以看到这段get请求有四个参数:属性类型默认值必填说明appidstring 是小程序 appIdsecretstring 是...
koa教程2 权限分级控制
在之前的代码中,我们使用了一个scope属性来表示用户的权限,但是scope是一个数字,他的阅读性是非常差的,当其他人开发的时候,可能并不知道你这个数字是什么意思?所以,我们需要将它转义成文本。为了方便判断,我们在enum.js中增加一个用户等级的对象enum.js://通用判断是否存在该类型 function isThisType(val) { let flag = false; Object.keys(this).find(key => { if (this[key] === val) { return flag = true; } })...
koa教程2 token鉴权
之前我们在token中传入我们的自定义参数,现在我们要做一个token鉴权,很简单,如果他的token合法,就可以访问这个路由,如果不合法,就打回。这个也不能说是真正意义上的鉴权,因为他还没有判断scope值,所以只能说是简单判断。做这个判断我们就可以通过中间件的形式,于是我们在middlewares目录下创建一个auth.js文件auth.js:const parseBearerToken = require("@utils/paresBearerToken"); const jwt = require("jsonwebtoken"); cons...
koa教程2 用户登录
登录类型用户注册之后,自然是用户登录,登录的时候我们需要考虑到登录的方式,往往在正式的项目里面,登录的方式可能会有很多种:账号密码登录手机号登录小程序一键登录那么我们登录的时候就要进行判断,设置一个type的属性,用于在登录时判断用户是什么类型的登录,这个由前端那边设定参数。type:1为账号密码登录,2为手机号登录,3为小程序一键登录作为判断,我们可以写一个查询表(枚举),在项目根目录创建一个lib目录,在里面创建一个enum.js文件。enum.js://通用判断是否存在该类型 function isThisType(val) { let flag = false; Obje...
node 自定义路径别名
用过vue cli的话,对路径中的@应该不陌生,他表示根目录,但是在node的环境里面,我们编写模块并引入时,并没有这种方便的写法。在node环境中,我们可以通过process.cwd()来表示根目录,但是这样的话,每次使用绝对路径引入,路径总是需要写一大堆拼接。const db = require(`${process.cwd()}/config/config`).database;这样略显麻烦,于是我们可以在全局写一个引入插件的方法:global.myRequire = function (path) { return require(`${process.cwd()}/${pa...