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>