现实就是前端确认需求后，无法与后端及时对应联调接口或者调用接口，再这个过程中前端会非常痛苦，只能自己模拟数据，比如data.json 。虽然能用但是这种操作加大了我们的工作量，那么我们使用mock 会更加方便

本例子是 vue-cli 脚手架已经搭建好后的

安装axios

npm install vue-axios --save

npm install qs.js --save　　//这一步可以先忽略，它的作用是能把json格式的直接转成data所需的格式

首先安装mockjs

mock.js官网的传送门

npm install mockjs --save-dev

其次在src下创建一个mock.js，这个文件是保存模拟数据路径的地方

mock.js 的内容

import Mock  from 'mockjs'
const Random = Mock.Random;

function getData(){
    let datalist= [];
    for (let i = 0; i < 10; i++) {
      let newData = {
        order: Random.natural(16),
        account:Random.name(),
        time:Random.now(),
        title: Random.csentence(4), //  Random.csentence( min, max )
        baoxiu: Random.csentence(2),
        product: Random.csentence(4,10),
        number:Random.natural(1, 100),
        price:Random.float(20, 500, 2,2),
        addrss:Random.csentence(15,30),
        name: Random.cname(),
        tel:Random.natural(11),
        state:Random.csentence(5),
        id:Random.natural(1,5),
        thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
        author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
        date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
      }
      datalist.push(newData)
    }
    return {
      data: datalist
    }
  }

function setMsg(){
  let datalist= [];
  for (let i = 0; i < 10; i++) {
    let newData = {
      order: Random.natural(16),
      account:Random.name(),
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    datalist.push(newData)
  } 
  return {
    data: datalist
  }
}

const data = Mock.mock('/getDataList',getData);
const data1 = Mock.mock('/setMsg',setMsg)
export default {data , data1 };

我们需要在main.js中引入

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

import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import api from '@/request/request.js'
import api from '@/api/index.js'

import axios from 'axios'
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs           //全局注册，使用方法为:this.qs

//这一段是引入mock
import mockdata from './mock'
  

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  mounted () {
    document.dispatchEvent(new Event('render-event'))    
  }
 
})

使用axios调用模拟数据

<script>
    export default{
        data(){
            return{
                userId:666,
　　　　　　　　　 token:'',
            }
        },
        created(){
            this.$axios({
                method:'post',
                url:'/getDataList',
                data:this.qs.stringify({    //这里是发送给后台的数据
                      userId:this.userId,
                      token:this.token,
                })
            }).then((response) =>{          //这里使用了ES6的语法
                console.log(response)       //请求成功返回的数据
            }).catch((error) =>
                console.log(error)       //请求失败返回的数据
            })
        }
    }
</script>

最后获取到了数据 在控制台查看