给你们带来个好消息，听说过Mockjs那个超火的项目吗？他们弄出了模拟XMLHttpRequest拦截功能，表面上看起来是没有发出请求，但实际上已经深藏功与名地在Chrome的网络界面消失咯！（想要了解他们API咋用，快点去看看这里：https://www.mockjs.com/ 至于他们家API有啥用途，咱们后面再详聊）我构建的这个Node插件就是个黑科技小助手，用来模拟返回真实数据滴。现在，我就要把这套东西和Express中间件结合起来，教你们如何轻松应用到实际工程哈～
没想到？Express的中间件神不知鬼不觉地就塞进Expre s实例的某个地方，用app.use这个办法。把函数偷偷藏起来，等回调到了，就立马调用next()让别的函数上场。这不，只要访问:4000，滚滚而来的消息马上就在控制台刷屏，就跟看魔术似的，是不是超神奇？
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(`起动服务成功！`)
});
说真的，用webpack-dev-server和before回调也行，只要搞定后端数据就OK。不过要注意，我们自编的mock-plugin可能还要处理请求代理的事儿，跟网上的教程不太一样，别怕呀稍微费点儿功夫就能弄好。
告诉你一个小秘密，Mock工具很棒，它能自动把后台请求的结果抄到Mock文件夹里。这下数据校验可方便多！关于校验的玩法你自己琢磨，源代码在那儿等着你！
onst path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackConfig = require('./webpack.dev');
const devMiddleware = require('webpack-dev-middleware');
const hotMiddleware = require('webpack-hot-middleware');
const app = express();
const compiler = webpack(webpackConfig); // webpack开发环境配置
const mockPlugin = require('./mock-plugin');
const config = {
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}`);
});
实际上，想发个http请求的话，用http.request就成了！要是还有点模糊，瞧这儿，有样本代码示范说的够详细嘞。下面这是我写的部分代码，供大家参考参照啦：
// mock 开关
exports.check = function () {
return true;
}
// mock 数据
exports.mockData = function () {
return {
"success": true,
"errorMsg": "",
"data": {
name: 'test'
}
}
}
你知道吗？用KOA咱们能搭建个Node服务器，再展示其中的路由信息与数据内容喔。这样的话，我们做模拟数据就方便多咯！既然没时间给你们贴代码，那就快去瞅一眼那个网站吧
说白了 mocking-plugin简直就是神器级别的东西，真的能帮咱们轻松愉悦完成数据模仿和检验。如果你也是用mock数据搞项目啥的，那就赶紧试试这个插件，肯定会带给你们惊喜哒！
// 获取mock文件的mock数据
const setMockData = (moduleName) => {
const {mockData} = require(moduleName);
return mockData();
};
// 中间件暴露方法
module.exports = function (options) {
const {routes, root} = options;
return async (req, res, next) => {
let {isReq, host} = await valid.isRequestPath(routes, req);
// 不是请求地址直接return掉
if (!isReq) {
next();
return;
}
// 如果存在Mock对应的文件
let filePath = await valid.isMockFileName(root, req.path);
if (filePath) {
// 检验本地mock文件开关是否开启
let check = await valid.inspectMockCheck(filePath);
if (check) {
// 发送本地mock数据
return res.send(setMockData(filePath))
} else {
// 请求结果
let body = await request(host, req, res).catch(proxyRes => {
res.status(proxyRes.statusCode);
});
// 发送请求的结果信息
return res.send(body);
}
} else {
// 请求返回主体
let body = await request(host, req, res).catch(proxyRes => {
res.status(proxyRes.statusCode);
next();
});
if (body) {
// 定义需要写入文件路径
const filePath = path.resolve(root, `mock${req.path}.js`);
// 写入mock文件
writeMockFile(filePath, body);
// 响应返回主体
return res.send(body);
}
}
};
};
大家好今天咱们来聊聊怎样借助Mockjs和mock-plugin自定义模拟和检查数据。希望你们能够从中受益！如果有什么疑问或者建议，欢迎随时在评论区留言哟。别忘了给我点个赞并分享出去！今天来分享一下如何使用Mockjs和mock-plugin自定义模拟和核对数据的方法。这么做能够让我们轻松应对后端数据，还能确保数据准确无误！希望这篇文章对你们有所启发！别忘了和我互动嗨皮，顺便给我点个赞并且分享撒！
/**
* @description 请求方法
*/
const url = require('url');
const http = require('http');
module.exports = function (host, req, res) {
let body = '';
return new Promise((resolve, reject) => {
const parse = url.parse(host);
let proxy = http.request(
{
host: host.hostname,
port: parse.port,
method: req.method,
path: req.path,
headers: req.headers
},
(proxyRes) => {
// 非200字段内直接响应错误 ， 在主逻辑里处理
if (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(`error is`, err);
})
});
proxy.on('error', (e) => {
console.error(`请求报错：${e.message}`)
});
proxy.end()
})
};
评论0