Mockjs and its module syntax

1. What is Mockjs?

Mock.js Is a simulation data generator, designed to help the front-end Sieger independent of the back-end development, to help write unit tests. The following simulation functions are provided:
Generate simulation data according to data template
Simulate Ajax requests, generate and return simulation data
Generating simulation data based on HTML template

2. What does Mockjs do?

With the development of Internet project development, front-end and back-end separation has become the industry standard way of using internet project development. The separation of front end and back end will lay a solid foundation for the future large-scale distributed architecture, micro service architecture and multi-end services. At this time, mockjs is used. Mockjs can generate simulation data interface through certain rules (API documents) through simulation data generator, and provide it to front-end personnel for testing, so that front-end personnel do not need to wait
Test after the back-end interface is developed, and do not rely on the back-end interface for development.

3. Installation Mock.js

Create a folder, enter the folder, open the command window, and use npm to install mock.js

npm install mockjs

And then you'll find a node_modules folder and a package-lock.json file

touch demo.js Create a JS file
const Mock = require('mockjs') to introduce mockjs in the file
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
//Stringify (data, data conversion function, number of indented spaces)
console.log(JSON.stringify(data, null, 2))
Execute node on the command line demo.js

4. Module syntax

4.1 data template definition specification

Each attribute in the data template consists of three parts: attribute name, generation rule and attribute value

be careful:

Property names and build rules are separated by a vertical bar.

'name|rule': value

Generation rules are optional. There are seven formats for generation rules:

'name|min-max': value

'name|count': value

'name|min-max.dmin-dmax': value

'name|min-max.dcount': value

'name|count.dmin-dmax': value

'name|count.dcount': value

'name|+step': value

The meaning of the generation rule depends on the type of property value.
Property values can contain @ placeholders.
The property value specifies the initial and type of the final value.

example: demo.js

// Using Mock
const Mock = require('mockjs')
const data = Mock.mock({
    // The value of property result is an array containing random elements between 1 and 5
    'result|1-5': [{
        // The attribute id is an auto increment with a starting value of 1 and each increment of 1
        'id|+1': 1,
        // Attribute name will generate three consecutive know no eg:'name': 'know no know no'
        'name|3':'Know or not',
        // Attribute name will generate 1-3 random numbers repeatedly
        //'name|1-3': 'know no', / / expanding will overwrite the previous name attribute
        // The attribute age randomly generates a number from 10-20
        'age|10-20': 1,
        // Property salary randomly generates 6000 to 8000 floating-point numbers, with the decimal places of 1 to 3 reserved
        'salary|6000-8000.1-3': 0, 
        // Attribute status, the probability of generating true or false is 1 / 2 
        'status|1': true, 
        // Property show, generate true probability 2/(2+4), false probability 4 / (2 + 4)
        'show|2-4': true, 
         // Attribute order randomly takes 2 attributes from the object 
        'order|2': { id: 1, name: 'Water cup', price: 12 },
         // Attribute order2, randomly take 2 to 3 attributes from the object
        'order2|2-3': { id: 1, name: 'T', price: 33 },
         // Attribute phone regular verification mobile number 11 digit note: no single quotation mark
        'phone': /\d{11}/
    }]
})
// Output results
console.log(JSON.stringify(data, null, 2))

4.2. Data placeholder definition specification

Mock.Random Is a tool class for generating a variety of random data.
Mock.Random The method in the class is called "placeholder" in the data template, and the writing format is @ placeholder (parameter, [parameter]).
The format of the placeholder is:

'attribute name': @ placeholder

Example: demo1.js

const Mock = require('mockjs')
const data = Mock.mock({
    // The value of property result is an array of four elements
    'result|4': [{
        // The attribute id is an auto increment with a starting value of 1 and each increment of 1
        'id|+1': 1,
        
        //  Property name randomly generates name in string form
        'name': '@string', 
        //  Attribute cid randomly generates floating-point numbers
        'cid': '@float', 
        //  Property status randomly generates a Boolean value
        'status': '@boolean',
        // Date placeholder parameter date time datetime
         // Default yyyy MM DD
        'birthday': '@date',
        // Specify date format yyyy/MM/dd
		'entryDate': '@date("yyyy/MM/dd")', 
		// Default yyyy MM DD HH: mm: SS 
		'createDate': '@datetime',
		// Default yyyy/MM/dd HH:mm:ss
		'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")' 
		// Random time default HH:mm:ss
        'time':'@time',
        // Image placeholder
         'img':'@image',   
        // Text placeholder random 3-6 word title
        'title': '@ctitle(3, 6)', 
        // Random 8-12 words
        'content': '@csentence(8, 12)',       
        // Name placeholder Chinese needs to add c such as cname
        // first English name. Last last last name in English. Name English name.
		// cfirst Chinese name. clast Chinese last name. cname Chinese name.
		// Random Chinese name
        'first': '@cfirst', 
        // Random English last name 
        'last': '@last', 
        // Network placeholder can randomly generate URL, domain name, IP address and email address
        // URL @url(protocol?, host?)
        // Protocol: protocol, such as http
        // host: domain name and port number, such as mengxuegu.com
        // Domain name @ domain IP @ IP mailbox @ email
        //Randomly generate url
        "url":"@url(protocol?, host?)",  
        // Randomly generate domain name               
        'domain': '@domain', 
        // Address placeholder randomly generated region, province, city, county, and zip code
        // @region area. For example: South China    
        // @County @ zip postal code.
        // region 
        'area': '@region', 
         // Postal Code
        'zipCode': '@zip'
  }]
})

export default data

5,EasyMock

5.1 what is EasyMock?

Easy Mock is a visualized service that can generate simulation data quickly. It is an extremely simple, efficient, visual and online Mock service that can generate simulation data quickly.
Official website link Official documents
EasyMock link 2

5.2. EasyMock simulation data implementation process

Log in or register first
After logging in successfully, there is a plus sign in the lower left corner. Click create project
Fill in the project information and click Create
After the creation is successful, click the item created on the right
Enter the project and click Create interface
Use Mock simulation data on the left and define some information on the right.
After creation, click Copy interface address
Copy it to the address bar for preview, and then you can see the data successfully

Tags: Attribute mockjs JSON npm

Posted on Thu, 04 Jun 2020 09:53:07 -0400 by Skunkmaster

Programmer Help

Mockjs and its module syntax