Mock

最新推荐文章于 2024-09-04 16:12:03 发布

cjh_code

最新推荐文章于 2024-09-04 16:12:03 发布

阅读量1k

点赞数 6

分类专栏： mock 文章标签： js vue json

本文链接：https://blog.csdn.net/m0_48651355/article/details/121291297

版权

mock 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

概念

优点

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

定义数据模板规则

每个属性由 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()"
      })
      }

cjh_code

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Mock

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
复制链接

扫一扫