[转发]mock.js在vue中的使用（axios请求数据）

第一步：安装：

在命令行中执行： npm install mockjs; 
或直接<script src="http://mockjs.com/dist/mock.js"></script>

第二步：定义index.js文件

我们新建一个mock文件夹，此文件夹中建一个index.js文件：

mock/index.js:
 
import Mock from 'mockjs' //引入mockjs，npm已安装
import { Random } from 'mockjs' // 引入random对象,随机生成数据的对象，（与占位符@一样）
Mock.setup({
    timeout:1000  //设置请求延时时间
})
const getdata = function(option){ //定义请求数据方法
    let datalist = []
    for (let i = 0; i < 20; i += 1) {
      const o = {  //mockjs模拟随机生成数据，生成20条
       recipeId: Random.guid(),
       billId: Random.string(10),
       orgId: Random.string('number', 8, 10),
       Date:Random.date('yyyy-MM-dd'),
       time:Random.time('A HH:mm:ss'),
       adress:Random.county(),
       viewName: Random.cword(4, 16), // 随机生成任意名称
       personName: Random.cname(),
       reason: Random.csentence(10, 32),
      }
      datalist.push(o)
     }
    return{
        data:datalist
    }
}
Mock.mock('/user', /post|get/i,getdata)

第三步：在main.js中引入index.js文件：

import './mock/index' // mock 方式，正式发布时，注释掉该处即可

第四步：请求数据：

<template>
  <div class="hello">
    <p>HELLO WORLD</p>
    <ul>
        <li v-for="(item,index) in datalist" :key='index'>
            <h1>{{item.personName}}:<span>{{item.viewName}}</span></h1>
        </li>
    </ul>
  </div>
</template>
<!--mockjs应用页面-->
<script>
import axios from 'axios' //局部引入
export default {
  name: 'HelloWorld',
  data () {
    return {
      datalist:[]
    }
  },
  mounted(){
      this.showdata()
  },
  methods:{
      showdata(){
//        import axios from 'axios'
//    Vue.prototype.$http = axios  在main.js中把axios添加到vue原型中，则可在每个组件中调用
          this.$http.get('/user') //全局引入使用vue原型中的方法this.$http,已经把axios添加到原型中
          .then((res)=>{
              console.log(res.data.data)
              this.datalist = res.data.data
          })
          .catch((err)=>{
              console.log('调用失败',err)
          })
      }
  }
}
</script>

一个简单的mockjs模拟数据请求就完成了