vue 运用mock数据的示例代码

关于“Vue 运用Mock数据的示例代码”，我这里为你提供一份完整的攻略。

什么是Mock数据

先来了解一下什么是Mock数据。简单来说，Mock数据就是在数据量不足或者无法取得真实数据时，使用伪造（Mock）的数据，来模拟真实数据从而进行开发和测试的技术。

在Vue开发中，Mock数据的使用可以让我们快速的进行组件测试，避免依赖后端接口数据来进行开发和测试，提高开发效率。

Mock.js简介

Mock.js 是一个模拟数据生成器，可以让前端开发独立于后端，快速生成数据。

实现方法

安装

第一步，我们需要安装 Mock.js。可以通过npm进行安装。

npm install mockjs --save-dev

新建Mock数据文件

在项目中新建mock/data.js文件，并编写Mock数据。

import Mock from 'mockjs'

const data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1,
        'name': '@cname',
        'age|10-20': 12
    }]
})

export default data

上面的Mock数据定义了一个列表，列表中有1到10个元素。每个元素包含id，name，age三个属性，其中id从1开始递增，name为中文姓名，age在10到20之间取值。

修改webpack配置文件

在开发模式下，我们需要读取Mock数据并对请求进行拦截，返回Mock数据。在生产模式下，我们则不需要这样做。因此需要修改webpack配置文件。

在webpack.dev.conf.js文件中添加以下代码：

const express = require('express')
const app = express()
const data = require('../mock/data.js')

app.get('/api/list', (req, res) => {
    res.json({
        code: 200,
        message: '',
        data: data.list
    })
})

module.exports = {
    // ......
    devServer: {
        before: function(app) {
            app.use(express.json())
            app.use(express.urlencoded({ extended: true }))
            app.get('/api/list', function(req, res) {
                res.json({
                    code: 200,
                    message: '',
                    data: data.list
                })
            })
        }
    }
    // ......
}

上面代码中定义了一个Express服务，这个服务返回了我们定义的Mock数据。

然后在webpack.dev.conf.js文件中的devServer中添加如下代码：

before: function(app) {
    app.use(express.json())
    app.use(express.urlencoded({ extended: true }))
    app.get('/api/list', function(req, res) {
        res.json({
            code: 200,
            message: '',
            data: data.list
        })
    })
}

这段代码将我们定义的路由与获取Mock数据的方法绑定到了webpack-dev-server的before方法中。在开发模式下，请求/mock/list接口将会返回我们定义的Mock数据。

在组件中使用Mock数据

我们编写一个组件Mock.vue，并在该组件中获取Mock数据，渲染出列表。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Mock',
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await this.$axios('/api/list')
      if (res.code === 200) {
        this.list = res.data
      }
    }
  }
}
</script>

示例说明1

比如在开发一个购物车列表的组件时，后端接口还没有开发出来，这个时候我们可以使用Mock数据填充购物车列表展示。

可以模拟出登录，请求购物车数据和删除购物车商品等接口。

如果后端接口完成后，只需要找到对应的接口，修改url就可以了。

示例说明2

在Vue项目的测试过程中，当我们在进行一些单元测试或组件测试时，我们会涉及到各种各样的数据场景，比如：网络中断、服务器返回错误、异常等等，这个时候，我们需要模拟这些场景，来进行相应的测试。

在这些场景中，使用Mock数据，能够快速创建假数据，模拟出相应的状态，更有利于我们进行测试。