Mock.jsの使用とデータ構文規則の解析

10285 ワード

参照リンク:https://www.cnblogs.com/zk995/p/10400508.html#example
1.使用手順:
(1)axiosとmock.jsのインストール
$ npm install mockjs

$ npm install axios

 (2)mock.jsファイルを作成し、/static/mock/mock.js
import Mock from 'mockjs' // es6    mock  

Mock.mock('/login', { //     
  'name': '@name' //       
})
Mock.mock('/list', { //     
  'age|10-20': 10 //       
})

 (3)main.jsファイルに入り、mockとaxiosを導入し、グローバル使用方法を登録する
/*   mock     */
import '../static/mock/mock.js'
import axios from 'axios'

Vue.prototype.$axios = axios //     ,     :this.$axios

(4)参照ファイルへのアクセスaxiosの使用
this.$axios.post('/login').then(response => {
    console.log(response)
})
  • は完全なaction urlを書くことができます.http://localhost/login
  • 同じドメインでapi形式のみを書くこともできます:/login
  • Mock.mockを使用する複数のインタフェースデータ
  • を記述することができる.
    これで、参照は正常に終了しました.
    備考:mock構文規則
    /* String  */
    
    var str = Mock.mock({
      "name|1-10":"zk",//1-10   
      "home|3":"china",//3   
      
    })
    console.log(str);
    //{ "name": "zkzkzkzkzk", "home": "chinachinachina" }
    
    /* Number  */
    
    var num = Mock.mock({
      "age":22,
      "int|1-100":100,//1-100  
      "floor1|1-100.1-5":1,//    1-100,  1-5 
      "floor2|23.1-3":1,//  23,  1-3 
      "floor3|123.3":1//  123,  3 
      
    })
    console.log(num);
    //{ "age": 22, "int": 50, "floor1": 11.8427, "floor2": 23.6, "floor3": 123.512 }
    
    /* Boolean  */
    
    var bool = Mock.mock({
      "can":true,//   ,true
      "has|1":true,//   ,    
      "is|1-2":true,//   ,    
    })
    console.log(bool);
    //{ "can": true, "has": true, "is": false }
    
    /* Object  */
    var obj = Mock.mock({
      //     ,    2  
      "object1|2": {
        "310000": "   ",
        "320000": "   ",
        "330000": "   ",
        "340000": "   "
      },
      //     ,    1-3  
      "object2|1-3": {
        "310000": "   ",
        "320000": "   ",
        "330000": "   ",
        "340000": "   "
      }
    })
    console.log(obj);
    //{ "object1": { "310000": "   ", "330000": "   " }, "object2": { "310000": "   ", "320000": "   ", "330000": "   " } }
    
    /* Array  */
    
    var arr = Mock.mock({
      //   1  
      "arr1|1":[1,2,3,4,5,6,7],
      //      list
      "arr2|4":[{
        "name|+1":["gs","zk","lili"]
      }],
      //    1-4     
      "arr3|1-4":["green"]
    })
    console.log(arr);
    //{ "arr1": 3, "arr2": [ { "name": "gs" }, { "name": "zk" }, { "name": "lili" }, { "name": "gs" } ], "arr3": [ "green", "green", "green", "green" ] }
    
    /* Function  */
    var fun = Mock.mock({
      "fun1":"this is fun1",
      "fun2":function(){
        return this.fun1
      }
    })
    console.log(fun);
    //{ "fun1": "this is fun1", "fun2": "this is fun1" }
    
    /* RegExp ( ) */
    
    /* Path ( ) */
    
    /* Basic  and Random */
    
    var Random = Mock.Random;
    // Random.boolean();
    var random = {
      bool1: Mock.mock('@boolean'),//
      natural1: Random.natural(60, 100),
      integer1:Random.integer(60, 100),
      float1:Random.float(10,20,3,5),//   ,       3 ,  5 
    }
    console.log(random);
    //{ "bool1": false, "natural1": 79, "integer1": 85, "float1": 16.5758 }
    
    //Random.range(start?, stop, step?)
    var range = {
      range1:Random.range(10),
      range2:Random.range(3,8),//3-8    8
      
    }
    console.log(range);
    //{ "range1": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], "range2": [ 3, 4, 5, 6, 7 ] }
    
    /* Date  */
    
    //Random.date
    var date = {
      date:Random.date(),
      date1:Random.date('yyyy-MM-dd'),
      date2:Random.date('yy-MM-dd'),
      date3:Random.date('y-MM-dd'),
      date4:Random.date('y-M-d'),
    }
    console.log(date);
    //{ "date": "2015-04-30", "date1": "2013-01-07", "date2": "97-04-02", "date3": "03-10-04", "date4": "83-1-8" }
    
    //Random.time
    console.log(Random.time());
    //20:21:26
    
    //Random.datetime
    var datetime = {
      datetime1:Random.datetime('yyyy-MM-dd A HH:mm:ss'),
      datetime2:Random.datetime('yy-MM-dd a HH:mm:ss'),
      datetime3:Random.datetime('y-MM-dd HH:mm:ss'),
      datetime4:Random.datetime('y-M-d H:m:s'),
    }
    console.log(datetime);
    //{ "datetime1": "1981-03-27 AM 10:47:11", "datetime2": "86-03-16 am 06:25:02", "datetime3": "02-12-18 18:13:46", "datetime4": "84-6-6 1:20:37" }
    
    //Random.now
    console.log(Random.now());
    //2019-02-11 11:10:22
    
    /* Image  */
    
    //Random.image
    var image = {
      image1:Random.image(),
      image2:Random.image('200x100'),
      image3:Random.image('200x100', '#FF6600'),
      image4:Random.image('200x100', '#4A7BF7', 'Hello'),
    }
    console.log(image);
    //{ "image1": "http://dummyimage.com/234x60", "image2": "http://dummyimage.com/200x100", "image3": "http://dummyimage.com/200x100/FF6600", "image4": "http://dummyimage.com/200x100/4A7BF7&text=Hello" }
    
    //Random.dataImage
    Random.dataImage('200x100', 'Hello Mock.js!');//  base64     
    
    /* Color */
    
    //Random.color()
    console.log(Random.color());
    //Random.rgb()
    console.log(Random.rgb());
    //Random.rgba()
    console.log(Random.rgba());
    
    /* Text  */
    
    //paragraph
    var paragraph = {
      paragraph1:Random.paragraph(2),
      paragraph2:Random.paragraph(1,4),//  1-4     
    }
    console.log(paragraph);
    //{ "paragraph1": "Rwolb iow nzw tncvxbjo xcuwxztvp sluowwdbbe ebspm qxhu oyihkjgo cyperf keizgr wcyk kgsdlxk fkt tlwr fwoappj pcfoln. Wxl gqb tlayp fst ylpikqzvjl ywiwudcu jjhc ikuiojcxdv herlliuti yrebxci mhbwxy rmfyw.", "paragraph2": "Ecifwwsor msyhxovy gdgrr nxpg wfkd suveigx gxtdqvydy oncubsadx cujix qtpkixn tbkzwuf suiobevg qstrs. Mgkxu ugvjz hjxw oje bfwlfmu rgvwqg uee mbub wnjn msjccuihk quprpmwuxy cmbg. Sem mexgend dlijdlo mqooaorr uimveu ktst kbusaeo ntjwbba hftkjq lmbfjklkqc dakew jxidcsr byfqwfj yye." }
    
    //cparagraph |     
    var cparagraph = {
      cparagraph1:Random.cparagraph(2),
      cparagraph2:Random.cparagraph(1,4),//  1-4   [    ]
    }
    console.log(cparagraph);
    //{ "cparagraph1": "             。               。", "cparagraph2": "              。                  。" }
    
    //sentence
    var sentence = {
      sentence1:Random.sentence(5),//  5      
      sentence2:Random.sentence(1,10)
    }
    console.log(sentence);
    //{ "sentence1": "Kmuu apvtblwsk pyqleysce xoghbiiymp mxhkmogvgu.", "sentence2": "Utdnre vbmc bziw monmkuz pkwjp qthrjwjq hwbgjwfqk wvdfw jybjjgv." }
    
    //csentence |     
    var csentence = {
      csentence1:Random.csentence(5),//  5      
      csentence2:Random.csentence(1,10)
    }
    console.log(csentence);
    //{ "csentence1": "     。", "csentence2": "    。" }
    
    //word
    var word = {
      word1:Random.word(5),//    
      word2:Random.word(1,10)
    }
    console.log(word);
    //{ "word1": "ywwxr", "word2": "chkawikz" }
    
    //cword |     
    var cword = {
      cword1:Random.cword(5),//    
      cword2:Random.cword(1,10),
      cword3:Random.cword('           ', 3)
    }
    console.log(cword);
    //{ "cword1": "     ", "cword2": "         ", "cword3": "   " }
    
    //title
    var title = {
      title1:Random.title(5),//    
      title2:Random.title(1,10)
    }
    console.log(title);
    //{ "title1": "Trkfpfrct Vfhgwer Kejisbvjws Epfounrun Vwra", "title2": "Stns Hcfppzc" }
    
    //ctitle |     
    var ctitle = {
      ctitle1:Random.ctitle(5),//    
      ctitle2:Random.ctitle(1,10)
    }
    console.log(ctitle);
    
    /* Name  */
    
    //Random.first()
    //Random.last()
    //Random.name()
    var cname = {
      cfirst:Random.cfirst(),//      
      clast:Random.clast(),//      
      cname:Random.cname(),//   2  ,    3  ,4    
    }
    console.log(cname);
    //{ "cfirst": " ", "clast": " ", "cname": "  " }
    
    /* Web  */
    
    //Random.url()
    console.log(Random.url());//  ,       ,  http
    //rlogin://eertsd.uy/ihthk
    
    //Random.domain()
    console.log(Random.domain());//  ,      
    //lywxjl.tel
    
    //Random.protocol()
    console.log(Random.protocol());//  ,  ftp    
    //ftp
    
    //Random.email()
    console.log(Random.email());
    //[email protected]
    
    //Random.ip()
    console.log(Random.ip());
    //13.224.127.79
    
    /* Address  */
    
    //Random.region() |     
    console.log(Random.region());
    //  
    
    //Random.province() |  
    console.log(Random.province());
    //   
    
    //Random.city() |   
    console.log(Random.city());
    console.log(Random.city(true));//     ,         
    //   
    //       
    
    //Random.county() |   
    console.log(Random.county());
    console.log(Random.county(true));//     ,           
    //   
    //           
    
    /* Helper  */
    
    //Random.capitalize() |      
    console.log(Random.capitalize('hello'));
    //Hello
    
    //Random.upper() |   
    console.log(Random.upper('hello'));
    //HELLO
    
    //Random.lower() |   
    console.log(Random.lower('HELLO'));
    //hello
    
    //Random.pick() |     
    console.log(Random.pick(['a', 'e', 'i', 'o', 'u']));
    //i
    
    //Random.shuffle() |   
    console.log(Random.shuffle(['a', 'e', 'i', 'o', 'u']));
    //[ "o", "i", "u", "e", "a" ]
    
    /* Miscellaneous |     */
    
    //Random.guid() |        
    console.log(Random.guid());
    //7AAEc148-FcAD-7EBA-0dAD-f7ac1c43AdCC
    
    //Random.id()
    console.log(Random.id());
    //710000198410172520
    
    //Random.increment |   
    console.log(Random.increment());//1
    console.log(Random.increment());//2
    console.log(Random.increment());//3
    console.log(Random.increment(100));//103
    console.log(Random.increment());//104
    
    console.log("");
    console.log("");
    console.log("");
    console.log("");
    console.log("");