H5 Mock Server summary

Keywords: mockjs Webpack JSON github

What is Mock Server data?

In short, if the Api (that is, the server interface) is not written, the front-end cannot be debugged. Mock Server is a service used to simulate the Api interface to return JSON data!

Here are three kinds of mock processing, and there are many third-party ones, such as (jsonServer + mockJS, webpack + lorem Ipsum, etc.):


mockJS official website perhaps Mock

==Note: so far, mockJS does not support fetch, but it can be used with webpack==

Based on the fact that there is no packaging tool (webpack/gulp/node, etc.), pure static H5 is used. It is recommended to:

<script src="http://mockjs.com/dist/mock.js"></script>

mockJS is a tool for intercepting ajax requests and generating random data responses!

A simple demo is attached below for easy understanding: gitHub

<!DOCTYPE html>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <title>MockJs test</title>
            #write {
                width: 50%;
                height: 100%;
                min-height: 500px;

        <h1>MockJS Use test</h1>
        <p>The results are as follows:</p>
        <p><textarea id="write"></textarea></p>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        var obj = {
                'aa': '11',
                'bb': '22',
                'cc': '33',
                'dd': '44'
            d = document,
            g = "querySelector";
        // Mock response template
        Mock.mock('http://AAA.com', {
            "user|1-3": [{ // Randomly generate 1 to 3 array elements
                'name': '@cname', // Chinese name
                'id|+1': 88, // The attribute value is automatically increased by 1, and the initial value is 88
                'age|18-28': 0, // Random integer from 18 to 28, 0 is only used to determine the type
                'birthday': '@date("yyyy-MM-dd")', // date
                'city': '@city(true)', // Chinese cities
                'color': '@color', // Hex color
                'isMale|1': true, // Boolean value
                'isFat|1-2': true, // The probability of true is 1 / 3
                'fromObj|2': obj, // Get 2 properties randomly from obj object
                'fromObj2|1-3': obj, // Randomly obtain 1 to 3 attributes from obj object
                'brother|1': ['jack', 'jim'], // Randomly select 1 element
                'sister|+1': ['jack', 'jim', 'lily'], // Select elements in order in array as the result
                'friends|2': ['jack', 'jim'] // Repeat the property value twice to generate a new array
            }, {
                'gf': '@cname'

            url: 'http://AAA.com',
            type: 'get',
            dataType: 'json'
        }).done(function(data, status, xhr) {
            var str = JSON.stringify(data, null, 4)
            d[g]("#write").innerHTML = str;


2. Introduction to marmot

marmot official

- Node.js 4.0+
- JDK 7+

Operation and use are divided into several steps:

1. Installation

npm install -g marmot

sudo npm install -g marmot

2. Initialization

marmot init

3. Start service

//Start service, default service 8080
marmot server start
//Specify port to start service
marmot server start -p 8090

//Shut down service
marmot server stop
//Specify the port to shut down the service
marmot server stop -p 8090

//Remove service
marmot server remove
//Remove the specified service
marmot server remove -p 8090

Successfully started the service as follows:

Next, write the router/mian.xml file. There are too many files. See gitHub

After the operation is successful, you can view the page effect locally:

4. Last look at the startup service

marmot server list

3. Webpack devServer using

It mainly uses Webpack devServer proxy to process

devServer: {
    inline: true, //Set to true, the code changes, and the browser refreshes.
    open: true, //: open URL in default browser (webpack dev server version > 2.0)
    port: config.server.port,
    compress: true, //Using gzip compression
    host: ip.address(), //The ip address can also be set to localhost,
    progress: true, //Make the compiled output progress and color
    historyApiFallback: true, //Fallback: supports historical API.
    contentBase: "./", //Directory of the page loaded by the local server
    proxy: {
        'api/**': {
            target: config.server.target, //Cross domain Ip address
            pathRewrite: {"^/api" : ""},
            secure: false
        '/mock/**': {
            target: `http://${ip.address()}:${config.server.port}/`,
            pathRewrite: {"^/mock" : ""},
            changeOrigin: true,
            secure: false



axios.post('/news/index', 'type=top&key=123456')
.then(res => {
    that.newsListShow = res.data.articles;

In particular, the target of the proxy here points to the address itself, which is the local mock of the request

All demo s: GItHub

Posted by digitalecartoons on Sat, 02 May 2020 05:10:07 -0700