項目開發過程中,經常需要用到臨時數據(假數據),有時候會利用一些json文件來模擬數據,但是用json文件時會有一個問題,線上和線下必須來回切換api,比較繁瑣,這種情況下可以直接使用Mockjs,用koa寫後臺,模擬接口。
1、Mockjs安裝
npm install mockjs
2、Mockjs單元文件
import Mock from 'mockjs';
const Random = Mock.Random;
export default class MockUserlistController {
static async getMockUserlist (ctx, next) {
ctx.state = 200;
ctx.body = {
code: '000000',
message: 'success',
data: Mock.mock({
// 屬性 list 的值是一個數組,其中含有 1 到 10 個元素
'list|10': [{
// 屬性 id 是一個自增數,起始值爲 1,每次增 1
'id': '@id',
'name': '@cname',
"date": "@date()",//隨機生成日期
'Address': '@county(true)', // 生成省 市 縣組成的地址
'Email': '@email',//生成郵箱
"avatar": "@image('200x200','red','#fff','avatar')",//生成圖片
// "mark": Random.cparagraph(0, 5),
"description": "@cparagraph()",//描述中文
//描述英文
// "description": "@paragraph()"
}],
'total': Random.integer(70, 100)
})
};
}
}
3、Mockjs常規語法
{
// 隨機生成布爾類型
'Boolean': '@boolean',
// 隨機生成1到100之間自然數
'Natural': '@natural(1, 100)',
// 生成1到100之間的整數
'Integer': '@integer(1, 100)',
// 生成0到100之間的浮點數,小數點後尾數爲0到5位
'Float': '@float(0, 100, 0, 5)',
// 在aeiou中,生成隨機字符,不傳參表示生成隨機字符
'Character': '@character("aeiou")',
// 生成2到10個字符之間的字符串
'String': '@string( 2, 10)',
// 生成一個數組,數組元素從0開始到10結束,間隔爲2
'Range': '@range(0, 10, 2)',
// 生成一個隨機日期,可加參數定義日期格式,默認yyyy-mm-dd
'Date': '@date("yyyy yy y MM M dd d")',
// 生成一個顏色16進制隨機值
'Color1': '@color',
//生成一個顏色rgb隨機值
'Color2': '@rgb',
//生成2至5個句子的文本
'Paragraph':'@paragraph(2, 5)',
//生成3至5個單詞組成的一個句子
'Sentence':'@sentence(3, 5)',
//生成3-5個字母組成的單詞
'World':'@word(3, 5)',
//生成3-5個單詞組成的標題
'title':'@title(3,5)',
//生成2至5個句子的中文文本
'cParagraph':'@cparagraph(2, 5)',
//生成3至5個詞語組成的一箇中文句子
'cSentence':'@csentence(3, 5)',
//生成3-5個字組成的中文詞語
'cWorld':'@cword(3, 5)',
//生成3-5個詞語組成的中文標題
'ctitle':'@ctitle(3,5)',
// 生成姓名
'Name': '@name',
// 生成中文姓名
'cName': '@cname',
// 生成url地址
'Url': '@url',
//生成郵箱
'Email':'@email',
// 生成省 市 縣組成的地址
'Address': '@county(true)',
//生成Guid值
'Guid':'@guid()'
}
參考文檔:
Mockjs官網:https://github.com/nuysoft/Mock/wiki/Getting-Started
Mockjs快速入門:https://juejin.im/post/5cf726b5e51d454fbf5409bc
只是自己的隨筆總結,不喜勿噴,謝謝。