本文共 5721 字，大约阅读时间需要 19 分钟。

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

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

下面就进入正题吧：

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文件

import Mock from 'mockjs2'import {
    builder } from '../util'var Random = Mock.Randomconst 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这种获取数据方法了。

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模拟数据就完成了。

转载地址：http://lllbi.baihongyu.com/