如何用Node实现一个长尾词的mock-plugin中间件？

2026-04-05 19:291阅读0评论SEO基础

内容介绍
文章标签
相关推荐

本文共计1129个文字，预计阅读时间需要5分钟。

在项目前端，最近开始使用Mockjs作为mock数据工具。Mockjs实现的数据mock部分，包括自己实现了一个模拟XMLHttpRequest的方法。使用Mockjs拦截请求后，在Chrome的Network中无法显示拦截结果。

写在前面

最近在使用Mockjs作为项目里面mock数据的工具，发现mockjs做的拦截部分是自己实现摸拟了一个XMLHttpRequest的方法做的拦截，使用Mockjs拦截请求后，在chrome的network上无法看到请求(具体mockjs使用方法可以查看他的api，mockjs-api这里我不多做阐述),但为了更加真实的像后台返回数据，我自己使用Node作为中间代理去实现了一个mock-plugin.

express中间件介绍

因为插件相当于是实现了一个express的中间件的方式，所以这里简单对express中间件的使用做一个说明：

express中间件通过app.use(也有app.get,app.post等方法)的方式注册到express的实例某个属性上，将执行函数存放在栈内部，然后在回调执行的时候调用next()方法将执行下一个存在栈内的方法。

这里列举一个示例：

通过node执行以上代码后，在浏览器上通过访问locahost:4000可以看到控制台打印：

可以发现在执行的时候先执行了use注册的中间件，然后再执行到get路由的时候，又执行了app.use注册的中间件。

详细的express中间件可以在express官网查看

实现dev-server

devServer可以使用webpack-dev-server然后通过before的回调去做一层拦截，这样也能够实现在响应之前对后台的数据做一些处理。

我这儿选择自己实现一个devServer,在之前使用webpack-dev-server的服务大概需要配置，port, proxy,以及跨域locahost:3002', // 测试代理到服务器的地址 '/api': 'localhost:3003' // 测试代理到服务器的地址 }, root: path.resolve(__dirname) // 项目根目录 }) ); app.listen(config.prd, function () { console.log('访问地址：', `localhost:${config.prd}`); });

具体的一些演示操作，这里也不多讲了（这不是实现mock-plugin的重点），网上也有很多如果通过webpack-dev-middleware和webpack-hot-middleware的教程，唯一的区别是代理部分，网上可能用的是github.com/moxaIce/lo...



  isRequestPath校验是否为api接口请求, 返回 Promise包含isReq布尔值，host请求域名, route请求路由的对象
  isMockFileName是否存在对应的mock文件，返回Promise返回匹配路径或者空字符串
  inspectMockCheck校验模拟文件请求，开关是否开起, 返回布尔值

至于request方法和writeMockFile方法看下面的小结。
以下是我自己画的一个逻辑图，有点丑见谅：



请求代理
代理的作用不用多说，都知道是解决了前端起的服务和直接请求后台的跨域问题。我这儿主要是在中间件内部通过aqvatarius.com/themes/taurus/html/img/example/user/dmitry_b.jpg',
   total: 333,
   completed: 30,
   money: '500'
  }
 };
};

client代码



mounted() {
  axios.get('/app/home/baseInfo', function (res) {
   console.log(`res 23`, res)
  });

  axios({
   url: '/app/login',
   method: 'post',
   headers: {
    // 'Content-Type': 'application/json;charset=UTF-8',
    'a': 'b'
   }
  })
 }

具体效果可以看下图:





前端在访问的时候会将后台响应的数据自动写入到Mock目录下。
结语
感觉在写文章的过程中发现写入mock文件的时候可能使用stream会更好一点，年底了业务需求不太多，避免上班划水，随便想了写一写~ 觉得有用的可以点个收藏+赞~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：方法写

本文共计1129个文字，预计阅读时间需要5分钟。

在项目前端，最近开始使用Mockjs作为mock数据工具。Mockjs实现的数据mock部分，包括自己实现了一个模拟XMLHttpRequest的方法。使用Mockjs拦截请求后，在Chrome的Network中无法显示拦截结果。


