mock的语法及使用

如何在vue项目中使用mock

有时后端接口还没有写好,前端开发进度比后端快,这是我们可以使用mock进行一个请求数据的模拟(并没有真的发请求,在请求发出去之前就被mock拦截,返回数据,所以在internet面板中看不到)

安装mockjs

npm i mockjs

在vue中使用mockjs

import Mock from "mockjs";
import jsonInfo from "./jsonData.json";  // 这是自己写的一些json数据

// mock直接返回一个对象,第三个参数可以直接为对象,也可以使用函数返回一个对象
const userInfo = Mock.mock("/user/info", "get", () => {
  return {
    name: "马什么梅",
    age: 25
  };
});
// 返回引入的json数据
const jsonData = Mock.mock("/json/data", "get", jsonInfo);
// 使用mock模拟数据返回
const mockList = Mock.mock("/mock/list", "post", {
  "data|10": [
    {
      "index|+1": 0,
      num: "@increment",
      name: "@cname",
      gender: "@integer(0,1)",
      text: "this is mock data",
     date: "@date",
     text: "this is mock data"
    }
  ]
});
import "./mock.js";
import axios from "axios";

  created() {
    axios.get("/user/info").then(res => {
      console.log(res);
    });

    axios.get("/json/data").then(res => {
      console.log(res);
    });

    axios.post("/mock/list").then(res => {
      console.log(res);
    });
  }

mock语法使用小总结

生成数据的一些常用语法

生成字符串

生成指定次数字符串

const data = Mock.mock({
    "string|4": "yx!"
})
console.log(data)

生成指定范围长度字符串

const data = Mock.mock({
    "string|1-8": "yx"
})
console.log(data)

生成一个随机字符串

const data = Mock.mock({
    "string": "@cword"
})
console.log(data)

生成指定长度和范围

const data = Mock.mock({
    string: "@cword(1)",
    str: '@cword(10,15)'
})
console.log(data)

生成标题和句子

const data = Mock.mock({
    title: "@ctitle",
    sentence: '@csentence'
})
console.log(data)

生成指定长度的标题和句子

const data = Mock.mock({
    title: "@ctitle(8)",
    sentence: '@csentence(50)'
})

生成指定范围的

const data = Mock.mock({
    title: "@ctitle(5,8)",
    sentence: '@csentence(50,100)'
})
console.log(data)

生成段落

const data = Mock.mock({
    content: '@cparagraph()' 
})
console.log(data)
生成数字

生成数字

const data = Mock.mock({
    "number|1-999": 1
})
console.log(data)

生成增量id

const data = Mock.mock({
    id: '@increment()'
})
console.log(data)

随机生成整数

整数需要范围在integer后面加最小最大范围

const data = Mock.mock({
    id: '@integer'
})
console.log(data)
生成姓名-地址-身份证号
const data = Mock.mock({
    name: '@cname()',
    idCard: '@id()',
    address: '@city(true)' // 如果@city(),只会生成市,如果@city(true)会生成省和市
})
console.log(data)
随机生成图片
  • 参数1:图片可选大小
  • 参数2:图片背景色
  • 参数3:图片前景色
  • 参数4:图片格式
  • 参数5:图片文字
  const data = Mock.mock({
      image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"
  })
  console.log(data)
生成时间

生成指定格式时间:@date(yyyy-MM-dd hh:mm:ss)

const time = Mock.mock({
    time1: '@date()', // 只有年月日
    time2: '@date(yyyy-MM-dd hh:mm:ss)'
})
console.log(time) 
生成数组
  • 指定长度:‘data|5’
  • 指定范围:‘data|5-10’
const data = Mock.mock({
    'list|10-99':[
        {
            name: '@cname()',
            address: '@city(true)',
            id: '@increment(1)' // 每次都增加1
        }
    ]
})

语法规范-数据模板定义

数据模板中每个属性由3部分组成: 属性名|生成规则:属性值

  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.dcout’: value
  7. ‘name|+step’: value

属性值中可以包含@占位符 属性值还指定了最终值的初始值和类型

1.属性值是字符串
  1. ‘name|min-max’: string

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

  1. ‘name|count’: string

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

2.属性值是数字
  1. ‘name|+1’: number

属性值自动加 1,初始值为 number

  1. ‘name|min-max’: number

生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型

  1. ‘name|min-max.dmin-dmax’: number

生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位

3.属性值是布尔值
  1. ‘name|1’: boolean

随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2

  1. ‘name|min-max’: value

随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)

4.属性值是对象
  1. ‘name|count’: object

从属性值 object 中随机选取 count 个属性

  1. ‘name|min-max’: object

从属性值 object 中随机选取 min 到 max 个属性

5.属性值是数组
  1. ‘name|1’: array

从属性值 array 中随机选取 1 个元素,作为最终值

  1. ‘name|+1’: array

从属性值 array 中顺序选取 1 个元素,作为最终值

  1. ‘name|min-max’: array

通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max

  1. ‘name|count’: array

通过重复属性值 array 生成一个新数组,重复次数为 count

6.属性值是函数
  1. ‘name’: function

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

7.属性值是正则表达式
  1. ‘name’: regexp

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

Mock.mock拦截

  • Mock.mock( requestUrl?, requestType?, template|function(options) )
  • Mock.mock( template )
  • Mock.mock( requestUrl, template )
  • Mock.mock( requestUrl, requestType, template )
  • Mock.mock( requestUrl, requestType, function(options) )

requestUrl: 要拦截的URL,字符串或正则表达式
equestType: 要拦截的请求类型,get/post/put/delete/options…
template: 数据模板
function(options):生成响应数据的函数,options --> { url, type, body }

Mock.setup控制请求时长

  Mock.setup({
    timeout: 500
  })
  Mock.setup({
    timeout: '100-600'
  })
Logo

前往低代码交流专区

更多推荐