vue中使用mock模拟后端数据

## vue中使用mock模拟后端数据

网上关于mock模拟数据方面的文章比较少，在做项目的时候遇见这个问题，学了点皮毛，记录一下自己的学习经历。
mock的官方网址：http://mockjs.com/

下面就进入正题吧：

1. vue项目中直接用mock模拟数据

首先需要定义一个我们需要数据的数组名（空数组）：

const goodsColumns = []
const goodsColumns1 = []
const loadGoodsData1 = []
const loadGoodsData2 = []
const loadGoodsData3 = []
const loadGoodsData4 = []
const loadGoodsData5 = []
const loadGoodsData6 = []

其次返回刚才定义的数组：

data () {
    return {
      goodsColumns,
      goodsColumns1,
      loadGoodsData1,
      loadGoodsData2,
      loadGoodsData3,
      loadGoodsData4,
      loadGoodsData5,
      loadGoodsData6,

      deviceData,
      typeData,
      cities: typeData[deviceData[0]],
      secondType: typeData[deviceData[0]][0]
    }
  },

然后mouted函数，定义一个getdata方法，methods方法里利用以下代码返回所需的值：

mounted: function () {
      this.getdata()
  },
  methods: {
    getdata () {
this.$http.get('/archives/a').then(response => {
  // console.log(response)
  this.goodsColumns = response.result
})
this.$http.get('/archives/b').then(response => {
  console.log(response.result)
  this.goodsColumns1 = response.result
})
this.$http.get('/archives/c').then(response => {
  console.log(response.result)
  this.loadGoodsData1 = response.result
})
this.$http.get('/archives/d').then(response => {
  console.log(response.result)
  this.loadGoodsData2 = response.result
})
this.$http.get('/archives/e').then(response => {
  console.log(response.result)
  this.loadGoodsData3 = response.result
})
this.$http.get('/archives/f').then(response => {
  console.log(response.result)
  this.loadGoodsData4 = response.result
})
this.$http.get('/archives/g').then(response => {
  console.log(response.result)
  this.loadGoodsData5 = response.result
})
this.$http.get('/archives/h').then(response => {
  console.log(response.result)
  this.loadGoodsData6 = response.result
})
      },

最后在mock这个文件里建立对于的.js文件

在mock中用以下代码模拟数据：

import Mock from 'mockjs2'
import { builder } from '../util'
var Random = Mock.Random

const data = () => {
  const goodsColumns = [
    {
        title: '资产编号',
        dataIndex: 'id',
        key: 'id'
      },
      {
        title: '设备名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center'
      },
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        align: 'center'
      },
      {
        title: '型号',
        dataIndex: 'model',
        key: 'model',
        align: 'center'
      },
      {
        title: '通讯地址',
        dataIndex: 'address',
        key: 'address',
        align: 'center'
      },
      {
        title: '通讯规约',
        dataIndex: 'statute',
        key: 'statute',
        align: 'center'
      },
      {
        title: '所在楼层',
        dataIndex: 'floor',
        key: 'loor',
        align: 'center'
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        fixed: 'right',
        align: 'center',
        width: 150
      }
  ]
  return builder(goodsColumns)
}
//...这里省略的一些数据
Mock.mock(/\/archives\/a1/, 'get', data)
Mock.mock(/\/archives\/b1/, 'get', data1)
Mock.mock(/\/archives\/c1/, 'get', data2)
Mock.mock(/\/archives\/d1/, 'get', data3)
Mock.mock(/\/archives\/e1/, 'get', data4)
Mock.mock(/\/archives\/f1/, 'get', data5)
Mock.mock(/\/archives\/g1/, 'get', data6)
Mock.mock(/\/archives\/h1/, 'get', data7)

关于这里的路径问题，mock中的读取规则还没明白。简单说下目前遇见的问题：一个界面的数据可以是类似：

Mock.mock(/\/archives\/customer/, 'get', data)
Mock.mock(/\/archives\/custome/, 'get', data1)
Mock.mock(/\/archives\/custom/, 'get', data2)
Mock.mock(/\/archives\/custo/, 'get', data3)
Mock.mock(/\/archives\/cust/, 'get', data4)

这样mock可以读取，但是别的文件再有字母a开头的路径可能数据就出不来了，因为mock到同一组数据了。

最最后在indx.js里配置刚才的mock的js文件：

const Mock = require('mockjs2')
  require('./archives/Equip')

2. vue中通过api接口获取mock数据：
   关于mock那里的代码如上，就不再展示了，同理也要index.js中调用mock数据的喔。
   api接口界面：
   同理在api文件夹下建立对于的js文件
   

代码如下：

import { axios } from '@/utils/request'

const EnterpriseApi = {
    GetGoodsColumns: '/archives/customer',
    GetLoadGoodsData1: '/archives/custome',
    GetLoadGoodsData2: '/archives/custom',
    GetLoadGoodsData3: '/archives/custo',
    GetLoadGoodsData4: '/archives/cust'
  }

  export function GetGoodsColumns () {
    return axios({
      url: EnterpriseApi.GetGoodsColumns,
      method: 'get'
    //   data: parameter
    })
  }

  export function GetLoadGoodsData1 () {
    return axios({
      url: EnterpriseApi.GetLoadGoodsData1,
      method: 'get'
    //   data: parameter
    })
  }

  export function GetLoadGoodsData2 () {
    return axios({
      url: EnterpriseApi.GetLoadGoodsData2,
      method: 'get'
    //   data: parameter
    })
  }

  export function GetLoadGoodsData3 () {
    return axios({
      url: EnterpriseApi.GetdLoadGoodsData3,
      method: 'get'
    //   data: parameter
    })
  }

  export function GetLoadGoodsData4 () {
    return axios({
      url: EnterpriseApi.GetLoadGoodsData4,
      method: 'get'
    //   data: parameter
    })
  }

接口写好之后，我们可以直接在vue界面中调用接口函数即可，不必再用https这种获取数据方法了。
vue界面调用代码：

created: function () {
      GetGoodsColumns().then(response => {
        this.goodsColumns = response.result
      })
      GetLoadGoodsData1().then(response => {
        this.data = response.result
        this.cacheData = response.result.map(item => ({ ...item }))
        console.log('testorignal', response.result)
      })
  },

或者：

mounted: function () {
      this.getdata()
  },
  methods: {
    getdata () {
      GetGoodsColumns().then(response => {
        this.goodsColumns = response.result
      })
      GetLoadGoodsData1().then(response => {
        this.data = response.result
        this.cacheData = response.result.map(item => ({ ...item }))
        console.log('testorignal', response.result)
      })
  },

至此，vue中通过mock模拟数据就完成了。