1. mock的作用

模拟后台接口,提供页面需要的数据。

2. mock的语法规范

使用例子:

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数,起始值为 1,每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data))

(1) 数据模板说明

数据模板中的每个属性由3部分构成('name|rule': value):属性名、生成规则、属性值:

  • name: 属性名;
  • rule:生成规则;
  • value:属性值。
    注意:
  • 属性名和 生成规则之间用竖线 | 分隔;
  • 生成规则是可选的;
  • 生成规则有7种格式:
    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.dcount':value
    7. 'name|+step': value
  • 生成规则的含义需要依赖属性值的类型才能确定。
  • 属性值中可以含有 @占位符
  • 属性值还指定了最终值的初始值和类型。

(2) 生成规则和示例

① 属性值是字符串 String

  • name|min-max': string
    通过重复 string 生成一个字符串,重复此数大于等于 min ,小于等于 max
  • name|count': sting
    通过重复 string 生成一个字符串,重复次数等于 count

② 属性值是数字 Number

  • name| +1': number
    属性值自动加1,初始值为 number
  • name|min-max': number
    生成一个大于等于min 、小于等于 max 的整数,属性值 number 只是用来确定类型。
  • name|min-max.dmin-dmax': number
    生成一个浮点数,整数部分大于等于 min、小于等于max,小数部分保留 dmindmax 位。
Mock.mock({
  'number1|1-100.1-10':1, // 数字,整数位1<= x <= 100,有1~10位小数
  'number2|123.1-10':1, // 数字,整数位 x === 123,有1~10位小数
  'number3|123.3':1, // 数字,整数位 x === 123,有3位小数
  'number4|123.10':1.23, // 数字,整数位 x === 123,有10位小数
})
/* 
=>
{
  number1: 32.6558724,
  number2: 123.3822414,
  number3: 123.641,
  number4: 123.2330882016
}
*/

③ 属性值是布尔型 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 中随机选取 minmax 个属性。

⑤ 属性值是数组 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
    执行函数 funcion ,取其返回值作为最终的属性值,函数的上下文为属性 '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}/
      })
    /*
    [a-z]: 任意小写字母字符;
    [A-Z]: 任意大写字母字符;
    [0-9]: 任意0~9的数字;
    \w: 匹配包括下划线的任意单词字符;
    \W: 匹配任何非单词字符;
    \s: 匹配任何不可见字符;
    \S: 匹配任何可见字符;
    \d: 匹配一个数字字符;
    \D: 匹配一个非数字字符;
    \d{n,m}: 匹配n~m位数字
    */
    /* 
    =>
    {
    regexp1: "iA5",
    regexp2: "b< 07M",
    regexp3: "11585411"
    }
    */
    

(3) 数据占位符定义规范

占位符只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符的格式为:

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

注意

  1. @ 来标识其后的字符串是 占位符;
  2. 占位符引用的是 Mock.Random 中的方法;
  3. 通过 Mock.Random.extend() 来扩展自定义占位符;
  4. 占位符也可以引用 数据模板中的属性;
  5. 占位符会优先引用数据模板中的属性;
  6. 占位符支持相对路径和绝对路径。
Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last:'@LAST',
    full:'@first @middle @last'
  }
})

/* 
{
  name: {
    first: "Thomas",
    full: "Thomas Timothy Williams",
    last: "Williams",
    middle: "Timothy"
  }
}
 */	

3. mock 在vue 项目中的使用

(1) 安装mock

yarn add mockjs --dev

(2) 创建 mock相关文件

// /mock/index.js文件(mock的总引用文件)
const Mock = require('mockjs')
const course = require('./course')

const mocks = [
   ...course
]

function mockXHR() {
 for (const i of mocks) {
   Mock.mock(new RegExp(i.url), i.type || 'get', i.response)
 }
}

module.exports = {
 mocks,
 mockXHR
}
// /mock/course.js(模块中的模拟数据的创建)
const Mock = require('mockjs')
const list = []
const count = 200 // 定义创建的数据个数
for (let i = 0; i < count; i++) {
  list.push(Mock.mock({
    // 商品Id
    id: '@increment',
    //商品名称
    name: '@ctitle(5,10)',
    //商品地址
    address: '@county(true)',
    //商品等级评价★
    star: '@integer(1,5)',
    //商品图片
    image: '@Image("100x100","@color","")',
    //商品售价
    price: '@float(0, 100, 2, 2)'
  }))
}

module.exports = [
  {
    url: '/demo/course/list',
    type: 'get',
    response: () => {
      return {
        code: 200,
        data: {
          total: list.length,
          list: list
        }
      }
    }
      }
]
// /api/course.js(接口的定义)
import request from '@/utils/request'
export function getCourseList(params) {
  return request({
    url: '/demo/course/list',
    method: 'get',
    params
  })
}
// /utils/request.js(接口的封装)
import axios from 'axios'
import { getToken } from '@/utils/auth'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 500
})

service.interceptors.request.use(
  config => {
    config.headers['X-Token'] = getToken()
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// response interceptors
service.interceptors.response.use(response => {
  const res = response.data
  if (res.code !== 200) {
    console.error('Error')
  } else {
    return res.data
  }
}, error => {
  console.log('err', error)
  return Promise.reject(error)
})
export default service

// main.js(引入并初始化mock)
const { mockXHR } = require('./mock')
mockXHR()
// vue页面中的使用
  import { getCourseList } from '@/api/course'
  getCourseList().then(res => {
        console.log(res.list)
        });
Logo

前往低代码交流专区

更多推荐