mockjs simple to use

mockjs

Official document

• During the project development process:

  • Front end: complete structure & style according to static page, complete data rendering according to interface document

  • Backend: Development interface

problem:

• The front-end static page has been written, and the back-end interface document has not been developed yet

• mock.js Can be used to solve:

• The static page on the front end has been written, but the interface has not yet come out, you can use mock.js to simulate the backend interface

Role: Generate random data, intercept Ajax requests (simulate the back-end interface)

use:

• Generate random data

1. Download mock

	npm i mockjs --save

2. Use mock

// 导入 Mock
import Mock from 'mockjs'
// 调用方法得到随机数据
 const data = Mock.mock({
    
    
       `list|1-10`: [{
    
    
		'id|+1': 1
	}]
})
// 将数据进行打印
window.console.log(data)

• Intercept asynchronous request
  Mock.mock intercepts ajax request, there are three parameters:
  • The first parameter: the request path to be intercepted
  • The second parameter: the request method to be intercepted
  • The third parameter: the processing logic after interception (it is a function). This function must have a return value , which is the result returned to the asynchronous request

1. Create a new mymockjs.js file in utils

import Mock from 'mockjs'
Mock.mock('/getServeD ata', 'get', function () {
    
    
  // 返回的数据
  const data = Mock.mock({
    
    
    'list|1-10': [
      {
    
    
        'id|+1': 1
      }
    ]
  })
  return data
})

2. import in main.js

	import './utils/mymock'

3. Writing method in component

    async getServeData () {
    
    
      const res = await axios({
    
    
        url: '/getServeData',
        method: 'GET'
      })
      window.console.log(res.data)
    }

Result:

Points to note:

• Once the mock is set to intercept asynchronous requests, the asynchronous requests will be intercepted by the mock in the future, which will not be visible in the browser's network.

Rules for generating data

• Data template
  • Each attribute is composed of 3 parts: attribute name, generation rule, attribute value

 name: 属性名
 rule：生成的规则
 value：属性值
'name|rule': value

• Data placeholder

Mock.mock({
    
    
    name: {
    
    
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})

to sum up:

• mockjsThe effect of : generating random data & intercept the asynchronous request
• In the development process, the back-end interface is not well developed, the front-end can use mock.js to simulate the interface
• If the front end of the pre-simulation using a backend interface to mockjs, until after completion of the back-end interface development, the interface needs to be switched from the rear end to the mock interface, this process is called before the rear end of the FBI
  • Often it is no problem to use mock to generate data to run the project, but once it is switched to the back-end interface, problems may occur. Therefore, the general front-end and back-end joint debugging is the last step before the project goes online.