写在前面
最近在使用Mockjs作为项目里面mock数据的工具，发现mockjs做的拦截部分是自己实现摸拟了一个XMLHttpRequest的方法做的拦截，使用Mockjs拦截请求后，在chrome的network上无法看到请求(具体mockjs使用方法可以查看他的api，mockjs-api这里我不多做阐述),但为了更加真实的像后台返回数据，我自己使用Node作为中间代理去实现了一个mock-plugin.
express中间件介绍
因为插件相当于是实现了一个express的中间件的方式，所以这里简单对express中间件的使用做一个说明：
express中间件通过app.use(也有app.get,app.post等方法)的方式注册到express的实例某个属性上，将执行函数存放在栈内部，然后在回调执行的时候调用next()方法将执行下一个存在栈内的方法。
这里列举一个示例：


const express = require('express');
const app = express();

app.use(function (req, res, next) {
 console.log('first all use');
 next()
});

app.use(function (req, res, next){
 setTimeout(() => {
  console.log(`two all use`)
  next()
 }, 1000)
});

app.use(function (req, res, next) {
 console.log('end all use')
 next()
});

app.use('/', function (req, res, next) {
 res.end('hello use')
});

app.listen(4000, function () {
 console.log(`起动服务成功！`)
});

通过node执行以上代码后，在浏览器上通过访问locahost:4000可以看到控制台打印：



可以发现在执行的时候先执行了use注册的中间件，然后再执行到get路由的时候，又执行了app.use注册的中间件。
详细的express中间件可以在express官网查看
实现dev-server
devServer可以使用webpack-dev-server然后通过before的回调去做一层拦截，这样也能够实现在响应之前对后台的数据做一些处理。

我这儿选择自己实现一个devServer,在之前使用webpack-dev-server的服务大概需要配置，port, proxy,以及跨域locahost:3002', // 测试代理到服务器的地址
   '/api': 'localhost:3003' // 测试代理到服务器的地址
  },
  root: path.resolve(__dirname) // 项目根目录
 })
);

app.listen(config.prd, function () {
 console.log('访问地址：', `localhost:${config.prd}`);
});

具体的一些演示操作，这里也不多讲了（这不是实现mock-plugin的重点），网上也有很多如果通过webpack-dev-middleware和webpack-hot-middleware的教程，唯一的区别是代理部分，网上可能用的是github.com/moxaIce/lo...


  isRequestPath校验是否为api接口请求, 返回 Promise包含isReq布尔值，host请求域名, route请求路由的对象
  isMockFileName是否存在对应的mock文件，返回Promise返回匹配路径或者空字符串
  inspectMockCheck校验模拟文件请求，开关是否开起, 返回布尔值

至于request方法和writeMockFile方法看下面的小结。
以下是我自己画的一个逻辑图，有点丑见谅：



请求代理
代理的作用不用多说，都知道是解决了前端起的服务和直接请求后台的跨域问题。我这儿主要是在中间件内部通过aqvatarius.com/themes/taurus/html/img/example/user/dmitry_b.jpg',
   total: 333,
   completed: 30,
   money: '500'
  }
 };
};

client代码



mounted() {
  axios.get('/app/home/baseInfo', function (res) {
   console.log(`res 23`, res)
  });

  axios({
   url: '/app/login',
   method: 'post',
   headers: {
    // 'Content-Type': 'application/json;charset=UTF-8',
    'a': 'b'
   }
  })
 }

具体效果可以看下图:





前端在访问的时候会将后台响应的数据自动写入到Mock目录下。
结语
感觉在写文章的过程中发现写入mock文件的时候可能使用stream会更好一点，年底了业务需求不太多，避免上班划水，随便想了写一写~ 觉得有用的可以点个收藏+赞~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：方法写

相关推荐

相关推荐

`相关推荐`

`相关推荐`