Mock

概念

优点

• 前后点分离
• 开发无侵入
• 数据类型丰富
• 用法简单
• 方便扩展
• 增加单元测试的真实性

定义数据模板规则

每个属性由 3 部分构成：属性名、生成规则、属性值

• ‘name|rule’: value

生成规则 有 7 种格式

• ‘name|min-max’: value
• ‘name|count’: value
• ‘name|min-max.dmin-dmax’: value
• ‘name|min-max.dcount’: value
• ‘name|count.dmin-dmax’: value
• ‘name|count.dcount’: value
• ‘name|+step’: value

属性值语法

属性值是字符串

• ‘name|min-max’: string：重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
• ‘name|count’: string：重复 string 生成一个字符串，重复次数等于 count

属性值是数字

• ‘name|+1’: number：属性值自动加 1，初始值为 number
• ‘name|min-max’: number：生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型
• ‘name|min-max.dmin-dmax’: number：生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

属性值是布尔型 Boolean

• ‘name|1’: boolean：随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
• ‘name|min-max’: value：随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)

属性值是对象 Object

• ‘name|count’: object：属性值 object 中随机选取 count 个属性
• ‘name|min-max’: object：属性值 object 中随机选取 min 到 max 个属性

属性值是数组 Array

• ‘name|1’: array：属性值 array 中随机选取 1 个元素，作为最终值
• ‘name|+1’: array：属性值 array 中顺序选取 1 个元素，作为最终值
• ‘name|min-max’: array：重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max
• ‘name|count’: array：重复属性值 array 生成一个新数组，重复次数为 count

属性值是函数 Function

• ‘name’: function：执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象

属性值是正则表达式 RegExp

• ‘name’: regexp：根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串

  - Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
    })
    // =>
    {
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
    }

数据占位符定义规范 DPD

• 占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中

• 占位符 的格式

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

• 注意

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

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

常用占位符

随机字符串

• @string(lower,10)
• lower : 小写字母
• upper : 大写字母
• number : 数字

随机int

• (下限 , 上限)
  @integer(60, 100)

随机boolean

• @boolean

随机float/double

• (下限 , 上限)
  @float(60, 100)

随机日期(yyyy-mm-dd)

• @date

随机时间(hh:mm:ss)

• @time

随机日期+时间(yyyy-mm-dd hh:mm:ss)

• @datetime

当前日期+时间(yyyy-mm-dd hh:mm:ss)

• @now

随机图片占位符 ,会生成一个图片链接

• @image(200x100)

随机颜色(#79f2ac)

• @color

长文本

• @paragraph 英文
• @cparagraph 中文

随机生成中文名

• @cname

常用特殊格式

• @url 链接
• @domain 域名
• @email 邮箱
• @ip IP
• @region 地区(华东,华南…)
• @province 省
• @city 市
• @county 县
• @zip 邮编
• @guid 随机GUID
• @id 随机ID(Long)

以上占位符大部分参考博客园太清

以下内容部分参考官方文档

Mock方法

Mock.mock()

• Mock.mock( template )：根据数据模板生成模拟数据。

• Mock.mock( rurl, template )：记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回

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

• Mock.mock( rurl, rtype, template )：记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

• Mock.mock( rurl, rtype, function( options ) )：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 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 规范

Mock.setup()

Mock.setup( settings ) -----目前仅限于ajax请求

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout

• settings
  • 必选。
  • 配置项集合
• timeout
  • 可选。
  • 指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 ‘-’ 风格的字符串，例如 ‘200-600’，表示响应时间介于 200 和 600
    毫秒之间。默认值是’10-100’

  Mock.setup({
    timeout: 400
    })
    Mock.setup({
    timeout: '200-600'
    })

Mock工具类

Mock.Random

• 用于生成各种随机数据
• Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数])

使用

vue中

创建一个json5文件，注意json5需要下插件，在文件里定义所需的随机数据

 {
    //随机生成id
    id: '@id',
    // 随机生成中文名字
    username: '@cname',
    // 随机生成日期
    date: '@date()',
    // 生成图片，参数size，background
    avatar: "@image('200x200', '#50B347', '#FFF', 'avatar')",
    // foreground,text
    // 描述
    description: "@paragraph()",
    // ip
    ip: '@ip()',
    // email
    email:"@email()"
    }

在vue.config.js中devServer里加入before属性进行拦截

   module.exports = {
    devServer: {
    open: true,
    before: require('./mock/index.js')
    }
    }

创建js文件来开启服务器

const fs = require('fs')
    const path = require('path')
    const Mock = require('mockjs')
    const JSON5 = require('json5')

// 读取json文件
function getJsonFile (filePath) {
  // 读取指定json文件，搭配path根路径
  var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
  // 解析并返回
  return JSON5.parse(json)
}
module.exports = function (app) {
  // 配置环境变量，方便后期接口上线进行关闭
  if (process.env.MOCK == 'true') {
    console.log(process.env.MOCK,8989);
    // 监听http请求
    app.get('/user/userinfo', function (rep, res) {
      const json = getJsonFile('./userinfo.json5')
      // 将json传入Mock.mock方法中，生成的数据返回给浏览器
      res.json(Mock.mock(json))
    })
  }
}

• 再使用数据的vue组件中导入axios发起对应的请求

后端接口上线解决方案

• 定义一个环境变量参考vue脚手架文档
• 创建.env.development文件，并定义一个变量
• 通过该变量去判断是否去开启请求，查看上诉代码
  process.env.MOCK == ‘true’

jquery中

• 按需导入mock文件与jquery文件

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta2/mock-min.js"></script>

• 创建js文件，创建mock随机数据

Mock.mock('/user/userinfo', 'get', {
     id: '@id',
     // 随机生成中文名字
     username: '@cname',
     // 随机生成日期
     date: '@date()',
     // 生成图片，参数size，background
     avatar: "@image('200x200', '#50B347', '#FFF', 'avatar')",
     // foreground,text
     // 描述
     description: "@paragraph()",
     // ip
     ip: '@ip()',
     // email
     email:"@email()"
     })

• 导入mock的js文件，通过ajax来发起对应请求获取数据（在mock文件后）

$.ajax({
    url: '/user/userinfo',
    datatype:'json',
    success:function(res){
        console.log(res);
    },
    })

后端接口上线解决方案

• 直接注销导入mock的js文件
• 在导入文件上方在定义一个script标签传入一个参数，通过参数去判断

  <script>MOCK = false </script>

    // 第二种方法
      if (MOCK === true) {
      Mock.mock('/user/userinfo', 'get', {
      id: '@id',
      // 随机生成中文名字
      username: '@cname',
      // 随机生成日期
      date: '@date()',
      // 生成图片，参数size，background
      avatar: "@image('200x200', '#50B347', '#FFF', 'avatar')",
      // foreground,text
      // 描述
      description: "@paragraph()",
      // ip
      ip: '@ip()',
      // email
      email:"@email()"
      })
      }