node实现mock-plugin中间件的方法
写在前面
最近在使用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()方法将执行下一个存在栈内的方法。
这里列举一个示例：
constexpress=require('express');
constapp=express();
app.use(function(req,res,next){
console.log('firstalluse');
next()
});
app.use(function(req,res,next){
setTimeout(()=>{
console.log(`twoalluse`)
next()
},1000)
});
app.use(function(req,res,next){
console.log('endalluse')
next()
});
app.use('/',function(req,res,next){
res.end('hellouse')
});
app.listen(4000,function(){
console.log(`起动服务成功！`)
});
通过node执行以上代码后，在浏览器上通过访问http://locahost:4000可以看到控制台打印：
可以发现在执行的时候先执行了use注册的中间件，然后再执行到get路由的时候，又执行了app.use注册的中间件。
详细的express中间件可以在express官网查看
实现dev-server
devServer可以使用webpack-dev-server然后通过before的回调去做一层拦截，这样也能够实现在响应之前对后台的数据做一些处理。
我这儿选择自己实现一个devServer,在之前使用webpack-dev-server的服务大概需要配置，port,proxy,以及跨域https等。当然自己实现devServer就没必要实现那么多功能了，正常在开发场景下很多也不一定用得上，这里我主要使用了webpack-dev-middleware和webpack-hot-middleware达到自动编译和热更新的目的,以及可以自己在中间添加express中间件.
贴上代码：
onstpath=require('path');
constexpress=require('express');
constwebpack=require('webpack');
constwebpackConfig=require('./webpack.dev');
constdevMiddleware=require('webpack-dev-middleware');
consthotMiddleware=require('webpack-hot-middleware');
constapp=express();
constcompiler=webpack(webpackConfig);//webpack开发环境配置
constmockPlugin=require('./mock-plugin');
constconfig={
prd:8800
};
//注册webpack-dev-middleware中间件
app.use(
devMiddleware(compiler,{
publicPath:webpackConfig.output.publicPath
})
);
//注册webpack-hot-middleware中间件
app.use(
hotMiddleware(compiler)
);
//注册mockPlugin插件
app.use(
mockPlugin({
routes:{
'/app':'http://locahost:3002',//测试代理到服务器的地址
'/api':'http://localhost:3003'//测试代理到服务器的地址
},
root:path.resolve(__dirname)//项目根目录
})
);
app.listen(config.prd,function(){
console.log('访问地址：',`http://localhost:${config.prd}`);
});
具体的一些演示操作，这里也不多讲了（这不是实现mock-plugin的重点），网上也有很多如果通过webpack-dev-middleware和webpack-hot-middleware的教程，唯一的区别是代理部分，网上可能用的是http-proxy之类已现有的工具，因为我们这儿需要在请求代理中间还需要处理一层，所以这儿我们自己实现mockPlugin注册进去。
摸拟mock文件
因为mock工具包含了一个请求后台的结果自动写入到Mock目录下。所以这里将目录层级设置为与请求路径保持一致：
api接口：/app/home/baseInfo=>目录：mock\app\home\baseInfo.js
对应baseInfo.js模板:
//mock开关
exports.check=function(){
returntrue;
}
//mock数据
exports.mockData=function(){
return{
"success":true,
"errorMsg":"",
"data":{
name:'test'
}
}
}
当check为true时对就请求将会取mockData的数据。
主逻辑实现
mock-plugin主要暴露一个高阶函数，第一层为请求代理配置，返回的函数的参数与app.get('/')的回调参数一致，不描述细节，大概输出主要的逻辑。
//获取mock文件的mock数据
constsetMockData=(moduleName)=>{
const{mockData}=require(moduleName);
returnmockData();
};
//中间件暴露方法
module.exports=function(options){
const{routes,root}=options;
returnasync(req,res,next)=>{
let{isReq,host}=awaitvalid.isRequestPath(routes,req);
//不是请求地址直接return掉
if(!isReq){
next();
return;
}
//如果存在Mock对应的文件
letfilePath=awaitvalid.isMockFileName(root,req.path);
if(filePath){
//检验本地mock文件开关是否开启
letcheck=awaitvalid.inspectMockCheck(filePath);
if(check){
//发送本地mock数据
returnres.send(setMockData(filePath))
}else{
//请求结果
letbody=awaitrequest(host,req,res).catch(proxyRes=>{
res.status(proxyRes.statusCode);
});
//发送请求的结果信息
returnres.send(body);
}
}else{
//请求返回主体
letbody=awaitrequest(host,req,res).catch(proxyRes=>{
res.status(proxyRes.statusCode);
next();
});
if(body){
//定义需要写入文件路径
constfilePath=path.resolve(root,`mock${req.path}.js`);
//写入mock文件
writeMockFile(filePath,body);
//响应返回主体
returnres.send(body);
}
}
};
};
以下是一些校验方法，详细代码就不贴了，具体源码可查看：https://github.com/moxaIce/lo...
- isRequestPath校验是否为api接口请求,返回Promise包含isReq布尔值，host请求域名,route请求路由的对象
- isMockFileName是否存在对应的mock文件，返回Promise返回匹配路径或者空字符串
- inspectMockCheck校验模拟文件请求，开关是否开起,返回布尔值
至于request方法和writeMockFile方法看下面的小结。
以下是我自己画的一个逻辑图，有点丑见谅：
请求代理
代理的作用不用多说，都知道是解决了前端起的服务和直接请求后台的跨域问题。我这儿主要是在中间件内部通过http.request方法发起一个http请求，对于http.request方法的使用可以看这里,里面也有比较详细的示例，我这儿贴上我写的代码：
/**
*@description请求方法
*/
consturl=require('url');
consthttp=require('http');
module.exports=function(host,req,res){
letbody='';
returnnewPromise((resolve,reject)=>{
constparse=url.parse(host);
letproxy=http.request(
{
host:host.hostname,
port:parse.port,
method:req.method,
path:req.path,
headers:req.headers
},
(proxyRes)=>{
//非200字段内直接响应错误，在主逻辑里处理
if(proxyRes.statusCode<200||proxyRes.statusCode>300){
reject(proxyRes)
}
proxyRes.on('data',(chunk)=>{
body+=chunk.toString();
}).on('end',()=>{
try{
resolve(JSON.parse(body));
}catch(e){
//将响应结果返回，在主文件做异常回调
reject(proxyRes)
}
}).on('error',(err)=>{
console.log(`erroris`,err);
})
});
proxy.on('error',(e)=>{
console.error(`请求报错：${e.message}`)
});
proxy.end()
})
};
代理的实现比较简单，主要通过外层传入host和requset,response在内部用url解析得到ip然后配置request的options,通过监听data与end事件将得到的主体报文resolve出去，以及中间对非200段内的响应处理。
文件写入
通过中间传options传入的root，可以得到完整的mock路径path.resolve(__dirname,mock${req.path}.js)。传入到写入mock文件方法里
module.exports=asyncfunction(filePath,body){
awaitdirExists(path.dirname(filePath));
fs.writeFile(filePath,echoTpl(JSON.stringify(body)),function(err){
if(err){
console.log(`写入文件失败`)
}
});
}
定义mockjs模板
module.exports=asyncfunction(filePath,body){
awaitdirExists(path.dirname(filePath));
fs.writeFile(filePath,echoTpl(JSON.stringify(body)),function(err){
if(err){
console.log(`写入文件失败`)
}
});
}
dirExists通过递归的方式写入文件目录
module.exports=asyncfunction(filePath,body){
awaitdirExists(path.dirname(filePath));
fs.writeFile(filePath,echoTpl(JSON.stringify(body)),function(err){
if(err){
console.log(`写入文件失败`)
}
});
}
效果演示
使用koa起一个node服务并且暴露如下路由和其中的数据,具体代码可以看这儿，我这儿只贴上了关键代码
服务端代码：
router.get('/app/home/baseInfo',user_controller.baseInfo)
router.post('/app/login',user_controller.login)
constlogin=async(ctx,next)=>{
ctx.body={
success:true,
message:'',
code:0,
data:{
a:1,
b:'2'
}
}
};
constbaseInfo=async(ctx,next)=>{
ctx.body={
success:true,
errorMsg:'',
data:{
avatar:'http://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(`res23`,res)
});
axios({
url:'/app/login',
method:'post',
headers:{
//'Content-Type':'application/json;charset=UTF-8',
'a':'b'
}
})
}
具体效果可以看下图:
结语
感觉在写文章的过程中发现写入mock文件的时候可能使用stream会更好一点，年底了业务需求不太多，避免上班划水，随便想了写一写~觉得有用的可以点个收藏+赞~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。