mock的使用

2019-06-11 本文已影响0人刘其瑞

mock.js是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

思考: 提个简单的开发需求:

请求后台某个接口,返回10-15条学生数据: 要求包含 姓名,年龄,性别. 成功状态码:200 .成功状态信息: success.

`响应数据结构分析:`
{
  status:200,
  msg:'success',
  stuInfo:
    {
      name:'abc',
      age:10,
      gender:0
    }
    ,
    ...
    ,
    {
      name:'abc',
      age:10,
      gender:0
    }
  ]
}
`方法1: 模拟后台(node/php + mysql)`
  1,搭建node服务器/Apache服务器 
  2,开启Mysql服务, 制定数据库,数据表,添加表信息(添加姓名,年龄,性别的值 和 值类型)
  3,使用node或者php语法关联数据库,声明查询sql语句,并执行sql.
  4,将查询db内容处理为json返回
代码量: 前端ajax+模板引擎20行左右 + 后台实现代码40行左右 + 繁琐的数据表设计 + 一条条的添加数据库内容  =  BOOM心态爆炸!!!

// 或者你可以...
`方法2: 完全脱离后台和数据库(mockjs配合vue的拦截器),或者 脱离数据库操作(mockjs简单的node后台)`
  1,搭建node服务器
  2,使用mockjs的mock方法制定随机数据
  3,处理为json返回
代码量: 前端ajax+模板引擎20行左右 + node服务响应mock数据11行 = 咦嘿嘿很开心!
代码:
  const app = reqire('express')
  const Mock = require('mockjs')
  app.get('/someApi',(req,res)=>{
    var resData = Mock.mock({
      'status':200,
      'msg':'success',
      'stuData|10-20':[{
        'name|1-3':/[a-z][A-Z]/,
        'age|+1':10,
        'gender|1':true
      }]
    })
    res.end(JSON.stringify(resData))
  })
  app.listen(3000)

一 Mockjs怎么用?

1 mock.js的使用

1.1.1 安装并引入mock.js

创建一个node服务器--server.js文件

// 引入express
const express = require('express');
// 创建服务对象
const app = express()
// 准备数据
var data = '123'
// 监听路由
app.get('/', (req, res) => { 
  res.end(data);
})
// 开启服务
app.listen(3000)

1.1.2 安装并引入mock.js

npm install mockjs 
或者 
script:src="http://mockjs.com/dist/mock.js"

1.1.3 mockjs模块模拟数据

  // 引进express
  const express = require('express');
  // 引进mockjs
  const Mock = require('mockjs')

  // 准备服务对象
  const app = express()

  // 监听路由
  app.get('/', (req, res) => {

    // 准备随机数据
    var data = Mock.mock({
      'list|1-20': [{
        'name|3-5': /[a-z][A-Z]/,
        'age|10-15': 15,
        'gender|1': true,
      }]
    })
    res.end(JSON.stringify(data));
  })

  // 开启服务
  app.listen(3000)

1.1.4 测试服务

在terminal窗口中运行命令nodemoon server.js
在浏览器中请求127.0.0.1:3000 观察响应体

1560216083(1).jpg

1.1.5 使用

这样在ajax请求相关接口就能返回内容随机,结构固定的JSON数据了

2 mockjs语法

2.1 Mock.mock()方法

加对象参数就可以生成响应数据

2.2 参数对象模板规则

属性名|生成规则：属性值 name | rule : value
name: 生成数据的名字字符串
|: 一定要加
rule: 生成数据的规则
|min-max 生成个数min至max条
|count 生成count条
|min-max.dmin-dmax 1-9.2-3 数字值在1-9之间,小数点后保留2-3位如 2.1 3.74
|min-max.dcount 1-9.2 数字值在1-9之间,小数点后保留2位如2.13 8.54
|count.dmin-dmax 10.1-2 整数部分是10,小数点部分1-2位如10.99 10.1
|count.dcount 10.2 整数部分是10,小数点部分2位如10.11 10.43
|+step 'score|+1':1, 以value 1为基准,递增1

value: 属性值的规则

字符串
'name|min-max': string
通过重复 string 生成一个字符串，min<=重复次数<=max

    'name|count': string 
    通过重复 string 生成一个字符串，重复次数==count。

数字
'name|+1': number
属性值自动加 1，初始值为 number。

    'name|min-max': number    
    number确定数据类型,生成值在min-max间的整数

    'name|min-max.dmin-dmax': number
    number确定数据类型,生成值在min-max间的小数

布尔
'name|1': boolean
随机生成一个布尔值,真假各50%
'name|t-f': true
随机生成一个布尔值,真占t/t+f 假占f/t+f

对象
'name|count': object
从属性值 object 中随机选取 count 个属性。

    'name|min-max': object
    从属性值 object 中随机选取 min 到 max 个属性。

数组

    'name|1': array
    从属性值 array 中随机选取 1 个元素，作为最终值。

    'name|+1': array
    从属性值 array 中顺序选取 1 个元素，作为最终值。

    'name|min-max': array
    通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

    'name|count': array
    通过重复属性值 array 生成一个新数组，重复次数为 count。
    
    var data = mock.mock({
      // 将value数组中的项(对象) 重复计算1-10次 添加到新数组返回
      'obj|1-10':[
        {
          'score|+1':1
        }
      ]
    })
    //生成 { obj: [ { score: 1 }, { score: 2 }, { score: 3 }, { score: 4 } ] }

函数(不用)
'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
正则
'name': regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。/[a-z][A-Z][0-9]/ /\w\W\s\S\d\D/ /\d{5,10}/ [\u4e00-\u9fa5]

2.3 Mock.valid( template, data ) 校验数据(处理请求发送来的数据,如果完全脱离后台就需要该方法)

在vue中可以脱离后台开发(参考文章)
template 必选, 表示数据模板，可以是对象或字符串

data 必选, 表示真实数据

    // 可以用来做基于mock的ajax请求参数的处理
    var template = {
        name: 'value1'
    }
    var data = {
        name: 'value2'
    }
    Mock.valid(template, data)//返回值是一个校验结果数组
    // 如果匹配则 返回空数组
    // 如果不匹配 messages属性表示tteamplate和data不匹配的原因

2.4 Mock.random工具对象

Mock.Random 是一个工具类，用于生成各种随机数据。不用掌握,用到就点击蓝字查