在vue项目中mock的使用

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，小数部分保留 dmin 到 dmax 位。

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 中随机选取 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
  执行函数 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)
        });