Reprint: https://www.cnblogs.com/xieyong25/p/9596550.html

In our development process, there is a situation that the front-end page ui is completed, but there is no interface for joint debugging data. Now we will introduce the use of mock.js to complete the data request. In this way, we only need to change the name of the requested interface after the completion of the background interface in the later stage! The premise is that your simulation field name is consistent with that of the background. Now let's describe a method I used in development. At present, I think it's called simple, not as complicated as the gods (configuring webback and simulating with the express in node)

• Download mockjs package

• cnpm i mockjs -D
  

• Create a mock.js file and introduce mockjs into it

• let Mock = require('mockjs')
  

• Then I start to write the interface. Here I write a post and a get interface

• Mock.mock('http://test/mock.com','post',function(options){
      console.log(options);
      return {"mocktest|4-6":[
          {
              '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
              '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
          }
      ]}
  })
  
  Mock.mock('http://test/getmock.com','get',function(options){
      console.log(options);
      return {"mocktest|4-6":[
          {
              '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
              '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
          }
      ]}
  })
  
  module.exports = Mock

• Now the interface of the mock is completed. How to configure the specific interface data? You can go to the detailed official mock document to simulate the interface fields and data types you need. Then you need to import your mock page into the main.js file

• require('./assets/mock')
  

• Then you can use this interface on your page to get the corresponding data

• getMockMoment(){
        this.$http.post('http://test/mock.com',{
          params:{
            start:1,
            end:10
          }
        }).then(res => {
          console.log(res)
        })
      },
  
  getmocklist(){
        this.$http.get('http://test/getmock.com',{
          data:{
            id:3
          }
        }).then(res => {
          console.log(res)
        })
      }
  

• The above amount corresponds to the transfer of get and post request parameters respectively, which helps you to execute the corresponding add, delete, query and change logic. In the mock interface file, you can get the parameters you passed in and print the option parameter to get the results. All the parameters are in the body. Then you can carry out the logic you need with the corresponding parameters {URL: "http: / / test / getmock. Com", type: "g" ET", body: "{"id":3}"}