前端Mock数据（无需jar包，直接上代码版本）

一、配置公用文件

1.配置axios文件

// 二次封装axios，即拦截器
import axios from 'axios'
import config from '../config/index'
// 设置配置,根据开发和生产环境不一样进行配置,baseUrl是从这儿传入的
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

class HttpResqust {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
  }
  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl
      // header : {

      // }
    }
    return config
  }

  interceptors (instance) {
    instance.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么'
      console.log('拦截处理请求')
      return config
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error)
    })

    // 添加响应拦截器
    instance.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      console.log('处理响应')
      return response
    }, function (error) {
      // 对响应错误做点什么
      console.log(error)
      return Promise.reject(error)
    })
  }
  request (options) {
    // 请求,options是用户传过来的参数
    // 请求参数有一些公共的参数
    const instance = axios.create()
    options = {...(this.getInsideConfig), ...options}
    this.interceptors(instance)
    return instance(options)
  }
}

export default new HttpResqust(baseUrl)

2.配置index文件

export default {
  title: 'admin',
  baseUrl: {
    // 开发环境的url，index是配置URL的文件
    dev: '/api/',
    pro: ''
  }
}

一、造接口

import axios from './axios'

// 导出一个getmenu的方法，然后这个方法怎么使用呢
export const getMenu = () => {
  return axios.request({
    url: 'menu',
    method: 'get'
  })
}
// 定义接口的文件
// 定义的一个新的接口名称叫getHome，这个方法返回的是axios拦截接口/api/home/getData的数据
export const getHome = () => {
  return axios.request({
    // 与mock.js中mock的地址一样，即/api/home/getData
    url: '/api/home/getData',
    method: 'get'
  })
}

二、造返回参数

// mock数据模拟,模拟的数据
import Mock from 'mockjs'

// 卡片数据  图表数据
let list = []
export default {
  getStatisticalData: () => {
    // 产生随机数
    for (let i = 0; i < 7; i++) {
      list.push(
        Mock.mock({
          index: Mock.Random.float(200, 8000, 0, 0),
          name: Mock.Random.float(200, 8000, 0, 0),
          productLine: Mock.Random.float(200, 8000, 0, 0),
          needValue: Mock.Random.float(200, 8000, 0, 0),
          version: Mock.Random.float(200, 8000, 0, 0),
          progress: Mock.Random.float(200, 8000, 0, 0),
          dueDate: Mock.Random.float(200, 8000, 0, 0)
        })
      )
    }
    return {
      code: 20000,
      cardData: list
      }

三、组合接口和返回参数

1.造mock

import Mock from 'mockjs'
// mock拦截的地址/api/home/getData,返回的值是什么homeApi.getStatisticalData()
import homeApi from './mockServerData/home'
Mock.mock('/api/home/getData', homeApi.getStatisticalData())
import menuApi from './mockServerData/menu'
Mock.mock('/api/home/getMenuData', menuApi.getStatisticalData())

2.引用mock

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import App from './App'
import router from './router'
import http from 'axios'

// 打开main.js文件引入Echarts
// import echarts from 'echarts'
import * as echarts from 'echarts'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(Antd)
// Vue.use(ElementUI)
Vue.prototype.$http = http
// 引用mock
if (process.env.NODE_ENV === 'development') require('@/api/mock')

// 然后将echart添加到vue的原型上，这样就可以全局使用了
Vue.prototype.$echarts = echarts


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

四、调用关键代码

import {getHome} from '../../api/data'
      .........
      .........
      .........
     getHome().then((res) => {
        this.cardData = res.data.cardData
        this.cardData.map(item=>{
          this.cardlist.push(item.cardlist)
        })
        this.cardData.versionData.map(item=>{
          this.versionData.push(item.versionData)
        })
      })

总结

mock数据可以极大的增大前后端联调的效率。