background

In everyday development, there are often back-end interfaces such as front ends, and mock data plays a very important role in this process. Most of the time, a lot of regular mock methods are implemented by directly simulating the entire data in a variety of formats, such as this example:

export default {
    'POST /xxx/xxx': {
        data: {
            // ...
        },
        code: 200.msg: 'success'}}Copy the code

However, more often than not, this approach is only suitable for development scenarios. In some iterative projects, mock data can be very inconvenient to write because real data may be used, and some real data may be very long, requiring only a small amount of mock. So I started this project, mainly to facilitate the iterative needs of my daily work. This project is published on NPM and can be downloaded. The documentation is described below.

The installation

npm i jsx-mock-server -g
Copy the code

Global installation

Directions for use

Run the following command to obtain help

mock-server --help
Copy the code

return

Usage: mock-server [options] command: mock-server setting desc: open setting.json mock-server mock desc: Usage: mock-server [options] command: mock-server setting desc: open setting.json mock-server mock desc: open mock file mock-server start desc: Start mock Server Options: -h, --help Displays help information. [Boolean] -v, --version Displays the version number. [Boolean] Example: mock-server startCopy the code

mock-server setting

Rewrite the setting configuration file

{
    "server": [ // Use an array of services. Multiple services can be enabled at the same time
        {
            "name": "test".// Service name, corresponding to the service name in server.json
            "port": 8088.// Local service port number
            "mockfile": "test".// Mock file name. If not, the service name is used by default
            "proxyUrl": "https://xxx.xx.xx.xxx:443" // Proxy server address}}]Copy the code

Multiple services can be enabled at the same time to be applied to scenarios where multiple projects are mocked at the same time

mock-server mock

Open the Mock directory, where the file name corresponds to mockFile in Setting

-mock
 -test.jsx
Copy the code

The mockFile syntax is described in detail below

mock-server start

Enabling mock Services

Mockfile file, using JSX syntax

The test.jsx file in our example

// React
const React = require('react');

// Export the mock data
module.exports = <mock>
    <post>
        <prefix name='trade'>
            <replace>{ data }</replace>
            <path name='queryTrade'>
                <target keys={ ['data', 'list', 0] }>
                    <merge>{ data }</merge>
                </target>
            </path>
        </prefix>
    </post>
    <get></get>
</mock>
Copy the code

  • Mock tag, which declares to start mock data

  • Post tag, which states that everything below here is a POST request, and corresponding to that is a GET tag

  • The prefix tag, which indicates the prefix of a request

    • The name property, which represents the value of the prefix

  • The path label indicates that the address of the NTH level interface ends here

    • Tip: You can overlay the path and prefix values, like this: or

  • Replace tag, which represents the return value of the entire replace current interface

  • The merge tag, which overwrites and merges the return value of the current interface, as in object. assign.

  • The target tag, which indicates that the keys field names are selected and the corresponding values are replaced or merged

    • For example, the interface returns data
      {
      data: {
          list: [{test: test
                  // ...}}}]Copy the code

    If I only want replace to return data.list[0] from the data, and all other values remain unchanged, I can specify keys as [‘data’, ‘list’, 0].

  • More tags are being considered…

The XML in the example will be parsed as:

[{method: 'POST'.url: '/trade'.type: 'replace'.data: data
    },
    {
        method: 'POST'.url: '/trade/queryTrade'.target: true.targetKeys: ['data'.'list'.0].type: 'merge'.data: data
    },
]
Copy the code

Some wrong way of writing it

For less serious errors, compatibility is handled

<post test='test'>
    <prefix name='print'>
        <! If multiple data exist in the same hierarchy, only the first data takes effect.
        <replace>{ data1 }</replace>
        <! -- This is ignored -->
        <replace>{ data2 }</replace>
        <! -- This tag is ignored when there is no valid data item in it -->
        <prefix name='center1'></prefix>
    </prefix>
</post>
Copy the code

The principle is briefly

The principle of this project is not very complicated, that is, the interface of the front end project first visits our local proxy server, and then the proxy service forwards to the back end, which processes the returned results and then returns them to the front end project.