Easy Mock以及Vue+Mock.js模擬數據

時間 2019-11-13

標籤 easy mock 以及 vue+mock.js vue 模擬數據欄目 JavaScript 简体版

原文原文鏈接

Easy Mock以及Vue+Mock.js模擬數據

1、Mock.js簡介

Mock.js是一個能夠模擬後端數據，也能夠模擬增刪改查操做的js庫

基礎語法規範

數據模板中的每一個屬性由 3 部分構成：屬性名、生成規則、屬性值：'name|rule': valuevue

語法規則	說明
`'name\|min-max': string`	經過重複 string 生成一個字符串，重複次數大於等於 min，小於等於 max
`'name\|count': string`	經過重複 string 生成一個字符串，重複次數等於 count
`'name\|min-max': number`	生成一個大於等於 min、小於等於 max 的整數，屬性值 number 用來肯定類型
`'name\|+1': number`	初始值爲 number，之後每次請求在前面的基礎上+1
`'name\|min-max.dmin-dmax': number`	生成一個浮點數，整數部分大於等於 min、小於等於 max，小數部分保留 dmin 到 dmax 位
`'name\|1': boolean`	隨機生成一個布爾值，值爲 true 的機率是 1/2，值爲 false 的機率一樣是 1/2
`'name\|count': object`	從屬性值 object 中隨機選取 count 個屬性
`'name\|min-max': object`	從屬性值 object 中隨機選取 min 到 max 個屬性
`'name\|1': array`	從屬性值 array 中隨機選取 1 個元素，做爲最終值
`'name\|+1': array`	從屬性值 array 中按照順序選取 1 個元素，做爲最終值
`'name\|count': array`	經過重複屬性值 array 生成一個新數組，重複次數爲 count
`'name\|min-max': array`	經過重複屬性值 array 生成一個新數組，重複次數大於等於 min，小於等於 max

簡單舉例：ios

var arr=['aa','bb','cc'];
var obj={
   'name':'MountainC44',
   'old':'23',
   'sex':'man'
};

//數據模版簡單舉例
{
   'firstName|3':'xue',//重複fei這個字符串 3 次。
   'lastName|2-5':'yangbo',//重複yangbo這個字符串 2-5 次。
   'index|+1':0, //屬性值自動加 1，初始值爲 0
   'age|20-30':25,//生成一個大於等於 20、小於等於 30 的整數，屬性值 25 只是用來肯定類型
   'weight|100-120.2-5':110.24,//生成一個浮點數,整數部分大於等於 100、小於等於 120，小數部分保留 2 到 5 位。
   'likeMovie|1':Boolean,//隨機生成一個布爾值，值爲 true 的機率是 1/2，值爲 false 的機率一樣是 1/2。
   'friend1|1':arr,//從數組 arr 中隨機選取 1 個元素，做爲最終值。
   'friend2|+1':arr,//從屬性值 arr 中順序選取 1 個元素，做爲最終值
   'friend3|2-3':arr,//經過重複屬性值 arr 生成一個新數組，重複次數大於等於 2，小於等於 3。
   'obj1|2':obj,//從屬性值 obj 中隨機選取 2 個屬性
   'obj2|1-2':obj,//從屬性值 obj 中隨機選取 1 到 2 個屬性。
   'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正則表達式的字符串
}

//返回示例
{
   'firstName':'xuexuexue',
   'lastName':'yangboyangbo',
   'index':0, 
   'age':28,
   'weight':115.223,
   'likeMovie':Boolean,
   'friend1':'bb',
   'friend2':'aa',
   'friend3|2-3':['aa','bb','cc','aa','bb','cc'],
   'obj1':{'name':'MountainC44','old':'23',},
   'obj2':{'name':'MountainC44',},
   'regexp1':'sC2',
}

數據佔位符

//數據佔位符使用
{
  "string|1-2": "@string",     //隨機生成字符串
  "integer": "@integer(10, 30)",  //隨機生成一個10～30之間的正整數
  "float": "@float(60, 100, 2, 2)",  //隨機生成浮點數，參數分別爲整數部分最小值和最大值、小數部分保留最小位數和最大位數
  "boolean": "@boolean",       //隨機生成boolean
  "date": "@date(yyyy-MM-dd)", //按照格式隨機生成時間
  "datetime": "@datetime",     //隨機生成時間
  "now": "@now",               //當前時間
  "url": "@url",               //隨機生成url字符串
  "email": "@email",           //隨機生成郵箱
  "region": "@region",         //隨機生成地區
  "city": "@city",             //隨機生成城市
  "province": "@province",     //隨機生成省會
  "county": "@county",         //隨機生成一個（中國）縣
  "upper": "@upper(@title)",   //把生隨機成的標題所有轉爲大寫
  "guid": "@guid",             //隨機生成一個 GUID
  "id": "@id",                 //隨機生成一個 18 位身份證
  "image": "@image(200x200)",  //隨機生成一個大小爲200x200的圖片連接
  "title": "@title",           //隨機生成一句標題，其中每一個單詞的首字母大寫
  "cparagraph": "@cparagraph", //隨機生成一段中文文本
  "csentence": "@csentence",   //隨機生成一段中文文本
  "range": "@range(2, 10)"     //返回一個內容從2開始到9的整型數組
}

//返回示例
{
  "string": "A0L^Z",
  "integer": 16,
  "float": 82.23,
  "boolean": true,
  "date": "1994-09-16",
  "datetime": "1994-10-22 02:30:32",
  "now": "2018-10-21 10:31:00",
  "url": "mailto://tfoyemmcy.as/ppm",
  "email": "f.lqdfggdy@wulqhmm.com",
  "region": "華南",
  "city": "茂名市",
  "province": "澳門特別行政區",
  "county": "和平區",
  "upper": "LGHV FJV FDHNA ZJQO MKQEPMY BYVPYMU JRUPL",
  "guid": "EdAD386E-eCB3-e054-fBd3-D4BCd58bF2Dd",
  "id": "630000201810081550",
  "image": "http://dummyimage.com/200x200",
  "title": "Powol Qhycsib Nvwf Bmiuvcek Ioisiu Sxdmrpdip",
  "cparagraph": "又平你大萬被然紅義她之影此屬且。定圓光半條社已上實參規持備特戰劃。打第一在感革會屬利小年往。認七單邊濟火國風風速次支比容爭連勞。目叫織新百卻又處思只名發這實。什濟安這自空東認十需打現軍應。",
  "csentence": "火事必該驗導回聲市然第別程確條狀。",
  "range": [2,3,4,5,6,7,8,9]
}

Mock對象方法簡介
- Mock.mock( rurl?, rtype?, template|function( options ) ) ：根據數據模板生成模擬數據，攔截指定rtype類型的url爲rurl的ajax請求，返回數據模板中的模擬數據或執行回掉方法
- Mock.setup( settings )：配置攔截 Ajax 請求時的行爲。支持的配置項有：timeout，指攔截的 Ajax 請求的響應時間，單位是毫秒
- Mock.Random.xxx()：Mock.Random對象提供的方法在數據模板中稱爲佔位符，書寫格式爲 @佔位符(參數 [, 參數])
- Mock.valid( template, data )：校驗真實數據 data 是否與數據模板 template 匹配
- Mock.toJSONSchema( template )：把 Mock.js 風格的數據模板 template 轉換成 JSON Schema

2、Easy Mock

Easy Mock是一個可視化，而且能快速生成 模擬數據的持久化服務，支持在線訪問和本地部署

Easy Mock 引入了Mock.js，因此支持Mock.js語法規範git

建立Easy Mock項目
使用Easy Mock 的Sagger特性快速生成Mock接口
查看Mock接口進行測試
在線測試

3、Vue+Mock.js模擬數據

npm安裝mockjs ，建立mock.js文件

編寫mock.js文件，main.js文件引入

//mock.js文件
const Mock = require('mockjs');
const data = Mock.mock({
  // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
  'foods|10-50': [{
    name: '@ctitle(2,10)',
    img: "@image('600x600',#b7ef7c)",
    brief: '@csentence(1,50)',
    'price|0-20.0-2': 1,
    num: 0,
    minusFlag: true,
    time: '@time',
    'peisongfei|0-100.0-2': 1,
    'limit|0-50': 1,
  }],
  'sales|10-50': [{
    // 屬性 id 是一個自增數，起始值爲 1，每次增 1
    name: '@ctitle(2,10)',
    img: "@image('600x600',#b7ef7c)",
    brief: '@csentence(1,50)',
    'price|0-100.0-2': 1,
    num: 0,
    minusFlag: true,
    time: '@time',
    'peisongfei|0-100.0-2': 1,
    'limit|0-100': 1,
  }],
});
Mock.mock('/api/data', data);  //對url爲/api/data的ajax請求進行攔截返回data假數據
Mock.mock('/api/data1', () => ({
  data,
}));


//main.js文件 引入mock.js
require('./mock.js');


//vue組件使用axios發送ajax請求
created() {
    this.$axios.get('/api/data1').then((res) => {
      console.log(res.data);
    });
    this.$axios.get('/api/data').then((res) => {
      console.log(res.data);
    });
}