Mockjs 模拟后台接口数据的简单使用-vue

Mockjs模拟后台接口数据的简单使用-vue

Mock 可以进行生成随机数据，模拟后端接口数据，从而实现开发时，前后端分离，提高效率。

安装

npm install mockjs --save-dev

引入

import Mock from 'mockjs';

简单使用

Mock.mock('/api/user/list', {
  'data|10': [
    {
      'id|+1': 1,
      'name': '@cname',
      'age|18-60': 18,
      'address': '@city'
    }
  ]
});

语法规范

Mockjs的语法规范包括两部分：

• 数据模板定义规范
• 数据占位符

数据模板定义规范

数据模板定义规范用于定义数据结构。数据模板由一个或多个属性组成，每个属性由属性名和属性值组成。属性名和属性值之间使用冒号分隔，多个属性之间使用逗号分隔。

例如：

{
  'id|+1': 1,
  'name': '@cname',
  'age|18-60': 18,
  'address': '@city'
}

在这个数据模板中，id属性的值是自增的，name属性的值是随机生成的中文姓名，age属性的值是随机生成的18到60之间的整数，address属性的值是随机生成的城市名称。

数据占位符

数据占位符用于在数据模板中生成随机数据。数据占位符由一个或多个符号组成，每个符号代表一种随机数据类型。

例如：

• @cname：随机生成的中文姓名
• @city：随机生成的城市名称
• @date：随机生成的日期
• @time：随机生成的时间
• @email：随机生成的电子邮件地址
• @url：随机生成的URL地址
• @image：随机生成的图片URL地址
• @color：随机生成的十六进制颜色代码
• @boolean：随机生成的布尔值
• @number：随机生成的数字
• @string：随机生成的字符串
• @array：随机生成的数组
• @object：随机生成的对象

这些符号可以组合起来生成更复杂的数据结构。例如，以下数据模板会生成一个随机生成的用户信息对象：

{
  'id|+1': 1,
  'name': '@cname',
  'age|18-60': 18,
  'address': '@city',
  'phone': '@phone',
  'email': '@email'
}

结论

Mockjs是一个非常方便的工具，可以帮助开发者轻松进行前端开发。使用Mockjs，开发者可以模拟后端接口数据，从而实现前后端分离，提高开发效率。