本篇教學快速建立 json 格式之假資料。
當前端在刻畫一些畫面時,總需要資料才能得以測試,
倘若後端的同事尚未開發完成,往往會造成開發上的延遲,
為了加速開發,我們可以利用 Faker 快速產出指定格式之 json 資料。
一、環境安裝
首先請先下載建立於 Ruby上的套件管理器 GEM ( 如同 npm 套件管理之於 node ),
完成安裝後,開啟 Ruby CMD 。

下載 Faker 套件。
gem install faker
通常會出現以下 SSL 驗證錯誤

因為 Ruby 未包含驗證,故在 gem 服務上未通過 https 驗證,
處理方式請先至此 cacert.pem 下載驗證,並在電腦上新增環境變數。
環境變數:SSL_CERT_FILE
檔案來為:C:\path\to\cacert.pem


完成後確定並重開或登出電腦,如此一來 gem 即可使用。
gem install faker

二、建立測試專案
mkdir myfaker
cd myfaker
npm init
npm install faker
這時應該可以看到我們的 node_modules 內多了 faker 資料夾,
為了快速建立亂數以及定義範圍,我們也安裝 lodash。
npm install lodash
三、撰寫測試檔案
建立一個檔案 fakerdata.js,檔名任意,此檔為產出 json 之用。
var faker = require('faker');
var fs = require('fs');
var _ = require('lodash');
- faker:產出假資料用
- fs:將 json 資料匯出成 .json
- lodash:產生亂數以及範圍數
var range = _.range(1,5);
var data = [];
faker.locale = 'zh_TW';
- range:欲產出之總筆數
- data:存放總資料
- faker.locale:產出資料之語言 (可使用的語言定義於 node_modules\faker\lib\locales\ )
range.map(index => {
});
- 建立一個 map ,依據 range 所定義之長度,進行迴圈 (不是 google map 唷)。
range.map(index => {
var name = faker.name.findName();
var json = {
name: {
full: name,
first: name.split(' ')[0],
last: name.split(' ')[1],
},
job: {
type: faker.name.jobType(),
name: faker.name.jobTitle(),
description: faker.name.jobDescriptor(),
},
age: _.random(18, 80, false),
};
data.push(json);
});
- faker.name 中產出姓名、職稱等等
- 年齡利用 lodash 產出
fs.writeFile('./data.json', JSON.stringify(data), function () {
console.log('create faker data success!');
});
- 最後於外層編寫 fs.writeFile,將 data 資料轉為 JSON 格式
完整程式碼
var faker = require('faker');
var fs = require('fs');
var _ = require('lodash');
var range = _.range(1, 5);
faker.locale = 'zh_TW';
var data = [];
range.map(index => {
var name = faker.name.findName();
var json = {
name: {
full: name,
first: name.split(' ')[0],
last: name.split(' ')[1],
},
job: {
type: faker.name.jobType(),
name: faker.name.jobTitle(),
description: faker.name.jobDescriptor(),
},
age: _.random(18, 80, false),
};
data.push(json);
});
fs.writeFile('./data.json', JSON.stringify(data), function () {
console.log('create faker data success!');
});
四、產出資料
完成後即可於專案目錄底下看到 data.json 資料。
node fakerdata.js
參考資料:ReactNativeDay12 - 台中前端社群 10/08 特別聚會 @夢種子
有勘誤之處,不吝指教。ob'_'ov
