Skip to content
A dynamic "mock + proxy" server and client mocker, Mock ajax datas, or proxy to real server, or mock browser preview data。
JavaScript Batchfile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build client, readme Jul 25, 2019
demo for linux test Jul 25, 2019
src client, readme Jul 25, 2019
ssl ssl Dec 2, 2018
test for linux test Jul 25, 2019
.eslintrc.js client, readme Jul 25, 2019
.npmignore 1.2.2-beta2 Jul 14, 2019
README.md client, readme Jul 25, 2019
babel.config.js debug Jul 14, 2019
package.json client, readme Jul 25, 2019
run.js add Jun 5, 2018
start.bat No commit message Sep 5, 2017

README.md

dynamic-mocker

A dynamic "mock + proxy" server and client mocker.

Please see the sample usage source code.

image image

Live demos

git clone https://github.com/hzsrc/dynamic-mocker.git
cd dynamic-mocker
npm install

# mock & proxy
npm run mock

#proxy:  http://localhost:8037 => https://localhost
npm run proxy80

#static
npm run static

Usage

1. install

npm i dynamic-mocker -D

or

yarn add dynamic-mocker --dev

2. configuration

Make a mock directory, and copy the mock-config.js into it.
Make a root directory as the root of mock files.
--mock
----root
----mock-config.js
--package.json

3. configuration

sample:

const config = {
	mockEnabled: true,
	mockPath: ['mock/root', 'mock/root-old'], //模拟文件根目录
	proxyTarget: 'http://your-backend-server.com', //后台接口服务地址(代理目标),为空表示不代理。可以是个函数:function(urlPart){} 
	isHttps: false, //是否https
	port: 8085, //端口
	checkPath: function (urlPath) { //urlPath校验函数,返回true表示需要进行mock处理,为false直接走代理
		return true
	},
	beforeResponse: function (respData, req) { //数据返回前的回调钩子,respData包含status、headers、body属性
		respData.headers['access-control-allow-origin'] = req.headers['origin'] || req.headers['Origin'] || '';
        respData.headers['access-control-allow-credentials'] = 'true';
        respData.headers['access-control-allow-headers'] = req.headers['access-control-request-headers'] || req.headers['Access-Control-Request-Headers'] || '';
        respData.headers['access-control-max-age'] = '6000';
        respData.headers['access-control-allow-methods'] = 'PUT,POST,GET,DELETE,PATCH,OPTIONS';
    
        respData.headers['P3P'] = 'CP="CAO PSA OUR"';
	},
	// samePreview: false,
	logData: true,
	// genClientJs: '../src/utils/mockClient.js',
}
module.exports = config;

Edit the mock-config.js options:

mockEnabled

true - to enable all mocks

mockPath

the root path[s] of mock files. String or array of string.

proxyTarget

If there is no mock data file for a url request, the http pipe will be reversely proxied to this target server. If this is empty, then won't proxy. string or Function(urlPart)

isHttps

true - for https

port

Port of the mock server

checkPath

A function to check a url which needs to mock or not. eg:

function (urlPath) {
    return urlPath.match(/\/api\//);
}

beforeResponse

A function to do customized job before responding.respData contains [status、headers、body] properties. eg:

function (respData, req) {
        respData.headers['access-control-allow-origin'] = req.headers['origin'] || req.headers['Origin'] || '';
        respData.headers['access-control-allow-credentials'] = 'true';
        respData.headers['access-control-allow-headers'] = req.headers['access-control-request-headers'] || req.headers['Access-Control-Request-Headers'] || '';
        respData.headers['access-control-max-age'] = '6000';
        respData.headers['access-control-allow-methods'] = 'PUT,POST,GET,DELETE,PATCH,OPTIONS';
    
        respData.headers['P3P'] = 'CP="CAO PSA OUR"';
}

genClientJs

String type. To generate a js file for client preview, like: '../client_preview/src/utils/mockClient.js'. Then you can import this js for client preview, which means run your webpages without backend apis, just with mock datas.

samePreview

default: false, ignore all disabled and mockEnabled option while client preview. true - do not ignore

logData

default: false. true - print mock data while client preview.

4. Add script to package.json

"scripts": {
    ...
    "mock": node -e "require('dynamic-mocker').start('./mock/mock-config.js')"
}

5. Start mock server

npm run mock

6. Create js files for dynamic-mocker in the mock/root directory

Simple js file:

// dynamic-mocker use json eval mode, but not JSON.parse
module.exports = {
	disabled: 0,
    delay: 1000, // delay ms to response
	status: 200,
	"headers": {
		"server": "dynamic-mocker",
		"set-cookie": "foo=bar; path=/",
		"cache-control": "no-cache"
	},
	"body": {
		"status": 0,
		"obj": {
			"cfg": {
				"o": {
					"buttons": [
						{
							"id": 1,
							"title": "按钮1"
						},
						{
							"id": 2,
							"title": "按钮2"
						}
					]
				}
			}
		},
		"msg": ""
	}
}

Js file with functions:

module.exports = {
    disabled: 0,
    body: function (query, post, header, request) {
        //output log in the node console
        console.log('post data: ' + post)

        //use queryString in url
        //use key word 'this', which point to the yaml root object
        if (query.id == '1') return ok(this.case_1);

        //use http postData
        if (post && post.type == 'test') return ok(this.case_2);

        //use http headers
        if (header["content-type"] == "text/txt") return ok("Hello,txt")

        //use request info
        return ok({default: 'no data', url: request.url})

        function ok(d) {
            return {status: 0, data: d}
        }
    },
    case_1: {
        id: 1,
        b: 2
    },
    case_2: {
        a: 3,
        b: "test"
    }
}

Another js:

module.exports = {
    disabled: 0,
    status: 200,
    headers: function (query, post, header, request) {
        var r = {}
        if (post.rememberPwd && this.checkFn(post, header)) {
            process._cookiev = 'a=b' + (+new Date);
            r['set-cookie'] = process._cookiev + '; Max-Age=30000; path=/';
        }
        else {
            process._cookiev = '';
            r['set-cookie'] = process._cookiev + '; Max-Age=0; path=/';
        }
        return r;
    },
    body: function (query, post, header, request) {
        return {
            status: this.checkFn(post, header) ? 0 : 1,
            data: '', returnValue: 'token-xxxxxxx',
            msg: '用户名密码错误'
        }
    },
    checkFn: function (post, header) {
        if (post.password == '123456' || post.password == '') return true;

        if (post.useRemembered && post.password == '_fakepwd') {
            var cookie = header['Cookie'] || header['cookie'];
            return cookie && cookie.indexOf(process._cookiev) > -1
        }
    }
}

Mock client

Mock data to run app in browser, using the same mock-data files.

Usage

Once your run dynamic-mocker server in webpack or nodejs, you will get a mockClient.js in the same directory of the dynamic-mocker config file.

- mock
-- root
-- mock-config.js
-- mockClient.js

You only need to import this js file into your app.js entry file, then all the ajax request datas will be mocked if necessary.
(You can import this module with a condition such as a command argument, by js-conditional-compile-loader)

/* IFTRUE_isDemo */
import '../../mock/mockClient'
/* FITRUE_isDemo */

And you can toggle the ajax mode, by mock data or real api data.

import dMockClient from 'dynamic-mocker/lib/client.js'

if (needMock) {
    dMockClient.setup()
} else {
    dMockClient.cancel()
}
You can’t perform that action at this time.