在vue中如何使用Mock.js模拟数据

在vue中使用Mock.js模拟数据，需要安装mockjs库，然后在vue组件中引入mockjs并编写mock数据接口。下面是具体的步骤：

安装mockjs

可以使用npm或者yarn进行安装:

npm install mockjs --save-dev

引入mockjs

在vue组件引入mockjs,并编写mock数据接口，例如：

import Mock from 'mockjs'

Mock.mock('/api/user', {
  'id': 1,
  'name': 'John Smith',
  'age': 25,
  'email': '[e-mail]'
})

以上代码模拟了一个GET请求，当客户端请求/api/user时，返回一个包含id、name、age和email四个属性的json数据。

示例一

以下是一个在vue项目中使用mockjs的具体示例，mock数据接口文件为mock.js，主要步骤如下：

安装mockjs

在vue项目运行命令行中，执行以下命令，安装mockjs库：

npm install mockjs --save-dev

创建mock数据接口

在项目中创建一个mock文件夹，在该文件夹下创建一个名为index.js的文件，并在文件中编写mock数据接口，示例代码如下：

import Mock from 'mockjs'

Mock.mock('/api/user', {
  'id': 1,
  'name': 'John Smith',
  'age': 25,
  'email': '[e-mail]'
})

Mock.mock('/api/users', {
  'users|10': [{
    'id|+1': 1,
    'name': '@cname',
    'email': '@EMAIL',
    'create_time': '@DATETIME',
    'avatar': '@IMAGE(100x100)'
  }]
})

以上代码模拟了两个rest接口，一个接口返回一个包含id、name、age和email四个属性的json数据；另一个接口返回一个users数组，数组中含有10个以id自增的对象，对象中包含name、email、create_time、avatar四个属性。

在vue组件中使用mockjs

在vue组件中引入mockjs库，并在created生命周期钩子中发起GET请求，拦截请求并返回mock数据，示例代码如下：

import Mock from 'mockjs'
import axios from 'axios'

Mock.setup({
  timeout: '200-2000' // 启用timeout模拟延迟
})

export default {
  name: 'app',
  created() {
    axios.get('/api/user')
      .then(res => {
        console.log(res.data)
      })

    axios.get('/api/users')
      .then(res => {
        console.log(res.data)
      })
  }
}

运行项目，在控制台打印出mock数据接口返回的数据。

示例二

以下是另一个在vue项目中使用mockjs的具体示例，mock数据接口文件为mock.js，主要步骤如下：

安装mockjs

在vue项目运行命令行中，执行以下命令，安装mockjs库：

npm install mockjs --save-dev

创建mock数据接口

在项目中创建一个mock文件夹，在该文件夹下创建一个名为index.js的文件，并在文件中编写mock数据接口，示例代码如下：

import Mock from 'mockjs'

Mock.mock(/\/api\/list\/\d+/, 'get', options => {
  const id = options.url.match(/\/api\/list\/(\d+)/)[1]
  return {
    'id': id,
    'title': '@ctitle(5, 10)',
    'publish_time': '@date("yyyy-MM-dd")',
    'content': '@cparagraph'
  }
})

以上代码模拟了一个rest接口，该接口接受一个带有数字id参数的GET请求，返回一个包含id、title、publish_time和content四个属性的json数据。

在vue组件中使用mockjs

在vue组件中引入mockjs库，并在created生命周期钩子中发起GET请求，拦截请求并返回mock数据，示例代码如下：

import Mock from 'mockjs'
import axios from 'axios'

Mock.setup({
  timeout: '200-2000' // 启用timeout模拟延迟
})

export default {
  name: 'app',
  created() {
    const listId = 1
    axios.get(`/api/list/${listId}`)
      .then(res => {
        console.log(res.data)
      })
  }
}

运行项目，在控制台打印出mock数据接口返回的数据。