If you want to get straight into the action please click here at the fastMock line address www.fastmock.site

Fastmock allows you to realistically simulate Ajax requests online without a back-end application. You can use FAtmock for pure front-end demonstrations at the beginning of a project, or FastMock for data emulation during development to separate the front end from the back end. The following interface

  • Simulates a user list https://www.fastmock.site/mock/871b3e736e653b99374b7713e4011f9f/boss/user/list
  • Simulate various special types of data at https://www.fastmock.site/mock/871b3e736e653b99374b7713e4011f9f/boss/user/list2

You can open the above link directly in your browser or make an Ajax request to view the returned data

Before using FastMock, your team implemented data mocks as one or more of the following scenarios

  • Native handwritten data emulation, which generates a lot of mock code in front end code.
  • Ajax interception is implemented using can-fixtures from MockJS or CANJS, and the necessary JSON rules are configured locally.
  • The back end falsifies data at the Controller layer and returns it to the front end.

Either way, developers are required to write code that has nothing to do with the project itself. The first and second methods also require the front-end project to introduce unnecessary JS files locally. Take the mock data below

// Product configuration
  {
    url: '/pms/product/list'.on: true.type: 'get'.resp: Mock.mock({
      'body': {
        'currentPage': 1.'isMore': 0.'pageSize': 15.'resultList|10': [{'productNo': '11111'.'productName|1': ['Product Name 1'.'Product Name 2'.'Product Name 3'.'Product Name 4'.'Product Name 5'].'productType|1': ['1'.'2'.'3'.'4'.'5'].'status|1': ['1'.'2'].'gmtCreate': '@DATETIME("yyyy-MM-dd HH:mm:ss")'.'gmtModified': '@now("yyyy-MM-dd HH:mm:ss")'.'createUserCode': '@name'}].'startIndex': 0.'totalNum': 100.'totalPage': 1
      },
      'reCode': '0000'.'reMsg': 'success'.'success': true})},// Product configuration - Loan material configuration
  {
    url: '/pms/cfgLoanDoc/list'.on: true.resp: Mock.mock({
      'body': {
        'currentPage': 1.'isMore': 0.'pageSize': 15.'resultList|10': [{'loanDocCode|+1': 1.'loanDocName': /[test font]{4,30}/}].'startIndex': 0.'totalNum': 100.'totalPage': 1
      },
      'reCode': '0000'.'reMsg': 'success'.'success': true})}Copy the code

The above code is mockJS example code. See the MockJS documentation for more mockJS references

To do this, we separate the mock layer and create a fence between the front-end and back-end services in the form of an intermediate service. With FastMock, the front-end only needs to change its XHR request address, and the back-end only needs to contract the interface documentation with the front-end before development. Wait until the back-end service development is completed, the front end will replace the XHR request address back for joint test.

Tip: Of course, you can also switch your XHR address by loading different configuration files with different commands in NPM script. I won’t go into details here.

Still not familiar with FastMock? Let’s follow this tutorial to get to know and start using FastMock