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

什么是路由

路由就是具体的访问路径,指向特定的功能模块。一个api接口是由ip(域名)+端口号+路径组成,例如 :https://www.npmjs.com/package/koa-router就是一个路由,指向了koa-routernpm页面。

为什么需要 koa-router 路由

当然不需要koa-router也能实现路由功能,通过ctx.request.path去指定路径实现。例子如下:

const koa = require('koa2')
const app = new koa()

app.use(async (ctx, next) => {
    if (ctx.request.path === '/') { // 首页
      ctx.response.status = 200
      ctx.response.body = 'index'
    } else if (ctx.request.path === '/list') { // 列表页
      ctx.response.status = 200
      ctx.response.body = 'list'
    } else {
        ctx.throw(404, 'Not found') // 404
    }
  await next()
})

app.listen(3000)

参考:Koa 路由

以上代码只是实现两个接口,就写了不少代码,而写是多层的判断代码,可读性已经很差了,这时候怎么办?

是不是可以将以上代码抽取出去,通过中间件的方式去实现。

结果是可以的,koa-router就是这样做的。使用koa-router实现的例子如下:

  1. app.js 入口
  2. urls/home.js home 页面的路由

app.js 的代码如下

// 路由模块使用前需要先安装和实例化
const Router = require('koa-router')
const router = new Router()

// 首页
app.use(async (ctx, next) => {
    if (ctx.request.path === '/') {
      ctx.response.status = 200
      ctx.response.body = 'index'
    }
    await next()
})

// 其他页面通过 router 加载
let urls = fs.readdirSync(__dirname + '/urls')
urls.forEach((element) => {
    let module = require(__dirname + '/urls/' + element)
    /*
      urls 下面的每个文件负责一个特定的功能,分开管理
      通过 fs.readdirSync 读取 urls 目录下的所有文件名,挂载到 router 上面
    */
    router.use('/' + element.replace('.js', ''), module.routes(), module.allowedMethods())
})
app.use(router.routes())

urls/home.js 的代码如下

const Router = require('koa-router')
const home = new Router()

// /home
home.get('/', async (ctx, next) => {
    ctx.response.status = 200
    ctx.response.body = 'home'
    await next()
})

// home/list
home.get('/list', async (ctx, next) => {
    ctx.response.status = 200
    ctx.response.body = 'home-list'
    await next()
})

module.exports = home

通过以上代码基本已经实现了全局路由的功能了,剩下得就是在urls包下创建对应的文件即可,参考home.js即可。

但是这里的代码还是不够完美,app.js作为入口文件,这里的代码还是有点多了;而且首页和home的路由是分开来实现的。再而且urls路径是固定的,后续文件夹名称或者位置改变都会出现问题。

那么如何实现呢?
这里介绍一种思路:

  1. app.js中的代码抽取出来,让app.js尽量简单
  2. 将首页和其他页面都在全局路由中实现

优雅的全局路由实现

通过npm引入require-directory

require-directory npm包的作用是:

递归地遍历指定目录,对每个文件进行require()

这里也是利用了这个包去实现的。具体实现如下:

  1. core目录下创建InitManager.js
const requireDirectory = require('require-directory')
const Router = require('koa-router')
/**
* 加载全局路由
*/
static initLoadRouters(app){
   // 加载工作目录下的 app/api 下的路径
   const apiDirectory = `${process.cwd()}/app/api`

   // 参数:第一个参数固定参数module
   // 第二个参数要加载的模块的文件路径
   // 第三个参数:每次加载一个参数执行的函数
   requireDirectory(module, apiDirectory, {
       visit: whenLoadModule
   })

   function whenLoadModule(obj) {
       if(obj instanceof Router ){
           app.use(obj.routes())
       }
   }
}

module.exports = InitManager

从上面的实现方式可以看出这里使用了process.cwd()获取路径,而原有的代码中是通过__dirname去获取路径,那么二者有什么区别呢?

NodeJsprocess.cwd()__dirname的区别
process.cwd()是当前执行node命令时候的文件夹地址 ——工作目录,保证了文件在不同的目录下执行时,路径始终不变
__dirname 是被执行的js 文件的地址 ——文件所在目录

  1. app.js中加载这个方法即可。
const app = new Koa()
InitManager.initLoadRouters(app)

3. 在app/api下创建相应的接口文件即可,如home.js

咨询请加微信:轻撩即可。

原文地址:https://www.cnblogs.com/gdragon/p/11802511.html

时间: 2024-08-28 08:21:41

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

