Vue利用mockjs编写假数据并应用的问题记录

我将为你详细讲解“Vue利用mockjs编写假数据并应用的问题记录”的完整攻略。

一、什么是Mock.js

Mock.js是一款前端数据模拟生成工具，可以模拟各种数据类型的生成器，从最基本的文本、数字、布尔，到图片、颜色、地址等，还可以生成随机的JSON对象。

Mock.js利用简单的语法实现了数据自动生成，可根据自定义的规则生成符合条件的数据，模拟后端接口，从而方便前后端并行开发。

二、Mock.js的应用

在Vue项目中，我们经常需要使用Mock.js来模拟后端接口的数据，这样就可以先进行具体页面的开发和调试，等到后端接口数据完善后再进行集成。

1. 安装Mock.js

在Vue项目根目录下，使用以下命令安装Mock.js：

npm install mockjs --save-dev

安装完成后，在需要使用Mock.js的地方引入它：

import Mock from 'mockjs'

2. 编写假数据规则

Mock.js提供了丰富的规则和语法，可以轻松地编写出符合规则的假数据。

以下是一个Mock.js的示例，演示如何生成一个对象类型的随机数据：

Mock.mock({
  'name': '@cname',
  'age|18-60': 1,
  'score|0-100': 100,
  'email': '@EMAIL',
  'address': '@county(true)',
  'birthday': '@date',
  'img': '@image("200x200", "#50B347", "#FFF", "Mock.js")'
})

上面代码会生成一个包含了name、age、score、email、address、birthday和img这七个属性的对象，通过规则语法生成随机的数据。

3. 拦截Ajax请求

使用Mock.js模拟后端接口需要拦截Ajax请求并返回规则生成的假数据。这可以通过使用Mock.js的mock方法来实现。

下面是一个示例，演示如何拦截Ajax请求并返回随机数据：

import Mock from 'mockjs'

Mock.mock('/api/list', 'post', {
  'code': 1,
  'msg': 'success',
  'data|10-20': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1,
    'score|0-100': 100,
    'email': '@EMAIL',
    'address': '@county(true)',
    'birthday': '@date',
  }]
})

上面代码会拦截地址为/api/list的POST请求，并返回10-20条随机数据。

4. 调用假数据

通过以上步骤，我们已经可以利用Mock.js来模拟后端接口提供的假数据了。在Vue项目中，我们可以在网络请求的地方调用Mock.js生成的假数据进行开发和调试。

下面是一个使用Vue.js发起网络请求，并调用Mock.js生成的假数据的示例：

export default {
  methods: {
    fetchData () {
      axios.post('/api/list').then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}

三、示例

下面给出两个使用Mock.js编写假数据的示例：

示例一：商品列表

假设我们正在为一个在线商城项目编写商品列表页面，为了方便开发和调试，我们需要先使用Mock.js生成一些假数据。

下面是一个生成商品列表的假数据规则：

Mock.mock({
  'code': 1,
  'msg': 'success',
  'list|10-20': [{
    'id|+1': 1,
    'name': '@ctitle(5,10)',
    'price|1-100.2': 1,
    'img': '@image("200x200", "#50B347", "#FFF", "Mock.js")'
  }]
})

接着，我们需要拦截商城后端提供的商品列表接口，并返回以上生成的假数据。可以这样实现：

Mock.mock('/api/goods/list', 'post', {
  'code': 1,
  'msg': 'success',
  'data': {
    'count|50-100': 1,
    'list': function () {
      return Mock.mock({
        'list|10-20': [{
          'id|+1': 1,
          'name': '@ctitle(5,10)',
          'price|1-100.2': 1,
          'img': '@image("200x200", "#50B347", "#FFF", "Mock.js")'
        }]
      }).list
    }
  }
})

最后，在组件代码中发起网络请求并调用Mock.js生成的假数据：

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      axios.post('/api/goods/list').then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data.list
        }
      })
    }
  }
}

这样，我们就可以在不需要后端接口的情况下，先进行商品列表页面的开发和调试工作。

示例二：用户管理

假设我们正在为一个用户管理系统编写用户列表页面，为了方便开发和调试，我们需要先使用Mock.js生成一些假数据。

下面是一个生成用户列表的假数据规则：

Mock.mock({
  'code': 1,
  'msg': 'success',
  'list|10-20': [{
    'id|+1': 1,
    'username': '@name',
    'gender|1-2': 1,
    'phone': /^1[3456789]\d{9}$/,
    'email': '@EMAIL',
    'address': '@county(true)',
    'status|0-1': 1
  }]
})

接着，我们需要拦截用户管理系统后端提供的用户列表接口，并返回以上生成的假数据。可以这样实现：

Mock.mock('/api/user/list', 'post', {
  'code': 1,
  'msg': 'success',
  'data': {
    'count|50-100': 1,
    'list': function () {
      return Mock.mock({
        'list|10-20': [{
          'id|+1': 1,
          'username': '@name',
          'gender|1-2': 1,
          'phone': /^1[3456789]\d{9}$/,
          'email': '@EMAIL',
          'address': '@county(true)',
          'status|0-1': 1
        }]
      }).list
    }
  }
})

最后，在组件代码中发起网络请求并调用Mock.js生成的假数据：

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      axios.post('/api/user/list').then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data.list
        }
      })
    }
  }
}

这样，我们就可以在不需要后端接口的情况下，先进行用户列表页面的开发和调试工作。

四、总结

Mock.js是一款非常实用的前端数据模拟生成工具，可以方便地生成各种数据类型，模拟后端接口，从而方便前后端并行开发。在Vue.js项目中，我们可以使用Mock.js模拟后端接口的数据，进行开发和调试工作。