--- Mock --- Basic Use

A, mock solve problems

　　When developing back-end data output is not yet complete, the front had to write static simulation data. Data too long, the data is written in the js file, one by one after the completion of change url. Certain of the logic complex code, is added very carefully removed or analog data. Real data you want to restore as much as possible, either to write more code, either manually modify the simulation data. Special format, such as IP, random numbers, pictures, addresses, we need to collect

Two, mock advantage

　　1, isolated front and rear ends

　　Let front-end engineers independently developed in the backend.

 

　　2, increasing the authenticity test

　　By random data, simulate various scenarios.

 

　　3, the development of non-invasive

　　No need to modify existing code, can intercept Ajax request, it returns the response data simulation.

 

　　4, are easy to use

　　Intuitive interface.

 

　　5, rich data types

　　Support the generation of random text, numbers, Boolean, date, email, links, images, colors and so on.

 

　　6, easy expansion

　　Support more extended data types, support for custom functions and regular.

 

　　7, in the case of an existing interface documentation, we can directly interface documentation to develop in accordance with the appropriate fields written after the completion of the interface, you only need to change the url address.

 

　　8, does not involve cross-domain problem,

 

Third, the case demo

　 　1. first need to download and install the module mockjs

　　　 cnpm install mockjs -S

 

　　 2. In the scr then create a folder for storing the file data simulation example /src/mock/index.js, in this document

　　 

the require Mock = const ( "mockjs" ); 
the let Data = Mock.mock ({
     "Data | 100": [ // generate 100 data array 
        {
             "shopId | + 1'd":. 1, // generate product id, increment 1 
            "shopMsg": "@ctitle (10)", // generate product information, a length of 10 characters 
            "SHOPNAME": "@cname", // generate a trade name, the name of all Chinese people 
            "shopTel": / . 1 ^ (. 5 |. 3 |. 7 |. 8) [0-9]. 9} {$ /, // generate a random telephone number 
            "shopAddress": "@county (to true)", // randomly generated address 
            "shopStar | 1- . 5 ":" ★ ", // randomly generated 1-5 stars 
            "Salesvolume | 30-1000 ": 30, // randomly generated in commodity prices between 30-1000
            "shopLogo": "@Image ( ' 100x40', '# c33', '#ffffff', ' small Beibi')", // generate random picture size / background color / font color / text messages 
            "food | 7 ": [ // each product in seven randomly generated Food 
                {
                     " foodName ":" @cname ", // Food name 
                    " foodPic ":" @Image ( ' 100x40', '# c33', '#ffffff ',' small cute ') ", // generate random picture size / background color / font color / text messages 
                    " foodPrice | 1-100 ": 20, // generate a random number from 1 to 100 
                    " ANAME | 14 " : [ 
                        {
                             "ANAME": "@cname" , 
                            "aprice|30-60": 20 
                        }
                    ]
                }
            ] 
        } 
    ] 
}) 
Mock.mock ( / Goods \ / Goodall /, 'POST', () => { // three parameters. The first path, a second request method post / get, the third correction, return value 
    return Data 
})

 

　　 3. After the analog data, the file needs to be introduced in the analog data entry in the master file main.js

　　　import "./mock/index.js"

 

　　4. In the page, we can directly axios request (here, the easy way, and under normal circumstances, it is necessary to each interface package which api, post maintenance easy to modify a series of operations)

　　

import axios from "axios";


mounted () {
        this.initMsg();
    },
methods: {
   initMsg(){

　　　　　　axios.post("http://localhost:8080/goods/goodAll").then((res)=>{

　　　　　　　　console.log(res)

　　　　  　})

　　}  
}