mocker-api 为 REST API 创建模拟 API。 当您尝试在没有实际 REST API 服务器的情况下测试应用程序时,它会很有用。
特征:
🔥内置支持热Mocker文件替换。 🚀通过JSON快速轻松地配置API。 🌱模拟API代理变得简单。 💥可以独立使用,无需依赖webpack和webpack-dev-server。
mkdir mocker-app && cd mocker-app # Create a mocker configuration file based on rules touch api.js # Global install dependent. npm install mocker-api -g # Run server mocker ./api.js
你可以将 package.json 配置作为当前项目依赖项。
npm install mocker-api --save-dev
mocker-api 在开发模式支持模拟数据, 将入口文件放入 mocker/index.js.
mocker-api
mocker/index.js
您可以通过添加 httpProxy 配置来修改 http-proxy 选项并添加事件侦听器
const proxy = { // Priority processing. // apiMocker(app, path, option) // This is the option parameter setting for apiMocker _proxy: { proxy: { '/repos/(.*)': 'https://api.github.com/', '/:owner/:repo/raw/:ref/(.*)': 'http://127.0.0.1:2018' }, changeHost: true, // modify the http-proxy options httpProxy: { options: { ignorePath: true, }, listeners: { proxyReq: function (proxyReq, req, res, options) { console.log('proxyReq'); }, }, }, }, // ===================== '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;
proxy
{}
changeHost
httpProxy
bodyParserJSON
bodyParserText
bodyParserRaw
bodyParserUrlencoded
bodyParserConf
bodyParserConf : {'text/plain': 'text','text/html': 'text'}
Content-Type='text/plain' and Content-Type='text/html'
bodyParser.text
⚠️ 没有通配符 * - 使用参数 (.*), suport v1.7.3+
*
(.*)
v1.7.3+
你可以使用工具自带方法增强模拟. #17
const delay = require('mocker-api/utils/delay'); const noProxy = process.env.NO_PROXY === 'true'; const proxy = { 'GET /api/user': { id: 1, username: 'kenny', sex: 6 }, // ... } module.exports = (noProxy ? {} : delay(proxy, 1000));
apiMocker(app, mocker[,proxy])
多入口mocker 文件监听
mocker
const mockerFile = ['./mock/index.js']; // or // const mockerFile = './mock/index.js'; apiMocker(app, mockerFile, proxy)
Base example
⚠️ Not dependent on webpack and webpack-dev-server.
# Global install dependent. npm install mocker-api -g # Run server mocker ./mocker/index.js
Or you can put it the package.json config as a current project dependency.
package.json
{ "name": "base-example", "scripts": { + "api": "mocker ./mocker" }, "devDependencies": { + "mocker-api": "^1.6.4" }, "license": "MIT" }
Express example
const express = require('express'); + const path = require('path'); + const apiMocker = require('mocker-api'); const app = express(); + apiMocker(app, path.resolve('./mocker/index.js')) app.listen(8080);
webpack example
To use api mocker on your Webpack projects, simply add a setup options to your webpack-dev- server options:
Change your config file to tell the dev server where to look for files: webpack.config.js.
webpack.config.js
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') } };
Must have a file suffix! For example: ./mocker/index.js.
./mocker/index.js
Let’s add a script to easily run the dev server as well: package.json
{ "name": "development", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "start": "webpack-dev-server --open", "build": "webpack" }, "keywords": [], "author": "", "license": "MIT", "devDependencies": { .... } }
模拟API代理简单模式。
{ before(app){ + apiMocker(app, path.resolve('./mocker/index.js'), { + proxy: { + '/repos/*': 'https://api.github.com/', + }, + changeHost: true, + }) } }