当前位置: 首页 > 工具软件 > mock-fs > 使用案例 >

Mock

公冶才
2023-12-01

概念

优点

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

定义数据模板规则

每个属性由 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()"
      })
      }
 类似资料: