Vue中如何使用mock模拟数据

下面我会为您详细讲解在Vue中如何使用mock模拟数据的完整攻略。

1. 什么是Mock

Mock（模拟数据）是指在前端开发中，由于后端接口还未开发完成，前端开发需要提前模拟数据进行开发的一种手段。mock可以在前端使用虚拟数据进行开发，便于前端更好地进行模块开发、调试、测试等。

2. 如何使用mock

2.1 安装mockjs

我们可以使用npm安装mockjs：

npm install mockjs --save-dev

安装完成之后，我们就可以在项目中使用Mock。

2.2 入门示例

接下来，我们将以Vue CLI3为例演示如何在Vue中使用mock。

2.2.1 创建项目

运行以下命令创建一个Vue CLI3项目：

vue create testproject

安装完成之后，进入项目目录并运行以下命令：

npm run serve

浏览器打开http://localhost:8080，就可以看到Vue默认的页面了。

2.2.2 添加mock接口

首先，在src目录下创建一个mock目录，然后在mock目录中创建一个mock.js文件，在这个文件中定义mock数据。

示例代码：

const Mock = require('mockjs')
Mock.mock('/api/data', 'get', {
  'data|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|20-30': 23
  }]
})

在这里我们定义了一个get类型的接口，url为'/api/data'，返回的数据是一个数组，数组中包含了1-10个元素，每个元素的数据结构为{id:1,name:'张三',age:23}。

2.2.3 修改vue.config.js

在当前项目根目录中，创建vue.config.js文件，然后添加以下代码：

const Mock = require('mockjs')
module.exports = {
  devServer: {
    before(app) {
      app.get('/api/data', (req, res) => {
        res.json(Mock.mock({
          'data|1-10': [{
            'id|+1': 1,
            'name': '@name',
            'age|20-30': 23
          }]
        }))
      })
    }
  }
}

这里的作用是在开发服务器启动之前，钩入到webpack-dev-server的服务中，通过express路由来拦截请求，并返回相应的mock数据。

2.2.4 运行并测试

启动应用，运行以下命令：

npm run serve

然后在浏览器中访问http://localhost:8080/api/data，就可以看到以下响应数据：

{
  "data": [
    {
      "id": 1,
      "name": "Shelly Adams",
      "age": 28
    },
    {
      "id": 2,
      "name": "Brenda Wong",
      "age": 28
    },
    ...
  ]
}

这样就完成了mock数据的配置和使用。

2.3 在vue项目中使用Mock

下面，我们将演示如何在Vue项目中使用Mock，并通过示例来说明。

2.3.1 安装mockjs

首先，我们需要安装mockjs：

npm install mockjs --save-dev

安装完成之后，我们就可以在项目中使用Mock。

2.3.2 添加mock接口

在src目录下创建一个mock目录，然后在mock目录中创建一个mock.js文件，在这个文件中定义mock数据。

示例代码：

import Mock from 'mockjs'
Mock.mock('/api/data', 'get', {
  'data|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|20-30': 23
  }]
})

在这里我们定义了一个get类型的接口，url为'/api/data'，返回的数据是一个数组，数组中包含了1-10个元素，每个元素的数据结构为{id:1,name:'张三',age:23}。

2.3.3 配置axios

我们使用axios来请求接口数据，在/src/network/index.js文件中进行axios的配置。

示例代码：

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

const mock = new MockAdapter(axios)

// 拦截 /api/data 接口请求，并返回mock数据
mock.onGet('/api/data').reply(200, {
  'data|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|20-30': 23
  }]
})

export default {
  getAxiosData () {
    return axios.get('/api/data')
  }
}

在这里，我们使用了axios-mock-adapter来拦截ajax请求，并返回mock数据。

2.3.4 调用接口，并渲染数据

在需要调用接口的组件中，我们通过调用getAxiosData方法来获取接口数据。

示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item,index) in data" :key="index">
        <span>{{ item.id }}</span>
        <span>{{ item.name }}</span>
        <span>{{ item.age }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data () {
    return {
      data: []
    }
  },
  created () {
    api.getAxiosData().then(res => {
      this.data = res.data.data
    })
  }
}
</script>

这里我们通过调用api.getAxiosData方法来获取接口数据，并将数据渲染到页面上。

至此，我们在Vue中使用mock模拟数据的入门教程就完成了。