使用Mockjs模拟数据请求

用mockjs生成数据,不需要等待接口即可调试

一、安装

• 用npm包管理工具安装

npm install mockjs

• 标签引入

<script src="http://mockjs.com/dist/mock.js"></script>

二、生成随机数据

Mock.js 的语法规范包括两部分：

• 数据模板定义（Data Temaplte Definition，DTD）
• 数据占位符定义（Data Placeholder Definition，DPD）

1. 将字符串随机重复1遍-10遍

Mock.mock({
  "string|1-10": "★"
})

// {
//   "string": "★★★"
// }

2. 将一个字符串随机重复5遍

Mock.mock({
  "string|5": "★"
})

// {
//   "string": "★★★★★"
// }

3. 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2

Mock.mock({
  "boolean|1": true
})

// {
//   "boolean": true
// }

4. 从属性值 {} 中随机选取 2 个属性

Mock.mock({
  "object|2": {
    "310000": "上海市",
    "320000": "江苏省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})

// {
//   "object": {
//     "310000": "上海市",
//     "330000": "浙江省"
//   }
// }

5. 从属性值 {} 中随机选取 2 到 4 个属性

Mock.mock({
  "object|2-4": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }
})

// {
//   "object": {
//     "110000": "北京市",
//     "120000": "天津市",
//     "130000": "河北省",
//     "140000": "山西省"
//   }
// }

6. 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值

Mock.mock({
  "array|1": [
    {title:"AMD"},
    {title:"CMD"},
    {title:"UMD"},
  ]
})

// {
//   "array": {
//       title:"CMD"
//   }
// }

7. 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 2，小于等于 3

Mock.mock({
  "array|2-3": [
    {title:"AMD"},
    {title:"CMD"},
    {title:"UMD"},
  ]
})

// {
//   "array": [
//     {
//         "title": "AMD"
//     },
//     {
//         "title": "CMD"
//     },
//     {
//         "title": "UMD"
//     },
//     {
//         "title": "AMD"
//     },
//     {
//         "title": "CMD"
//     },
//     {
//         "title": "UMD"
//     }
//   ]
// }

8. 传入一个正则，返回符合正则的字符串

Mock.mock({
  'regexp': /[a-z][A-Z][0-9]/
})

// {
//   "regexp": "uD2"
// }

9. Mock对象中有一个Random方法，利用Random方法我们可以做很多事情：

var Random = Mock.Random
Random.integer(20,100)   //随机返回20到100的数字
Random.float(60, 100, 3, 5) //随机返回60到100的带有3到5位小数的数字
Random.string() //随机返回一个字符串
Random.string(5) //随机返回一个长度为5的字符串
Random.string(7, 10)//随机返回一个长度为5到7位的字符串
Random.date()//随机返回一个日期
Random.date('yyyy-MM-dd')//随机返回一个格式化日期
Random.image()//随机返回一张图片
Random.image('200x100')//随机返回一张带尺寸的图片
Random.image('200x100', '#FF6600')//随机返回一张带尺寸和颜色的图片
Random.paragraph()//随机返回一段文字
Random.cparagraph()//随机返回一段中文文字
Random.cparagraph(1, 3)//随机返回1到3段中文文字
Random.csentence()//随机返回一句中文
Random.ctitle()//随机返回一个中文标题

三、注意

Mock.mock({
    'list|2-10': [{
        'id': Random.integer(20,100),
        'name':Random.ctitle(),
        'date':Random.date("yyyy-MM-dd")
    }]
});

这样写会使返回的每个数据重复

// {
//     "list": [
//         {
//             "id": 57,
//             "name": "边且反认",
//             "date": "1989-08-12"
//         },
//         {
//             "id": 57,
//             "name": "边且反认",
//             "date": "1989-08-12"
//         },
//         {
//             "id": 57,
//             "name": "边且反认",
//             "date": "1989-08-12"
//         }
//     ]
// }

如果想在 list 里返回数据不同的数组, Mock 模板里属性的值可以是 Function

Mock.mock({
    'list|2-10': [{
        'id': ()=>Random.integer(20,100),
        'name': ()=>Random.ctitle(),
        'date':()=>Random.date("yyyy-MM-dd")
    }]
});

// {
//     "list": [
//         {
//             "id": 74,
//             "name": "但称青气",
//             "date": "2004-10-31"
//         },
//         {
//             "id": 32,
//             "name": "三六属集",
//             "date": "2008-06-28"
//         },
//         {
//             "id": 28,
//             "name": "装造始",
//             "date": "1975-04-29"
//         }
//     ]
// }

四、参考文章

• 使用Mock.js模拟数据请求
• Mock.js