快捷導(dǎo)航

使用Mock.js生成前端測試數(shù)據(jù)

更新時(shí)間：2020年12月13日 16:05:18 作者：彭世瑜

這篇文章主要介紹了使用Mock.js生成前端測試數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Mock.js是一個(gè)模擬數(shù)據(jù)生成器，可以讓前端獨(dú)立于后端進(jìn)行開發(fā)。如果你正在開發(fā)一個(gè)前端頁面，可是后臺還沒有完成供你調(diào)用的Api，并且數(shù)據(jù)格式已經(jīng)確定，那么你就可以使用Mock.js模擬相關(guān)的接口，生成假數(shù)據(jù)來查看頁面效果。Mock.js的功能：生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請求。

參考文檔：https://github.com/nuysoft/Mock/wiki/Getting-Started

語法規(guī)范：https://github.com/nuysoft/Mock/wiki/Syntax-Specification

安裝

npm install mockjs

創(chuàng)建模擬Api，攔截Ajax請求，返回測試數(shù)據(jù)

  //模擬后臺
  Mock.mock('http://api.com', {
    "user|5-10": [{
      'name': '@cname',  //中文名稱
      'age|1-100': 100,  //100以內(nèi)隨機(jī)整數(shù)
      'birthday': '@date("yyyy-MM-dd")', //日期
      'city': '@city(true)'  //中國城市
    }]
  });

發(fā)送ajax請求

  //JQuery方式
  $.ajax({
    url: 'http://api.com',
    dataType: 'json'
  }).done(function(data, status, xhr) {
    console.log(
      JSON.stringify(data, null, 4)
    )
  });
  //原生ajax方式
  function myajax(url) {
      if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        try {
          ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {}
        }
      }
      if (!ajax) {
        window.alert("不能創(chuàng)建XMLHttpRequest對象實(shí)例.");
        return false;
      }
      ajax.open("GET", url, true);
      ajax.send(null);
      ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
          console.log(ajax.responseText);
        }
      }
    }

  myajax('http://api.com');

查看響應(yīng)

{
  "user": [
    {
      "name": "鍾麗",
      "age": 17,
      "birthday": "1983-11-01",
      "city": "內(nèi)蒙古自治區(qū) 赤峰市"
    },
    {
      "name": "陳艷",
      "age": 25,
      "birthday": "1973-07-10",
      "city": "河南省 駐馬店市"
    },
    {
      "name": "馮霞",
      "age": 59,
      "birthday": "2010-10-28",
      "city": "澳門特別行政區(qū) 離島"
    },
    {
      "name": "賈秀英",
      "age": 63,
      "birthday": "1973-01-22",
      "city": "新疆維吾爾自治區(qū) 伊犁哈薩克自治州"
    },
    {
      "name": "周勇",
      "age": 34,
      "birthday": "1985-05-21",
      "city": "湖南省 衡陽市"
    }
  ]
}

示例

// 使用 Mock
var Mock = require('mockjs')

/**
 * 
 * 數(shù)據(jù)模板
 * 屬性名|生成規(guī)則: 屬性值
 */
var data = Mock.mock({
  // 屬性 list 的值是一個(gè)數(shù)組，其中含有 1 到 10 個(gè)元素
  'list|1-10': [{
    // 屬性 id 是一個(gè)自增數(shù)，起始值為 1，每次增 1
    'id|+1': 1,
    'name': '@FIRST'
  }]
})

// 輸出結(jié)果
console.log(JSON.stringify(data, null, 4))

運(yùn)行結(jié)果

{
    "list": [
        {
            "id": 1,
            "name": "Larry"
        },
        {
            "id": 2,
            "name": "Edward"
        },
        {
            "id": 3,
            "name": "Jessica"
        },
        {
            "id": 4,
            "name": "William"
        },
        {
            "id": 5,
            "name": "Christopher"
        },
        {
            "id": 6,
            "name": "Michael"
        },
        {
            "id": 7,
            "name": "Susan"
        },
        {
            "id": 8,
            "name": "Shirley"
        },
        {
            "id": 9,
            "name": "Angela"
        },
        {
            "id": 10,
            "name": "George"
        }
    ]
}