Easy Mock以及Vue+Mock.js模擬資料

摘要： Easy Mock以及Vue+Mock.js模擬資料 一、Mock.js簡介 Mock.js 是一個可以模擬後端資料，也可以模擬增刪改查操作的js庫 基礎語法規範資料模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值： 'name|rul...

Easy Mock以及Vue+Mock.js模擬資料

一、Mock.js簡介

ofollow,noindex" target="_blank">Mock.js 是一個可以模擬後端資料，也可以模擬增刪改查操作的js庫

• 基礎語法規範

  資料模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值： 'name|rule': value

  語法規則	說明
  '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

  簡單舉例：

  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": "[email protected]",
  "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

二、Easy Mock

• 建立Easy Mock專案

  

• 使用Easy Mock 的Sagger特性快速生成Mock介面

  

  

• 檢視Mock介面進行測試

  

  

• 線上測試

  

三、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);
  });
  }

• 檢視mock介面（在瀏覽器除錯工具Network中不會有http請求，因為已經被攔截）

  

四、參考連結

• Easy Mock文件： https://easy-mock.com/docs

• Mock.js文件： https://github.com/nuysoft/Mock/wiki

水平有限，有寫的不對的地方還請各位小夥伴多多指點，共同學習進步:yum: