This is the third day of my participation in Gwen Challenge

The Mock data

With Mock, the front and back end personnel only need to define the interface documents to start working in parallel without affecting each other, and only interact in the final tuning phase. If there is interface coupling between the back ends, it can be Mock as well; Mocks can also be used if the dependent interface is not ready during testing. You don’t have one team waiting for the other. In this way, the development self-test stage can be carried out as early as possible, so as to find defects in advance of the time, is conducive to the guarantee of the whole product quality and progress.

If the simulated data is edited into JSON data or fragmentary JS scripts, the data can be retrieved through requests, processed by business logic, and rendered to dom. After all, it was a hassle, and the model was abandoned for reasons such as follow-up workload.

Ideal for front and back end development

  • After demand decomposition, the front and back sides define the interface API together, including: request URL (project prefix + specific interface name), request mode, request parameters, data response;

  • According to the interface agreement, the front-end r&d personnel simulated the request to return the corresponding data to complete the corresponding interaction;

  • Background personnel according to the interface agreement, complete the corresponding API, and complete the corresponding self-test;

  • After the background personnel delivers the interface API, the front-end personnel directly modify the interface project prefix, switch to the corresponding environment, and then enter the project test.

Mock data tool

  • DOClever
  • mock.js
  • Easy Mock
  • YApi

Mock data development process

Front-end define interface -> complete static page -> complete UI interaction -> Connect to real interface -> page/logic test -> online deployment

DOClever

The installation

Docker-based native deployments are available on DOClever Github, and docker-compose is recommended for one-click deployment.

I’m not going to use Docker’s recommendation to take a look at a blog I wrote, which is full and easy to read.

www.xn2001.com/archives/54…

version: '2'
services:
  DOClever:
    image: lw96/doclever
    restart: always
    container_name: 'DOClever'
    ports:
      - 30000: 10000
    volumes:
      - /docker/doclever/file:/root/DOClever/data/file
      - /docker/doclever/img:/root/DOClever/data/img
      - /docker/doclever/tmp:/root/DOClever/data/tmp
    environment:
      - DB_HOST=mongodb://mongo:27017/DOClever
      - PORT=10000
    links:
      - mongo:mongo

  mongo:
    image: mongo:latest
    restart: always
    container_name: 'mongodb'
    volumes:
      - /docker/mongodb/datadir:/data/db
Copy the code

Create docker-comemage. yml as shown above

Docker-compose up -d: docker-compose up -d: docker-compose up -d

Go to http://192.168.160.145:30000/

The default user name and password of the administrator are both DOClever

Register an account and log in to start using it.

use

Click Add Project, create a new project, create a group, and create an interface

  • Name: @code(query[‘name’]) can fetch a value from query

  • Date: @date Random generation time

  • Number: @num(1,100) Indicates that the number from 1 to 100 is randomly generated

Click Run in the upper right corner to test the interface you just wrote.

Click Settings, expand Mock, download Net.js, and follow the documentation.

Simply copy the commands from the example and run them in CMD. You can see the prompt listening 36742, this time you can use postman and other tools to request the port interface. An online version of the tool, Apizza, is recommended

The Mock Server address: http://192.168.160.145:30000/mock/600313eb55117d000cc31a10 Mock Js file: Net.js (this is the same file as the Intranet test, you need to install the Node environment, install the package click download: Window MAC) Run net.js locally with Node, add the mock Server address and the root address of the real address you need to request. When your interface document is in the finished state, net.js does not request the mock Server address but the real address (example: The node net. Js http://localhost:8081 http://192.168.160.145:30000/mock/600313eb55117d000cc31a10 Then replace the root address of your development project with localhost:36742 to start your Mock trip!

When you modify the interface, you can synchronize the update without doing anything.

When you set the interface to development completed, the access interface will request the actual address, such as http://localhost:8081 we set above

Mock.js

Github documentation

A lightweight mock.js that can be used faster than DOClever. If DOClever is a hassle, then mock. js is the way to go.

Use way, can use NPM installation, here I directly use CDN introduced.

<script src="http://mockjs.com/dist/mock.js"></script>
<script>
  var mock = Mock.mock({
    "list|1-8": [{"id|+1": 1.name: "@cname".age: "@ integer 30 (1)",}]});console.log(JSON.stringify(mock, null.2));
Copy the code

  • List | 1-8: represent data name list, random article can have 1-8

  • Id | + 1 “: id since

  • @cname: Indicates a random name

  • @ INTEGER (1,30) : the value is a random integer ranging from 1 to 30

Results:

"list": [{"id": 1."name": "Yan Wei"."age": 8
    },
    {
      "id": 2."name": "Laurie"."age": 20
    },
    {
      "id": 3."name": "Lu Lei"."age": 14
    },
    {
      "id": 4."name": "Kang Min"."age": 11}}]Copy the code

About the mock.js syntax specification

The cool thing is that mock.js can intercept requests for us.

Complete sample code

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>

    <button type="button" id="app">Send the request</button>

    <script>
      $("#app").click(function () {
        $.ajax({
          url: "https://api.xn2001.com/getList".type: "get".dataType: "json",
        }).done(function (data, status, xhr) {
          console.log(data, null.2);
        });
        / / intercept url
        const mock = Mock.mock("https://api.xn2001.com/getList", {
          "user|1-5": [{"id|+1": 1.name: "@cname".birthday: "@date".city: "@city",}]}); });</script>
  </body>
</html>
Copy the code

Intercepting the real path we originally requested and returning mock data greatly improved our development efficiency.