Mock.js入门

每天都是不一样的太阳
143 阅读4分钟

定义

生成随机数据，拦截 Ajax 请求.

特征

  • 前后端分离
    • 让前端攻城师独立于后端进行开发。
  • 增加单元测试的真实性
    • 通过随机数据，模拟各种场景。
  • 开发无侵入
    • 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
  • 用法简单
    • 符合直觉的接口。
  • 数据类型丰富
    • 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  • 方便扩展
    • 支持支持扩展更多数据类型，支持自定义函数和正则。

安装

开始 & 安装

npm install mockjs

使用：

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

语法规范

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

  1. 数据模板定义规范（Data Template Definition，DTD）
  2. 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：

  • 属性名 和 生成规则 之间用竖线 | 分隔。

  • 生成规则 是可选的。

  • 生成规则

    有 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. 'name|min-max': string

    通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

  2. 'name|count': string

    通过重复 string 生成一个字符串，重复次数等于 count。

更多类型示例参考

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。 占位符 的格式为：

@占位符
@占位符(参数 [, 参数])

注意：

  1. 用 @ 来标识其后的字符串是 占位符。
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性。
  6. 占位符 支持 相对路径 和 绝对路径。

示例

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

Mock.mock-拦截 Ajax 请求.

参数规则 Mock.mock( rurl?, rtype?, template|function( options ) )rurl

可选。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。

rtype

可选。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

template

可选。

表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

function(options)

可选。

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

options

指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。

从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。

示例 创建api.js

//api.js
import Mock from 'mockjs'

const url = {
    tableData1: 'http://xxx/getData01',
    tableData2: 'http://xxx/getData02',
    tableData3: 'http://xxx/getData03',
}
export default [
    Mock.mock(url.tableDataOne, {
        'dataSource|5':[{
            'key|+1': 1,
            'mockTitle|1':['qq, 'qw', 'we', 'qwewq'],
            'mockContent|1': ['11', '22', '33', '44'],
            'mockAction|1': ['1', '2', '3']
        }]
    })
]

我们在去组件中引入api.js, 然后用axios请求它！

import axios from 'axios'

//按需引入api文件, 但后面会导致删除麻烦的问题.
import '../../mock/api'

componentDidMount(){
    const that = this;  
    axios.get('http://xxx/tableData01').then((res) => {
        if(res.status == 200){
            that.setState({
                dataSource: res.data.dataSource
            })
        }
    })
}

render(){
    const { dataSource } = this.state;
    
    return(
        <Table
            style={{marginTop: 10}}
            columns={columns}
            dataSource={dataSource}
        />
    )
}

这样就可以拿到自己mock的数据了。

参考

Mock官网示例-生成随机数据

总结

  1. 根据Mockjs的规范，我们可以通过对应的方法，生成自定义数据。按规则。
  2. 利用Mock.mock()方法，自定义实现接口，实现接口的拦截，再不需要后端的情况下，可以生产数据，自产自销。
  3. Mock.toJSONSchema()方法，可以根据指定的templtea，转化为JSON Schema。背后的依据还是JSON Schema
avatar
文章
阅读
粉丝