安科网

你可能会用到的一个路由适配器

NEWcai

NEWcai

2019-06-28

关注 关注

前言

此时状态有点像上学时写作文，开篇总是"拉"不出来，憋的难受。

原文地址

源码地址

你可能会用到的一个路由适配器

从背景出发

前后端分离后，前端童鞋会需要处理一些node层的工作，比如模板渲染、接口转发、部分业务逻辑等，比较常用的框架有koa、koa-router等。

现在我们需要实现这样一个需求：

  1. 用户访问/fe的时候，页面展示hello fe
  2. 用户访问/backend的时候，页面展示hello backend

你是不是在想，这需求俺根本不用koa、koa-router，原生的node模块就可以搞定。

const http = require('http')
const url = require('url')
const PORT = 3000

http.createServer((req, res) => {
  let { pathname } = url.parse(req.url)
  let str = 'hello'

  if (pathname === '/fe') {
    str += ' fe'
  } else if (pathname === '/backend') {
    str += ' backend'
  }

  res.end(str)
}).listen(PORT, () => {
  console.log(`app start at: ${PORT}`)
})

确实是，对于很简单的需求，用上框架似乎有点浪费，但是对于以上的实现，也有缺点存在，比如

  1. 需要我们自己去解析路径。
  2. 路径的解析和逻辑的书写耦合在一块。如果未来有更多更复杂的需求需要实现，那就gg了。

所以接下来我们来试试用koa和koa-router怎么实现

app.js

const Koa = require('koa')
const KoaRouter = require('koa-router')

const app = new Koa()
const router = new KoaRouter()
const PORT = 3000

router.get('/fe', (ctx) => {
  ctx.body = 'hello fe'
})

router.get('/backend', (ctx) => {
  ctx.body = 'hello backend'
})

app.use(router.routes())
app.use(router.allowedMethods())

app.listen(PORT, () => {
  console.log(`app start at: ${PORT}`)
})

通过上面的处理，路径的解析倒是给koa-router处理了，但是整体的写法还是有些问题。

  1. 匿名函数的写法没有办法复用
  2. 路由配置和逻辑处理在一个文件中，没有分离，项目一大起来，同样是件麻烦事。

接下来我们再优化一下,先看一下整体的目录结构

├──app.js // 应用入口
├──controller // 逻辑处理,分模块
│   ├──hello.js
│   ├──aaaaa.js
├──middleware // 中间件统一注册
│   ├──index.js
├──routes // 路由配置,可以分模块配置
│   ├──index.js
├──views // 模板配置，分页面或模块处理，在这个例子中用不上
│   ├──index.html

预览一下每个文件的逻辑

app.js 应用的路口

const Koa = require('koa')
const middleware = require('./middleware')
const app = new Koa()
const PORT = 3000

middleware(app)

app.listen(PORT, () => {
  console.log(`app start at: ${PORT}`)
})

routes/index.js 路由配置中心

const KoaRouter = require('koa-router')
const router = new KoaRouter()
const koaCompose = require('koa-compose')
const hello = require('../controller/hello')

module.exports = () => {
  router.get('/fe', hello.fe)
  router.get('/backend', hello.backend)

  return koaCompose([ router.routes(), router.allowedMethods() ])
}

controller/hello.js hello 模块的逻辑

module.exports = {
  fe (ctx) {
    ctx.body = 'hello fe'
  },
  backend (ctx) {
    ctx.body = 'hello backend'
  }
}

middleware/index.js 中间件统一注册

const routes = require('../routes')

module.exports = (app) => {
  app.use(routes())
}

写到这里你可能心里有个疑问？

你可能会用到的一个路由适配器

一个简单的需求，被这么一搞看起来复杂了太多，有必要这样么？

答案是：有必要，这样的目录结构或许不是最合理的，但是路由、控制器、view层等各司其职，各在其位。对于以后的扩展有很大的帮助。

不知道大家有没有注意到路由配置这个地方

routes/index.js 路由配置中心

const KoaRouter = require('koa-router')
const router = new KoaRouter()
const koaCompose = require('koa-compose')
const hello = require('../controller/hello')

module.exports = () => {
  router.get('/fe', hello.fe)
  router.get('/backend', hello.backend)

  return koaCompose([ router.routes(), router.allowedMethods() ])
}

