在Vue项目中使用Mock.js构造模拟数据

Posted on

mockjs

00x1 mockjs简介

  mock.js是一款开发前端虚拟接口的插件，主要有两个功能

  • 生成随机数据
  • 拦截Ajax请求
    00x2 在vue-cli项目中安装配置mockjs

  首先确保安装并成功引入axios；
  然后安装mockjs npm install mockjs –save-dev；
  在main.js文件中引入mockjs并配置axios跨域信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
require('./mock.js')  
//配置axios跨域请求头部
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
//配置axios请求拦截器
axios.interceptors.request.use(function(config) {
    return config;
  }, function(error) {
    return Promise.reject(error);
  })
//配置axios响应拦截器
axios.interceptors.response.use(function(response) {
  return response;
}, function(error) {
  return Promise.reject(error);
})
//封装axios的post请求
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params).then(response => {
        resolve(response.data);
      }).catch((error) => {
        reject(error);
      })
  })
}
//封装接口信息
export default {
  http(url, params) {
    return fetch(url, params);
  }
}

00x3 Mock.js语法

  mock.js语法分为两种，数据模板定义和数据占位符定义

  • 数据模板定义
    基本结构：属性名|生成规则:属性值
    1
    2
    3
    4
    5
    6
    7
    （1）'name|min-max': value
    （2）'name|count': value
    （3）'name|min-max.dmin-dmax': value
    （4）'name|min-max.dcount': value
    （5）'name|count.dmin-dmax': value
    （6）'name|count.dcount': value
    （7）'name|+step': value

(1)属性值是字符串String

1
2
3
4
5
1. name|min-max: string
通过重复string生成一个字符串，重复次数大于等于min，小于等于max。这里的重复是指对初始化string的重复次数。
2. name|count: string
通过重复string生成一个字符串，重复次数等于count。

(2)属性值是数字Number

1
2
3
4
5
6
7
8
1. name|+1 : number
属性值自动加1， 初始值为number
2. name|min-max: number
生成一个大于等于min，小于等于max的整数。
3. name|min-max.dmin-dmax: number
生成一个浮点数，整数部分大于等于min，小于等于max，小数部分保留dmin到dmax位。

（3）属性值是布尔类型Boolean

1
2
3
4
5
1. name|1: boolean
随机生成一个布尔值，值为true的概率为1/2， 值为false的概率为1/2。
2. name|min-max: value
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

（4）属性值是对象Object

1
2
3
4
5
1. name|count: object
从属性值object中随机选取count个属性
2. name|min-max: object
从属性值object中随机选取min到max个属性

(5) 属性值是数组Array

1
2
3
4
5
6
7
8
9
10
11
1. name|1: array
从属性值array中随机选取一个元素，作为最终值
2. name|+1: array
从属性值array中顺序选取一个元素，作为最终值
3. name|min-max: array
通过重复属性值array生成一个新数组，重复次数大于等于min，小于等于max。
4. name|count: array
通过重复属性值array生成一个新数组，重复次数为count。

(6) 属性值是函数Function

1
2
3
'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

(7) 属性值是正则表达式RegExp

1
2
1. name: regexp
根据正则表达式regexp反向生成可以匹配他的字符串。用于生成自定义格式的字符串。

  • 数据占位符定义
    基本结构：属性名：占位符
    1
    'name|':'@占位符()'

  占位符也可以引用数据模板中的属性；占位符会有限引用数据模板中的属性；占位符支持相对路径和绝对路径。

00x4 Mock.mock()

  • Mock.mock(rurl?, rtype?, template|function(options))

    根据数据模板生成模拟数据

  • Mock.mock(template)

    根据数据模板生成模拟数据。

  • Mock.mock(rurl, template)

    记录数据模板，当拦截到匹配rurl的ajax请求时，根据数据模板生成模拟数据，并作为响应数据返回。

  • Mock.mock(rurl, function(options))

    记录用于生成响应数据的函数。当拦截到匹配rurl的ajax请求时，函数function执行，并把执行结果作为响应数据返回。

  • Mock.mock(rurl, rtype, template)

    记录数据模板，当拦截到匹配rurl和rtype的ajax请求时，将根据数据模板生成模拟数据，并作为响应数据返回。

  • Mock.mock(rurl, rtype, function(options))

    记录用于生成响应数据的函数。当拦截到匹配rurl和rtype的ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。

  • rurl

    标识需要拦截的url，可以是url字符串或者url正则：

1
/\/domain\/list\.json/、'/domian/list.json'。

  • rtype

    可选，标识需要拦截的ajax请求类型。例如GET, POST, PUT, DELETE等。

  • template

    可选，标识数据模板，可以是对象或字符串。

  • function(options)

    可选，表示用于生成响应数据的函数。

  • options

    指向本次请求的ajax选项集，含有url， type和body三个属性。

    00x5 构造模拟数据

  新建一个mock.js文件，在mock.js文件中引入mockjs

1
const Mock = require('mockjs');

  根据mock.js语法格式构造模拟数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export default Mock.mock('http://test.com', {
    'cur_ip':{
        'data':'@date',
        'ip':'@ip',
        'number|1-100':10000, 
        'rank|1-100':20,
        'info':'@title(3)',
    },
    'cur_whois':[{
        'alexa|1-300':100,
        "cdate":'@datetime',
        "edate":'@datetime',
        "name_server":'@domain',
        "registrant_address":'@county(true)',
        "registrant_company":'@ctitle(3, 5)',
        "registrant_email":'@email',
        "registrant_name":'@name(true)',
        "registrant_phone":/^1[0-9]{10}$/,
        "registrar_name":'@name(true)',
        "udate":'@datetime',
     }],
    'history_ip|20':[{
        "date":'@datetime',
        "ip":'@ip',
        "info":'@title(3)',
    }],
}）

  mock.js也支持模拟ajax请求响应时间，自定义的响应时间可以是绝对值，也可以是区间。

1
2
3
4
5
6
Mock.setup({
    timeout: 40000//40秒后再响应
})
Mock.setup({
    timeout: '10000-40000'//在10秒和40秒之间响应
})

00x6 请求获取数据

  在需要数据的页面中引入构造的mock的api

1
import mock from '../main.js'

  请求获取数据

1
2
3
mock.http('http://test.com', 'type=top&key=123456').then(res => {
  console.log(res);
});

  完成到这一步后，打开项目就可以看到已经生成的模拟数据，亲测可用。如果只是想了解mockjs语法，可以在打开官网，直接使用示例语法在浏览器控制台上进行测试。

参考：
http://mockjs.com/examples.html

Miss Me wechat
light