全栈项目|小书架|服务器开发-Koa2 全局异常处理

什么是异常 做开发的基本都知道异常,像Android开发中常见的ANR异常.空指针异常,服务器开发中经常遇到的异常404,500异常,还有一些其他常见的异常,具体可见HTTP状态码. 基本上这些异常可以总结为:已知异常和未知异常. 已知异常就是程序中能够预想到异常,比如:服务器接口开发中某个api接口需要5个参数,而用户传递的参数多余5个或者少于5个,这种错误就是已知错误. 未知异常就说程序中不能预想到的异常,比如:服务器接口开发中遇到了空指针而程序中又没有做相应处理就会抛出HTTP状态码为50

全栈项目|小书架|服务器开发-Koa2中间件机制洋葱模型了解一下

KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 async函数,Koa帮你丢弃回调函数,并有力地增强错误处理. Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序. 为什么产生? 笔者对这几个框架都不熟,这里就不误人子弟了.可以看看下面一些大佬的介绍. Koa是由Express的原班人马打造,那么他们为什么不将

全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看出目前一本图书信息主要有: 图片字段 名称字段 作者字段 出版社字段 除了以上前端页面中可见的信息外,在服务器开发中还需要给每一条记录(数据)都加上下面的几个字段: 创建时间字段 更新时间字段 删除时间字段 最后完成的数据库表如下: ps:由于数据库是直接导入的,之前的数据库是没有时间字段的,所以前

全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下几个接口: 获取书籍详情信息 获取用户对书籍的喜欢状态接口 喜欢/不喜欢书籍接口 获取评论列表 写评论接口 以上的接口,有的数据可以直接从已存在的数据表中去获取,比如:书籍详情信息,而其他新接口就需要创建对应的model,然后根据model创建相应的数据表. 比如 用户对书籍的喜欢操作,可以创建li

全栈项目|小书架|小程序端-评论功能实现

效果图 发布评论 发布评论的入口在图书详情页面,点击 写评论 按钮之后跳转到发布评论页面. wxml布局比较简单了,目前还没有添加图片评论功能,也没有子评论功能,所以伪代码就比较简单了: <view class="comment-container"> <!-- book name --> <view class="book-name"> <text>{{bookInfo.name}}</text> <

全栈项目|小书架|服务器端-NodeJS+Koa2 实现点赞功能

效果图 接口分析 通过上面的效果图可以看出,点赞入口主要是在书籍的详情页面. 而书籍详情页面,有以下几个功能是和点赞有关的: 获取点赞状态 点赞 取消点赞 所以项目中理论上与点赞相关的接口就以上三个. 点赞 model 的设计 既然明确了接口数量,那么下一步就是设计接口对应的model,通过model生成表格like,里面存放点赞数据. 那么需要存在哪些点赞数据呢? 这里简单分析后,记录一条点赞信息只需要保存以下的信息即可: 点赞 id 书籍 id 用户 id created_at delete

《从零开始做一个MEAN全栈项目》(1)

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 在本系列的开篇,我打算讲一下全栈项目开发的优势,以及MEAN项目各个模块的概览. 为什么选择全栈开发?     对于初学者来说,学习一门新的语言和技术的体验总是让人愉快的,也会满足于掌握了一些新的东西并且解决了一些实际问题.在一个小组中采用全栈开发时,你可以更加有效地把握项目全局概念,这也有利于让你了解项目中的不同模块以及它们之间是如何协同工作的.你会对你们的产品中他人的贡献更加清晰,你也就了解了这款产品如何

《从零开始做一个MEAN全栈项目》(2)

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习.   上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技术架构,(2)为什么我们要打造单页应用,(3)本系列项目的技术架构和开发计划.希望通过这三个问题,我们能够对本项目产生一个全局视角. 实现一个常见的MEAN全栈项目的核心就是RESTful API.这个接口通常是用MongoDB, Express, Node.js实现的,而单页应用(SPA)由AngularJ

VueCli3.0全栈项目-资金管理系统带权限(node/element/vue)

课程简介:通过本系列课程,可以快速的掌握全栈开发流程, 包括node.js的接口搭建, vue前端项目的构建, element-ui视图的构建. 一套应有尽有的课程! 课程目录:1.Vue全栈-最终成果展示.mp42.Node接口搭建-express搭建服务器.mp43.Node接口搭建-连接MongoDB数据库.mp44.Node接口搭建-搭建路由和数据模型.mp45.Node接口搭建-搭建注册接口并存储数据.mp46.Node接口搭建-使用全球公认头像gravatar.mp47.Node接口