从多个方面详细阐述Mock数据

一、Mock数据是什么意思

Mock数据是指用于模拟真实数据以测试软件功能的一种数据类型。Mock数据是假数据，与真实数据并不相同，但与真实数据有一定的相似程度。Mock数据可以用于模拟各种数据类型，如数字、字符串、日期、布尔值、数组等。

二、Mock数据的应用场景

1、前端开发

前端开发过程中需要访问后端接口获取数据，但是后端开发还没有完成对应接口或者接口还在开发阶段，此时使用Mock数据可以完成前端页面的开发和测试。

// Vue中使用Mock数据示例
import Mock from 'mockjs'
Mock.mock('/api/data', 'get', () => {
  return {
    code: 200,
    data: {
      name: 'Mock数据',
      age: 25
    }
  }
})

2、测试用例编写

Mock数据用于编写测试用例，测试用例可针对Mock数据和真实数据进行测试，以检测软件是否有错误。

// 单元测试使用Mock数据示例
import {sum} from './math.js'
import Mock from 'mockjs'
it('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})
it('adds 1 + 2 (mock data) to equal 3', () => {
  Mock.mock('/api/mockdata', 'get', () => {
    return {
      code: 200,
      data: {
        num1: 1,
        num2: 2
      }
    }
  })
  expect(sum(Mock.mock('/api/mockdata').num1, Mock.mock('/api/mockdata').num2)).toBe(3)
})

三、Mock数据格式

Mock数据格式为JSON格式，通过定义JSON规则生成Mock数据。Mock.js是一个生成Mock数据的js库，可以使用Mock.js来生成符合规则的Mock数据。

// Mock数据格式示例
{
  'string|1-10': '★', // 生成随机长度在1-10之间的星号字符串
  'number|+1': 0, // 每次调用值+1
  'boolean|1-2': true, // 随机返回true或false
  'list|1-10': [{ // 生成1-10个对象
    'id|+1': 1, // 每个对象的id自增
    'name': '@cname', // 随机生成中文名字
    'age|18-60': 18 // 生成18-60岁之间的整数
  }]
}

四、Mock数据中啥意思

Mock数据中各字段含义如下：

• 字符串类型：'name|min-max': string，生成长度在min-max之间的字符串
• 数字类型：'name|+n': number，每次调用值+n
• 布尔类型：'name|1-2': boolean，随机返回true或false
• 数组类型：'name|min-max': array，生成长度在min-max之间的数组
• 对象类型：'name': object，生成一个空对象
• 函数类型：'name': function，生成一个函数

五、Mock数据报431 too large

在使用NodeJS的Express框架时，当前端请求返回的数据过大时会报431 too large的错误。此时需要在服务器端添加limit属性解决问题。

// 服务器端解决431 too large示例
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json({limit: '50mb'})) // 设置50mb的限制

六、Mock数据中标红

在开发过程中，需要对Mock数据中某些字段进行标红，以便于快速识别。在Vue项目中，可以使用自定义指令来实现。

// 带标红Mock数据示例
@{{message}}
// 自定义标红指令
Vue.directive('red', {
  bind: function (el, binding, vnode) {
    el.style.color = 'red'
    el.innerHTML = binding.value
  }
})

七、前端模拟数据Mock

前端模拟数据Mock是指前端在不依赖后端数据的情况下，使用本地数据进行页面开发和测试。在Vue项目中，可以使用VueCLI提供的Mock数据功能。

// VueCLI中 Mock 数据示例
// 创建 vue.config.js 文件
module.exports = {
  devServer: {
    before(app) {
      app.get('/api/mock', (req, res) => {
        res.json({
          code: 200,
          data: {
            name: 'VueCLI Mock 数据',
            age: 30
          }
        })
      })
    }
  }
}

八、Mock数据怎么转成数组

Mock数据可以通过Object.values()将其转换成数组形式，方便其在前端的应用。在Vue项目中，可以使用computed属性将Mock数据转化成可用的数组。

// Mock转数组示例
const data = {
  'name': 'Mock数据',
  'age': 25
}
const arrData = Object.values(data) // ["Mock数据", 25]

// Vue项目中computed使用示例
export default {
  data() {
    return {
      mockData: {
        name: 'Vue',
        score: 90
      }
    }
  },
  computed: {
    mockArray() {
      return Object.values(this.mockData)
    }
  }
}