什么是mock.js

在前后端分离的开发环境中，前端同学需要等待后端同学给出接口及接口文档之后，才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发，前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢？MockJS通过拦截特定的AJAX请求，并生成给定的数据类型的随机数，以此来模拟后端同学提供的接口。

安装mock.js和axios

npm install mockjs --save

npm install axios --save

创建mock.js文件，引入

在根目录下创建mock文件夹，并在该文件夹下创建mock.js。

目录结构如下

mock.js目录结构

然后mock.js中写入以下代码：

import Mock from 'mockjs'   //引入mock.js模块

const Random = Mock.Random;

let data={

  'Boolean': Random.boolean, // 可以生成基本数据类型

  'Name': Random.cname(), // 可以生成随机中文名

  'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式

}

Mock.mock('/mock/test','post',data); 

在main.js中全局引入axios和mock.js添加以下代码

import Axios from 'axios'

require('./mock/mock.js')  //引入mock.js

Vue.prototype.$http = Axios   //将axios挂载到根实例Vue的原型上，可以用this.$http去请求

最后在test.vue文件中添加以下代码

<template>

  <div >

  </div>

</template>

<script>

export default {

  data(){

    return{

    }

  },

  created(){

    this.getData()；

  },

  methods:{

    getData(){

      this.$http.post('/mock/test').then((res)=>{

        console.log(res)

      })

    }

  }

}

</script>

然后就可以看到效果啦！

mock.js效果图

以上就是mock.js在vue中的应用演示，更多玩法请参考mock.js官方文档