Mock.js essay

npm install mockjs

stay vue Create a new one in the project as mock.js
The code is :

`// introduce  mockjs  modular 
import Mock from "mockjs";
  Mock.mock("myList", {
    
    "list|5": [         // object  5 It's a fixed value   You can set 1-20  Random 
      // Random return 5 term 
      {
    
        // title: "@ctitle(5,20)",
        // url: "@url", // Random generation url
        // "xx|1-5":"*", //string
        // "xxx|3":"*",
        // 'id|+1':1, //number id Self increase one 
        // 'number|1-100':100, //number 1-100 The random number 
        // "number2|123.2":1, //number 123 Fix  . And then 2 Decimal place   Random ;
        // "boolean|1":true, //boolean  Random 
        // "arr|+1":["1","2","3"], // Array self addition 1
        // "arr|1-2":["1","2","3"], // Array   Array *1 or 2
        // "string1":'123', // character string   Fixed name 
        // 'regexp': /\d{5,10}/, // Regular random number   With the above number  almost 
        // "absolutePath": "@xx @url" // according to @ Helu Jin (/( Forward )  perhaps  ../( Back off )) @ That's what search means 
        // "boolean":'@boolean()', //@boolean()  Random  bool(true/false)
        // "number3":'@natural()', //@natrural()  random number 
        // "number4":'@natural(10000)', //@natrural()  random number   There is no test in place 1000  What is the result 
        // "number5":'@natural(1,100)', //@natrural(min,max)  random number  min  minimum value , max Maximum ;
        // "javaFloat":'@float(60,100,1,3)', //@float(min,max,xsmin,xsmax) min  minimum value  max Maximum  xsmin Decimal minimum  xsmax  Decimal maximum  float yes java Floating point type of type 
        // "character":'@character(upper)', //@character  It should be a single string   There are parameters 4 The clock character( 'lower/upper/number/symbol' )lower: Lower case English  upper: Capitalized English  number: Numbers  symbol: Symbol 
        // "string1":'@string(5)', // Five random strings and symbols 
        // "string2":'@string(number,5)', // Five random string numbers   Shape parameter 1 It can be for :lower/upper/number/symbol/iioopp( Whatever )  Shape parameter 2 by : Numbers 
        // "string3":'@string(1,5)', // Random strings one to five 
        // "string4":'@string(number,1,5)', // Random string numbers one to five 
        // "range1":'@range(5)', // The array order is five 
        // "range2":'@range(1,15,3)', // Array order   Increase by three 
        // "date1":'@date()', //@date  date  2016-09-09
        // "date2":'@date(yyyy-MM-dd)', //@date  date  2002-03-30
        // "date3":'@date(yy-MM-dd)', //@date  date  91-09-13
        // "date4":'@date(yyyy-MM-dd MM M dd d)', //@date  date  2013-03-29 03 3 29 29
        // "time1":'@time()', // Time 
        // "time2":'@time(A HH:mm:ss)', // Time 
        // "time3":'@time(HH:mm:ss)', // Time 
        // "time4":'@time(H:m:s)', // Time 
        // "dateTime1":'@datetime()', // Date time 
        // "dateTime2":'@datetime(yyyy-MM-dd HH:mm:ss)', // Date time 
        // "dateTime3":'@datetime(y-M-d H:m:s)', // Date time 
        // "dateTime4":'@datetime(yyyy yy y MM M dd d HH H hh h mm m ss s SS S A a T)', // Date time 
        // "now1":'@now()', // current time  2021-01-11 14:16:43
        // "now2":'@now(year)', // current time  2021-01-01 00:00:00
        // "now3":'@now(month)', // current time  2021-01-01 00:00:00
        // "now4":'@now(day)', // current time  2021-01-11 00:00:00
        // "now5":'@now(hour)', // current time  2021-01-11 14:00:00
        // "now6":'@now(minute)', // current time  2021-01-11 14:16:00
        // "now7":'@now(second)', // current time  2021-01-11 14:16:43
        // "now8":'@now(yyyy-MM-dd HH:mm:ss SS)', // current time  2021-01-11 14:16:43 437
        // "img1":"@dataImage(200x100,'hello')", // picture @dataImage(size,text) size: Long frame of picture  text: Picture content 
        // "color1":'@color()', //@color  The color is random 
        // "color2":'@rgba()', //@rgba  The color is random 
        // "text":'@paragraph(1,3)', //text
        // "sentence":"@sentence(3.5)", // 3-5 For one center   Random 3-5 English letters 
        // "word":"@word(3,5)", // 3-5 For one center   Random 3-5 English letters 
        // "title":'@title(3.5)', // 3-5 For one center   Random 3-5 English letters 
        // "cparagraph":'@cparagraph(1,5)', //3-5 End with a central period   Random 3-5 Chinese 
        // "csentence":'@csentence(3,5)', //3-5 Chinese letters   The period ends 
        // "cword1":'@cword()', //1 Chinese   There is no end 
        // "cword2":'@cword(3,5)', //3-5 Chinese   There is no end 
        // "cword3":'@cword( One two three four five six seven eighty-nine , 3, 5)', //3-5 Chinese   There is no end 
        // "ctitle1":'@ctitle()', //@ctitle  Random Chinese   There is no end ;
        // "ctitle2":'@ctitle(3,5)', //@ctitle 3-5 Chinese   There is no end ;
        // "ctitle3":'@ctitle(5)', //@ctitle 5 Chinese   There is no end ;
        "namne1":'@first()',         //  English name 
        "namne2":'@last()',         //  English name 
        "namne3":'@name()',         //  English name  2 individual 
        "cnamne1":'@cfirst()',         //  Chinese name 
        "cnamne2":'@clast()',         //  Chinese name 
        "cnamne3":'@cname()',         //  Chinese name  2 individual 
        "url":'@url()',             //web  Address 
        "email":'@email()',             // mailbox 
        "region":'@region()',           // South China 
        "province":'@province()',       // Province 
        "city1":'@city()',       // City   shenzhen 
        "city2":'@city(true)',       // City   Guangdong province,   shenzhen 
        "id":'@id()'                //id  Random 
        
      }
    ]
  });

And then in mianjs
Reference the just configured mock.js file

import mock from './uitle/mock.js'

Then at any one vue Use... In the document axios , // By default, it is currently installed axios

vue File read :

axios.get('myList').then(res =>{
    
   console.log(res);
 })

The last question is :

If there is real data Access real data

Without real data visit mockjs data ;

Don't use if Judge whether it can switch back and forth ？