乐趣区

关于前端:浅谈Koa2路由

jiezi

路由

路由是什么

路由（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
退出移动版