使用Mock.js生成隨機JSON資料
阿新 • • 發佈：2019-01-09
1 首先，我們需要在程式碼檔案中安裝mock模組，所以，我們開啟程式碼檔案的根目錄，然後在此處啟動命令列工具。
2 依次輸入以下兩條命令，完成mock模組的安裝。此處要注意的是，安裝之前電腦要有Node.js的環境，因為在此處用到了它的npm工具。
3 安裝完成後，我們發現在我們的程式碼檔案根目錄下多出來了一個名為“bower_components”的資料夾，我們後續用到的Mock模組就在此資料夾裡，如圖：
4 所有安裝工作結束後，我們新建一個HTML檔案，然後引入mock模組，如圖：
5 引入模組後我們定義我們所需的json的資料格式，也就是定義模版，此處使用網上的一個簡易模版，如下;
6 我們通過console.log()方法將結果輸出，此時可看到生成的50條json資料，如下：
7 整個程式碼檔案如下所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSON資料生成</title> </head> <body> <script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"> </script> <script> window.onload=function(){ var Random = Mock.Random; Random.date(); var dataMock = Mock.mock({ 'list|50': [{ 'simCar|13000000000-19900000000': 1440191734422, 'operator|1': [ '移動', '聯通', '電信' ], 'packageName|1': [ '5元30M', '10元500M', '50元100G' ], validityPeriod: '@date', 'unitPrice|5-10': 5, 'quantity|10-30': 12, 'amount|1-100': 60, 'imei|800000000000000-900000000000000': 868120203709164, user: 'test' }] }); //console.log(JSON.stringify(dataMock,null,4)); console.log(dataMock); } </script> </body> </html>
附：
Mock模組除上述簡單的使用外，也可以運用在Vue這種框架中，具體的教程可參考如下教程：