Using the MOCKJS analog interface to return data in Vue projects

Mock.js is a simulation data generator, which can intercept AJAX requests, directly simulate the return data, so that the front and back end as long as the contract data format, the frontend does not need to rely on the backend interface, you can directly use the simulated data. the tutorial on online mock-up is also more, but most of the look is rather vague. In fact, it's very simple to use, here we introduce the use of MOCKJS in the Vue project, and implement the development and production configuration. First, installation

CNPM Install--save-dev MOCKJS

second, the introduction

In order to use mocks only in the development environment and automatically without mocks when packaged into a production environment, we can do a configuration in env

 // dev.env  Module.exports = merge (Prodenv, {node_env:   "   "development"   "  "  true   '   // prod.env  module.exports = {node_env:  "   "production"   " Span style= "COLOR: #000000", MOCK:   " false   " ,}   

And then main.js inside to introduce MOCKJS.

Process.env.MOCK && require ('@/mock')// indicates when the configuration MOCK is True To introduce a mock, so the production environment does not introduce mock

iii. directory and file creationTo create a mock directory in the SRC directory and add the Index.js file, it is recommended to use a separate mock file for each type of API. For example, the following API file corresponds to a mock file

Mock/index.js

// Import all the mock files into require ('./inspection')//  Here you can do some general configuration  const Mock = require ("mockjs")//  Set timeout for all AJAX requests, analog network transfer time mock.setup ({    0)

Iv. intercepting Ajax requests and configuring mock data

ConstMock = require ("Mockjs")ConstRandom =Mock.random; Mock.mock ('/api/load','Get',{    'xdata|100':['@datetime'],    'series|2':[{        'name':'@NAME',        'type':' Line',        'Smooth':true,        'data|100':['@integer (1,600)']    }]})

There are two ways to intercept an AJAX request using a mock:

Mock.mock (Rurl, Rtype, template) Mock.mock (rurl, Rtype, function (options))

rurl: Represents the URL that needs to be intercepted, either a URL string or a URL regular. (In the Vue project, it is recommended that the URL of the API be managed uniformly in the apipath and then used in the mock with the same reference that was used when the request was made)Rtype: Represents the type of Ajax request that needs to be intercepted. such as GET, POST, PUT, DELETE, and so on. templates: Represents a data template, which can be an object or a string. If you need to write the data to death, you can write a normal object directly. If you want the mock to be randomly generated, you can customize it according to the rules of the mock template. For example:

' data|1-10 ' : [{}]} means the build generates data containing 1 to 10 empty objects '@EMAIL'  means randomly generating an EMAIL address '@ CNAME' indicates random generation of a Chinese name

and then the function, like the following

Mock.mock ('/api/redo','Get', function (options) {Let series=[];  for(Let n=1;n< -; n++) {Let _obj={}; _obj.name='05-'+ (n <=9?'0'+( N); _obj.type=' Line'; _obj.data=[];  for(Let i=0;i< -; i++) {Let _d= Random.integer (1,Ten) * (i%2==0?Ten: -);        _obj.data.push (_d);    } series.push (_obj); }    returnseries;})

To this basic application can be, more detailed use, please see the official documents.

Using the MOCKJS analog interface to return data in Vue projects