关于前端:浅谈Koa2路由

48次阅读

共计 3678 个字符,预计需要花费 10 分钟才能阅读完成。

路由

路由是什么

路由(routing)是指分组从源到目的地时,决定端到端门路的网络范畴的过程。

路由是 依据不同的 url 地址 展现 不同的内容或页面。

比方你申请了某个网站的用户列表的 URL 他就会去执行查问用户列表,并返回用户列表数据。

如果你申请了特定用户的接口的 URL,他就会查问特定用户,并返回给你特定用户的数据。

路由决定了不同 URL 是如何被不同地执行的

在 Koa 中,路由的实质是中间件

更多精彩内容,请 微信搜寻“前端爱好者 戳我 查看

为什么要用路由?

  • 如果没有路由,会怎么样?
  • 路由存在的意义是什么?

如果没有路由

  • 所有申请都做了雷同的事
  • 所有申请都会返回雷同的后果

路由存在的意义

  • 解决不同的 URL
  • 解决不同的 HTTP 办法
  • 解析 URL 上的参数

koa 中应用路由

自定义我的项目中应用 koa 路由

装置

npm install koa-router

新建服务器

const koa = require('koa');// 引入 koa
const Router = require('koa-router');

// 配置路由,ctx 上下文 context,蕴含了 request 和 response 等信息
var router =  new Router();
router.get('/',async (ctx)=>{ctx.body = '首页'; // 相当于 res.writeHead(); res.end();}).get('/news',async (ctx)=>{ctx.body = '这是一个新闻页面';});
const app = new koa();// 实例化 koa
app.use(router.routes()); // 启动路由
app.use(router.allowedMethods());// 官网配置

获取 get 传值

const koa = require('koa');
var router = require('koa-router')();

var app = new koa();
router.get('/',async (ctx)=>{ctx.body = '首页';});
router.get('/news',async (ctx)=>{ctx.body = '新闻列表页面';});

// 获取 get 传值
router.get('/newscontent',async(ctx)=>{
    // 从 ctx 中读取 get 值
    console.log(ctx.query); // 获取的是格式化的对象,例{id:'123'}
    console.log(ctx.querystring); // 获取的是 url 的字符串 , 例:'id=123'
    console.log(ctx.request); // 获取申请相干的信息,包含 method,url,header 等信息
    ctx.body = '新闻详情';
});

// 动静路由 
router.get('/news/:params',async(ctx)=>{
    //aid 为自定义参数名,能够通过 ctx.params 拜访
    // 如果有多个动静传值,则能够写成 '/news/:params1/:params2' 的模式
    ctx.body = ctx.params;
});

app.use(router.routes()); // 启动路由
app.use(router.allowedMethods()); // 官网配置,申请谬误的时候返回一个状态
 
app.listen(3000); 

应用 koa 脚手架(koa-generator)创立我的项目中应用 koa 路由

如果您应用 koa 脚手架(koa-generator)曾经创立好了我的项目你,那么应用路由会非常简单。

如果不分明如何应用 koa 脚手架,请参考:

浅谈 Koa

koa2 我的项目目录详解:

.
+-- bin
|   +-- www               // 我的项目启动必备文件, 配置端口等服务信息
+-- node_modules          // 我的项目依赖,装置的所有模块都会在这个文件夹下
+-- public                // 寄存动态文件,如款式、图片等
|   +-- images            // 图片
|   +-- javascript        // js 文件
|   +-- stylesheets       // 款式文件
+-- routers               // 寄存路由文件,如果前后端拆散的话只用来书写 api 接口应用
|   +-- index.js
|   +-- user.js
+-- views                 // 寄存寄存模板文件,就是前端页面,如果后盾只是提供 api 的话,这个就是备用
|   +-- error.pug
|   +-- index.pug
|   +-- layout.pug
+-- app.js                // 主入口文件
+-- package.json          // 存储我的项目名、形容、作者、依赖等等信息
+-- package-lock.json     // 存储我的项目依赖的版本信息,确保我的项目内的每个人装置的版本统一

关上 routes\index.js,j 即可查看创立好的路由文件。

var router = require('koa-router')(); // 引入路由插件

// 定义路由内容 咱们只须要操作这里即可
router.get('/', function *(next) {
  yield this.render('index', {title: 'Hello World Koa!'});
});

router.get('/foo', function *(next) {
  yield this.render('index', {title: 'Hello World foo!'});
});

router.post('/post1', function *(next) {
  yield this.render('index', {title: 'Hello World foo!'});
});

// 获取 get 传值
router.get('/newscontent',async(ctx)=>{
    // 从 ctx 中读取 get 值
    console.log(ctx.query); // 获取的是格式化的对象,例{id:'123'}
    console.log(ctx.querystring); // 获取的是 url 的字符串 , 例:'id=123'
    console.log(ctx.request); // 获取申请相干的信息,包含 method,url,header 等信息
    ctx.body = '新闻详情';
});

// 动静路由 
router.get('/news/:params',async(ctx)=>{
    //aid 为自定义参数名,能够通过 ctx.params 拜访
    // 如果有多个动静传值,则能够写成 '/news/:params1/:params2' 的模式
    ctx.body = ctx.params;
});

module.exports = router; // 导出路由

app.js中路由展现

留神:这里,只展现无关路由代码,还有其余代码,省略了不少:

var app = require('koa')();

...

var index = require('./routes/index'); 
var users = require('./routes/users'); // 自定义的路由模块 : 用户模块 users

...

// routes definition
app.use(index.routes(), index.allowedMethods());  // 启动路由 
app.use(users.routes(), users.allowedMethods());  // 官网配置,申请谬误的时候返回一个状态

...

module.exports = app; 

users.js

var router = require('koa-router')(); // 引入路由插件

router.prefix('/users'); // 定义路由前缀

// 定义路由内容 咱们只须要操作这里即可

router.get('/', function *(next) {this.body = 'this is a users response!';});

router.get('/bar', function *(next) {this.body = 'this is a users/bar response!';});

module.exports = router; // 导出路由

总结

路由解决不同的 URL

咱们要做什么事件,依据路由来决定。咱们通过路由就找到了这个中央,去做相应的业务逻辑的解决好。

就是解决不同的 HTTP 办法

因为咱们在申请一个中央的时候,可能你这个申请形式会有很多种,比方 get 申请、post 申请。每一种申请的办法,它的所代表的意义又不一样。所以咱们为了辨别不同的申请办法,咱们也得去应用路由。

为了解析 URL 下面的参数

咱们在去做前后端拆散开发, 须要通过 http 申请,并且申请一个地址,把咱们要申请的参数传给服务器端。

服务器端依据咱们传的参数来决定返回什么样的后果。

以上三点就阐明了路由存在的意义,所以咱们在我的项目开发的过程中,肯定要去辨别好路由,以及对路由要有一个正当的布局。

举荐应用 koa 脚手架(koa-generator)创立我的项目。,本人创立我的项目的话,须要装置很多包,很繁琐,一不小心,就会出问题。

参考文档

  • https://koa.bootcss.com/index.html

正文完
 0