Mockjs，模擬數據生成器

時間 2019-11-12

標籤 mockjs 模擬數據成器简体版

原文原文鏈接

（推薦使用）Mock.js是一款模擬數據生成器，旨在幫助前端攻城師獨立於後端進行開發，幫助編寫單元測試。javascript

提供瞭如下模擬功能：html

1. 根據數據模板生成模擬數據。前端

2. 模擬Ajax請求，生成並返回模擬數據。java

3. 基於 HTML 模板生成模擬數據。jquery

PS：http://mockjs.com/ajax

用處chrome

在後端還沒完成數據接口，前端只好寫靜態模擬數據的時候，Mockjs的用處：npm

1. 避免手動編寫靜態模擬數據，由代碼生成，添加和刪除數據都更簡單、安全。json

2. 能夠生成儘量真實的數據，提供了IP、隨機數、圖片、地址、郵箱、名字等佔位符，也支持擴展自定義佔位符。後端

3. 不須要修改既有代碼，就能夠攔截 Ajax 請求，返回模擬的響應數據。

在Node模塊使用

// 安裝
npm install mockjs
 
// 使用
var Mock = require('mockjs');
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
console.log(JSON.stringify(data, null, 4))

能夠在Node模塊裏面。

在瀏覽器頁面使用

比較經常使用的應該是在瀏覽器頁面，用法也很簡單，以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MockJS-demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mock.js"></script>
</head>
<body>
<script>
     //demo1
    var data = Mock.mock({
         'list|1-10': [{
             'id|+1': 1
         }]
     });
     console.log(JSON.stringify(data, null, 4))
 
     //demo2
     Mock.mock('http://g.cn', {
          'name'     : '@name',
          'age|1-100': 100,
          'color'    : '@color'
     });
    
     $.ajax({
          url: 'http://g.cn',
          dataType:'json'
     }).done(function(data, status, xhr){
          document.writeln(JSON.stringify(data, null, 4));
     });
</script>
</body>
</html>