每个路由对应一个控制器去处理，很分离，很常见啊！！！这似乎也是我们平时在前端写vue-router或者react-router的常见配置模式。

但是当模块多起来的来时候，这个文件夹就会变成

const KoaRouter = require('koa-router')
const router = new KoaRouter()
const koaCompose = require('koa-compose')
// 下面你需要require各个模块的文件进来
const hello = require('../controller/hello')
const a = require('../controller/a')
const c = require('../controller/c')

module.exports = () => {
  router.get('/fe', hello.fe)
  router.get('/backend', hello.backend)
  // 配置各个模块的路由以及控制器
  router.get('/a/a', a.a)
  router.post('/a/b', a.b)
  router.get('/a/c', a.c)
  router.get('/a/d', a.d)

  router.get('/c/a', c.c)
  router.post('/c/b', c.b)
  router.get('/c/c', c.c)
  router.get('/c/d', c.d)

  // ... 等等    
  return koaCompose([ router.routes(), router.allowedMethods() ])
}

有没有什么办法,可以让我们不用手动引入一个个控制器，再手动的调用koa-router的get post等方法去注册呢？

比如我们只需要做以下配置，就可以完成上面手动配置的功能。

routes/a.js

module.exports = [
  {
    path: '/a/a',
    controller: 'a.a'
  },
  {
    path: '/a/b',
    methods: 'post',
    controller: 'a.b'
  },
  {
    path: '/a/c',
    controller: 'a.c'
  },
  {
    path: '/a/d',
    controller: 'a.d'
  }
]

routes/c.js

module.exports = [
  {
    path: '/c/a',
    controller: 'c.a'
  },
  {
    path: '/c/b',
    methods: 'post',
    controller: 'c.b'
  },
  {
    path: '/c/c',
    controller: 'c.c'
  },
  {
    path: '/c/d',
    controller: 'c.d'
  }
]

然后使用pure-koa-router这个模块进行简单的配置就ok了

const pureKoaRouter = require('pure-koa-router')
const routes = path.join(__dirname, '../routes') // 指定路由
const controllerDir = path.join(__dirname, '../controller') // 指定控制器的根目录

app.use(pureKoaRouter({
  routes,
  controllerDir
}))

这样整个过程我们的关注点都放在路由配置上去，再也不用去手动require一堆的文件了。

简单介绍一下上面的配置

{
  path: '/c/b',
  methods: 'post',
  controller: 'c.b'
}

path: 路径配置，可以是字符串/c/b,也可以是数组[ '/c/b' ],当然也可以是正则表达式/\c\b/

methods: 指定请求的类型，可以是字符串get或者数组[ 'get', 'post' ]，默认是get方法,

controller: 匹配到路由的逻辑处理方法，c.b 表示controllerDir目录下的c文件导出的b方法，a.b.c表示controllerDir目录下的/a/b 路径下的b文件导出的c方法

源码实现

接下来我们逐步分析一下实现逻辑

可以点击查看源码

整体结构

module.exports = ({ routes = [], controllerDir = '', routerOptions = {} }) => {
  // xxx

  return koaCompose([ router.routes(), router.allowedMethods() ])
})

pure-koa-router接收

  1. routes

    1. 可以指定路由的文件目录，这样pure-koa-router会去读取该目录下所有的文件 (const routes = path.join(__dirname, '../routes'))

      1. 可以指定具体的文件，这样pure-koa-router读取指定的文件内容作为路由配置 const routes = path.join(__dirname, '../routes/tasks.js')
      2. 可以直接指定文件导出的内容 (const routes = require('../routes/index'))
  2. controllerDir、控制器的根目录
  3. routerOptions new KoaRouter时候传入的参数，具体可以看koa-router

这个包执行之后会返回经过koaCompose包装后的中间件，以供koa实例添加。

参数适配

assert(Array.isArray(routes) || typeof routes === 'string', 'routes must be an Array or a String')
assert(fs.existsSync(controllerDir), 'controllerDir must be a file directory')

if (typeof routes === 'string') {
  routes = routes.replace('.js', '')

  if (fs.existsSync(`${routes}.js`) || fs.existsSync(routes)) {
    // 处理传入的是文件
    if (fs.existsSync(`${routes}.js`)) {
      routes = require(routes)
    // 处理传入的目录  
    } else if (fs.existsSync(routes)) {
      // 读取目录中的各个文件并合并
      routes = fs.readdirSync(routes).reduce((result, fileName) => {
        return result.concat(require(nodePath.join(routes, fileName)))
      }, [])
    }
  } else {
    // routes如果是字符串则必须是一个文件或者目录的路径
    throw new Error('routes is not a file or a directory')
  }
}

路由注册

不管routes传入的是文件还是目录，又或者是直接导出的配置的内容最后的结构都是是这样的

routes内容预览

[
  // 最基础的配置
  {
    path: '/test/a',
    methods: 'post',
    controller: 'test.index.a'
  },
  // 多路由对一个控制器
  {
    path: [ '/test/b', '/test/c' ],
    controller: 'test.index.a'
  },
  // 多路由对多控制器
  {
    path: [ '/test/d', '/test/e' ],
    controller: [ 'test.index.a', 'test.index.b' ]
  },
  // 单路由对对控制器
  {
    path: '/test/f',
    controller: [ 'test.index.a', 'test.index.b' ]
  },
  // 正则
  {
    path: /\/test\/\d/,
    controller: 'test.index.c'
  }
]

主动注册

let router = new KoaRouter(routerOptions)
let middleware

routes.forEach((routeConfig = {}) => {
  let { path, methods = [ 'get' ], controller } = routeConfig
  // 路由方法类型参数适配
  methods = (Array.isArray(methods) && methods) || [ methods ]
  // 控制器参数适配
  controller = (Array.isArray(controller) && controller) || [ controller ]

  middleware = controller.map((controller) => {
    // 'test.index.c' => [ 'test', 'index', 'c' ]
    let controllerPath = controller.split('.')
    // 方法名称 c
    let controllerMethod = controllerPath.pop()

    try {
      // 读取/test/index文件的c方法
      controllerMethod = require(nodePath.join(controllerDir, controllerPath.join('/')))[ controllerMethod ]
    } catch (error) {
      throw error
    }
    // 对读取到的controllerMethod进行参数判断，必须是一个方法
    assert(typeof controllerMethod === 'function', 'koa middleware must be a function')

    return controllerMethod
  })
  // 最后使用router.register进行注册
  router.register(path, methods, middleware)

源码的实现过程基本就到这里了。

结尾

pure-koa-router将路由配置和控制器分离开来，使我们将注意力放在路由配置和控制器的实现上。希望对您能有一点点帮助。

原文地址

源码地址

koa koa-router

NEWcai

NEWcai

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

node.js开发API（二）--- 认识Koa-Router和获取参数

在koa实例化之后，我们会使用use来加载中间件；每一个中间件都是一个函数，函数的参数分别是ctx和next;建立好http服务器之后，koa-compose会将中间件存放在一个数组中，并依次从数组中执行每一个函数；每一个中间函数会调用next方法去取下一

苏莉koa 2020-01-29

koa 常用中间件

　　路由是Web框架必不可少的基础功能，koa.js为了保持自身的精简，并没有像Express.js自带了路由功能，因此koa-router做了很好的补充，作为koa星数最多的中间件，koa-router提供了全面的路由功能，比如类似Express的app

80447704 2020-01-02

Node KOA框架入门

ctx.body=‘管理员的a‘;id=xxx传参和/:id的区别

Anything0 2019-11-05

全栈项目|小书架|服务器开发-Koa全局路由实现

路由就是具体的访问路径，指向特定的功能模块。当然不需要koa-router也能实现路由功能，通过ctx.request.path去指定路径实现。是不是可以将以上代码抽取出去，通过中间件的方式去实现。使用koa-router实现的例子如下：。通过以上代码基本

LorenLiu 2019-11-06

koa学习之路二

路由是由一个 URI和一个特定的 HTTP 方法组成的，涉及到应用如何响应客户端对某个网站节点的访问。Koa 中的路由和 Express 有所不同，在 Express 中直接引入 Express 就可以配置路由，但是在 Koa 中我们需要安装对应的 koa

LorenLiu 2019-10-26

如何利用node转发请求详解

vue 项目开发过程中，接口跨域是一个很常见的问题。在开发时候可以用 vue 自带的 proxy 可以轻松解决。生产环境下，前端项目往往是部署在后端项目下，不会存在跨域的问题，接口前缀可以忽略。项目是能正常请求了，可是还需要处理接口问题，即 node 当成

往后余生 2020-09-17

如何更好地理解中间件和洋葱模型

相信用过 Koa、Redux 或 Express 的小伙伴对中间件都不会陌生，特别是在学习 Koa 的过程中，还会接触到 “洋葱模型”。本文阿宝哥将跟大家一起来学习 Koa 的中间件，不过这里阿宝哥不打算一开始就亮出广为人知的 “洋葱模型图”，而是先来介绍

yanyongtao 2020-11-02

什么时候使用这些Node框架？Express、Koa...

根据《2018年Node.js网络调查报告》显示，Node.js在很大程度上提高了开发者的生产力，降低了开发成本，提升了应用性能。这是成功采用和部署node.js框架的结果。我们喜欢node.js框架，从Express.js的灵活性，到koa.js的性能。

lzccheng 2020-09-06

node.js +mongdb实现登录功能

const koa = require("koa");const router = require("koa-router")();const app = new koa();app.use(router.route

webgm 2020-08-16

koa中间件核心（koa-compose）源码解读分析

最近经常使用koa进行服务端开发，迷恋上了koa的洋葱模型，觉得这玩意太好用了。而且koa是以精简为主，没有很多集成东西，所有的东西都需按需加载，这个更是太合我胃口了哈哈哈哈。基于对洋葱模型的热衷，所以对koa的洋葱模型进行一探究竟，不管是koa1还是ko

lert0 2020-08-16

Koa源码解析，带你实现一个迷你版的Koa

本文是我在阅读 Koa 源码后，并实现迷你版 Koa 的过程。如果你使用过 Koa 但不知道内部的原理，我想这篇文章应该能够帮助到你，实现一个迷你版的 Koa 不会很难。application.js: 入口文件，里面包括我们常用的 use 方法、liste

80447704 2020-06-09

koa-中间件使用

中间键在开发业务中起着承上启下的作用，比如登录的时候我们相关接口需要做登录的校验，是的，我们不可能在每个请求的接口前都加上一个函数叫做checkLogin. 这样的处理方式无一不是冗杂的，而且一旦我们的校验函数更改了名字，所有调用者都需要进行更改名字，这个

LorenLiu 2020-06-07

koa-创建项目

进入文件夹运行 npm init -y

苏莉koa 2020-04-15

学习koa开发API（五）--- 对异常和参数的处理

最近看了日漫《强风吹拂》，啊啊啊看的我开心，好久没好好看日漫了，找到了一种失去好久的的那种“中二”拼劲！！当我们输入一个不存在的接口路径时status是404；当我们手动抛出ctx.throw时，status是412，且显示的是Precondition F

无缘公子 2020-02-02

koa ejs 模板引擎

router.get(‘/add‘,async (ctx)=>{ let title = ‘hello koa2‘ await ctx.render(index‘,{. app.use //模板的后缀名是ejs. //app.use; //这

LorenLiu 2020-01-31

Koa 的中间件

把它叫做中间件。在express中间件是一个函数，它可以访问请求对象, 响应对象, 和 web 应用中处理请求-响应循环流程中的中间件，一 般被命名为 next 的变量。在 Koa 中中间件和 express 有点类似。修改请求和响应对象。调用堆栈中的下一

LorenLiu 2020-01-30

详解express与koa中间件执行顺序模式分析

var router = require(); /*引入是实例化路由** 推荐*/

80447704 2020-01-30

学习koa开发API（四）--- 文件目录设置

在根目录新增app文件夹，分别新增controllers文件夹、routes文件夹和index.js文件。假设我们需要开发两类接口，一种是有关图书的，一种是有关用户的。那么我们子routes文件夹下新增index.js、book.js和user.js文件。

80447704 2020-01-30

学习node.js开发Resetful API（一）

请求应该包含URL、HTTP方法、请求体等。URL使用名词，尽量使用复数；URL使用嵌套表示关联关系，如/users/12/repos/5；如果是分页，应该包含当前页数和每一页的数量：分页 page=2&per_page=100；状态码：2开头正确

Qimingweikun 2020-01-28

利用Nginx或koa

最近在做上传的图片的需求，思考上传之后的图片怎么访问的问题，因为后端是Node，一开始尝试写一个专门的接口通过传入图片的path来查找，试了一下感觉并不理想，因为要为每种类型的文件设置Content-Type，不然浏览器会直接下载改文件。Nginx天生擅长

byourb 2020-01-04
NEWcai

NEWcai

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号