使用 faker 和 mocker-api 做前端 mock
2020-07-17 本文已影响0人
VioletJack
前端 mock 现在已经成为了前端开发流程中非常重要的一环,我们来一起优雅的实现 mock 吧~
最简单的 mock 方式
如果是说最简单的 mock 肯定就是直接写静态 JS 文件了。
import mockData from 'mock-data.js'
可能还会加个延时和 Promise:
const data = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(mockData)
}, 2000)
})
但是这些都特别不优雅,因为会 import 一些东西进来,导致业务代码并不纯粹。
使用 node 拦截的 mock 方式
如果前端项目,可以在 node 层做 mock,但同样也会让 node 层的代码引入一些 mock 数据。
使用 mocker-api 来进行 mock
这里推荐使用 mocker-api 来做接口 mock,它会启动一个 node 服务专门用于 mock 交互,另外在 mock 时也不需要费心思去想各种 mock 数据,使用 faker 库可以随机生成各类数据。非常的好用。
下面是 mocker-api 的配置:
const proxy = {
// Priority processing.
// apiMocker(app, path, option)
// This is the option parameter setting for apiMocker
_proxy: {
proxy: {
// Turn a path string such as `/user/:name` into a regular expression.
// https://www.npmjs.com/package/path-to-regexp
'/repos/(.*)': 'https://api.github.com/',
'/:owner/:repo/raw/:ref/(.*)': 'http://127.0.0.1:2018',
'/api/repos/(.*)': 'http://127.0.0.1:3721/'
},
// rewrite target's url path. Object-keys will be used as RegExp to match paths.
// https://github.com/jaywcjlove/mocker-api/issues/62
pathRewrite: {
'^/api/repos/': '/repos/',
},
changeHost: true,
// modify the http-proxy options
httpProxy: {
options: {
ignorePath: true,
},
listeners: {
proxyReq: function (proxyReq, req, res, options) {
console.log('proxyReq');
},
},
},
},
// =====================
// The default GET request.
// https://github.com/jaywcjlove/mocker-api/pull/63
'/api/user': {
id: 1,
username: 'kenny',
sex: 6
},
'GET /api/user': {
id: 1,
username: 'kenny',
sex: 6
},
'GET /api/user/list': [
{
id: 1,
username: 'kenny',
sex: 6
}, {
id: 2,
username: 'kenny',
sex: 6
}
],
'GET /api/:owner/:repo/raw/:ref/(.*)': (req, res) => {
const { owner, repo, ref } = req.params;
// http://localhost:8081/api/admin/webpack-mock-api/raw/master/add/ddd.md
// owner => admin
// repo => webpack-mock-api
// ref => master
// req.params[0] => add/ddd.md
return res.json({
id: 1,
owner, repo, ref,
path: req.params[0]
});
},
'POST /api/login/account': (req, res) => {
const { password, username } = req.body;
if (password === '888888' && username === 'admin') {
return res.json({
status: 'ok',
code: 0,
token: "sdfsdfsdfdsf",
data: {
id: 1,
username: 'kenny',
sex: 6
}
});
} else {
return res.status(403).json({
status: 'error',
code: 403
});
}
},
'DELETE /api/user/:id': (req, res) => {
console.log('---->', req.body)
console.log('---->', req.params.id)
res.send({ status: 'ok', message: '删除成功!' });
}
}
module.exports = proxy;
如果用过 RESTful API 的同学很好理解,GET、POST、PUT、DELETE 方法都有,也可以定义路由参数、拿到网络请求的请求和响应数据。非常的齐全,除了不连数据库,基本上的前后端交互都能实现了。
像我的项目用的是 webpack,所以可以将 mocker-api 配在 webpack 配置中。
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const path = require('path');
+ const apiMocker = require('mocker-api');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
+ devServer: {
+ ...
+ before(app){
+ apiMocker(app, path.resolve('./mocker/index.js'), {
+ proxy: {
+ '/repos/*': 'https://api.github.com/',
+ '/:owner/:repo/raw/:ref/*': 'http://127.0.0.1:2018'
+ },
+ changeHost: true,
+ })
+ }
+ },
plugins: [
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: require.resolve(__dirname, 'dist')
}
};
会在网络请求的前,先走 mocker-api。如果有 mocker 就进行 mocker。
使用 faker 快速生成 mocker 数据
faker 提供了很多函数来生成不同类型的数据。
import faker from 'faker'
var randomName = faker.name.findName(); // Rowan Nikolaus
var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz
var randomCard = faker.helpers.createCard(); // random contact card containing many properties
所以,如果需要造一个长度为 10000 的数组,完全可以这样:
import faker from 'faker'
const list = new Array(10000).fill(true).map(() => faker.name.findName())
最后
最后贴一下两个项目的地址(或者你直接去 npm 网站搜索也行):