6-2 使用Mock随机返回主页数据

目录：

• 新建mock文件夹
• 配置mock请求时间
• 新建home.js存放主页的数据
• 安装mock的语法生产数据

一、目录接口

...
|-src
    |-api
        |-config.js
    |-common
        ....
    |-mock  //mock模拟数据目录(新增)
        |-home.js (存放home主页数据)
        |-index.js (出口文件)
    |-store
        ...
    |-views
        ...
    ....

二、操作步骤

2.1、配置mock请求时间和安装mock的语法生产数据

import Mock from 'mockjs'

import HomeApi from './home'

//设置200-2000ms延时请求数据
Mock.setup({
  timeout: '200-2000'
});

//首页相关
//拦截是/home/getData
Mock.mock(/\home\/getData/,'get',HomeApi.getHomeData);

2.2、 home.js存放主页的数据

import Mock from 'mockjs'

export default {
  getHomeData: () => {
    return {
      code: 20000,//区分一下是否是mock数据
      data: {
        videoData: [
          {
            name: 'SpringBoot',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'Vue',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: '小程序',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'Python',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'ES6',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'JAVA',
            value: Mock.Random.float(1000,10000,0,2)
          }
        ]
      }
    }
  }
}

3、 需要在入口文件 main.js中导入

import Vue from 'vue'
import App from './App'

//导入mock入口文件
import mock from './mock'  //相当于import mock from './mock/index.js'

/* eslint-disable no-new */
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');