Json-Server&MockJs簡單快速生成測試數據

1、Json-Server 和 MockJs的安裝

npm install -g json-server //全局安裝

2、創建目錄和初始話

例如：創建D:\ProjectOne文件夾

3、打開終端或者powershell進入ProjectOne文件夾

4、初始化項目

npm init

5、安裝MockJs

npm install mockjs

6、新建一個數據文件例如：db.js

const Mock = require('mockjs')
const Random = Mock.Randommodule.exports = ()=> {let data = {users:[], news:[]}for(let i = 0; i < 20; i++ ){data.users.push({id:Random.increment(1),   //自增IDname:Random.cname(),      //名字password:Random.integer(100000,999999),  //密碼isMale:Random.boolean(),        //性別phone:Mock.mock({'regexp':/^1[34578]\d{9}$/         //手機號碼}),addr:Random.region(),  // 地址email:Random.email(),   //郵箱age:Random.integer(10,120),     //年齡create_time:Random.now()    //創建時間})}for(let i = 0; i < 20; i++ ){data.news.push({id:Random.increment(1),         //自增IDauthor:Random.cname(),          //作者名字title:Random.ctitle(),          //標題content:Random.cparagraph(50,100) //文章})}return data
}

7、執行命令

json-server --watch --port 5005 --host 127.0.0.1 db.js 

注意：如果端口占用請更換其他端口，如果本地占用host 可以先關閉再啟動！

訪問地址:

Resources
http://127.0.0.1:5005/users
http://127.0.0.1:5005/news

運行結果：

常用的類型：

數字類型

// 生成一個整數（默認范圍為 0~100）
Mock.mock('@integer()');// 生成一個指定范圍內的整數
Mock.mock('@integer(1, 100)');// 生成一個浮點數（默認保留 0~17 位小數）
Mock.mock('@float()');// 生成一個指定范圍內的浮點數，并且限制保留的小數位數
Mock.mock('@float(1, 100, 2)');// 生成一個手機號
Mock.mock(/^1[3456789]\d{9}$/);

字符串類型

// 生成一個隨機的單詞
Mock.mock('@word()');// 生成一個隨機的句子
Mock.mock('@sentence()');// 生成一個隨機的段落
Mock.mock('@paragraph()');// 生成一個隨機的郵箱
Mock.mock('@EMAIL()');// 生成一個隨機的 URL
Mock.mock('@url()');

日期類型

// 生成一個隨機的日期
Mock.mock('@date()');// 生成一個隨機的時間
Mock.mock('@time()');// 生成一個隨機的日期+時間
Mock.mock('@datetime()');// 生成一個隨機的 Unix 時間戳
Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")');

? BOOLEAN

// 生成一個隨機的布爾值
Mock.mock('@boolean()');// 生成一個給定的固定值 true 或 false
Mock.mock('@boolean(true)');

對象類型

// 生成一個隨機的對象
Mock.mock({'id|+1': 1,'name': '@name','age|20-30': 25,'gender|1': ['男', '女']
});// 生成多個隨機的對象
Mock.mock({'list|10': [{'id|+1': 1,'name': '@name','age|20-30': 25,'gender|1': ['男', '女']}]
});

數組類型

// 生成一個隨機的數組
Mock.mock(['@integer()', '@integer()', '@integer()']);// 生成多個隨機的數組
Mock.mock({'list|10': ['@integer()']
});

生成中文姓名

// 生成一個隨機的中文姓名
Mock.mock('@cname()');

隨機漢字

// 生成一個隨機的漢字
Mock.Random.cword();// 生成一個由兩到三個詞匯組成的部門名稱 
Mock.mock('@cword(2, 3)部');

指定圖片大小

// 生成一張指定大小和背景顏色的圖片 
Mock.mock({ 'image': '@image("200x100", "#f00")' });

具體使用方式可以參考官方文檔:

Mock.js (mockjs.com)

json-server - npm (npmjs.com)

POSTMAN或者APIFOX操作JsonServer

GET 獲取數據

PUT更新數據

注意：這里根據ID更新數據未更新的字段會刪除，畢竟這是文件上的數據！！

其他刪除、添加等就不舉例子了，遵從Resultful Api 風格就可以了。

8M0CtuM-1703146462673)]

[外鏈圖片轉存中…(img-t0z3KWhD-1703146462673)]

PUT更新數據

[外鏈圖片轉存中…(img-OXyZ0ja1-1703146462673)]

[外鏈圖片轉存中…(img-yE5uTGLR-1703146462674)]

注意：這里根據ID更新數據未更新的字段會刪除，畢竟這是文件上的數據！！

其他刪除、添加等就不舉例子了，遵從Resultful Api 風格就可以了。

感謝點贊，關注，支持！ 謝謝