vue中使用mock模拟后端数据

方式一、接口拦截方式（同一个页面没有真正的后端请求时用此方法）

一、安装axios
1、下载axios

cnpm install axios

2、打开main.js 引用

import axios from 'axios'
Vue.prototype.$axios = axios

二、安装mock.js

cnpm install mockjs --dev

1、在src路径下创建一个mock文件夹用来存放自定义的伪造数据，先创建一个mock.js文件 (mock/mock.js)

import Mock from 'mockjs'
 
function jointWorkshopMock () {
	const jointWorkshopData = Mock.mock({
		 "num1": "@integer(1,9)",
		 "num2": "@integer(0,9)",
		 "num3": "@integer(0,9)",
		 "num4": "@integer(0,9)"
	})
	 return jointWorkshopData
}
export {jointWorkshopMock }

2、再创建index.js (mock/index.js)

// 引入mockjs
import Mock from 'mockjs'
 
// 引入mock.js生成的模拟数据
import {jointWorkshopMock} from './mock'
 
// 设置请求延时时间
Mock.setup({
	timeout: '500 - 1500' 
})
 
// 设置拦截的接口 格式请看文档 https://github.com/nuysoft/Mock/wiki/Mock.mock()
// 注意: 这里拦截的地址 最好使用正则匹配 如果直接使用字符串接口 就有可能拦截不到带参数的请求 报错404
// 语法： Mock.mock( rurl?, rtype?, template|function( options ) )

// 联合工房总用水
Mock.mock('/api/jointWorkshop', 'get', jointWorkshopMock)

3、在src/api下创建requestMock.js

/************ mock接口 ***************/
// 联合工房总用水
function getJointWorkshop (data) {
	return this.$axios.get('/api/jointWorkshop',{
	    data
	})
}

/************输出**************/
export { 
	getJointWorkshop
}

4、在main.js引入设置好的mock

import('./mock/index') // 引入设置好基础的mock, 用于拦截请求

5、在自己所需页面测试

//导入
import { getJointWorkshop} from '@/api/requestMock'
mounted(){
	this.jointWorkshopData()
},
methods:{
	jointWorkshopData:function () {
		axios.getJointWorkshop().then(res => {
	      console.log('GET模拟数据', res)
	    }).catch(e => {
	        console.log('错误', e)
	    })
	}
}

方式二、方法获取方式（当同一个页面有真正的后端请求时用此方法）

直接在所需页面写

//初始化数据
data() {
    return {
    	timer:null,
     	// 联合工房总用水
      	num1:'',
      	num2:'',
      	num3:'',
      	num4:''
    }
},
mounted() {
    // mock数据 3秒刷新自动刷新页面
    this.getJointWorkshopData();
    this.timer = setInterval(() => {
     	this.getJointWorkshopData();
    },3000);
  },
beforeDestroy(){
    // 销毁定时器
    this.$once('hook:beforeDestroy',() =>{
      	clearInterval(this.timer);
   	})
},
methods: {
	/******************mock数据********************************/
    // 联合工房总用水
    getJointWorkshopData:function () {
       const jointWorkshopData = Mock.mock({
	       "num1": "@integer(1,9)",
	       "num2": "@integer(0,9)",
	       "num3": "@integer(0,9)",
	       "num4": "@integer(0,9)"
       })
       this.num1=jointWorkshopData.num1;
       this.num2=jointWorkshopData.num2;
       this.num3=jointWorkshopData.num3;
       this.num4=jointWorkshopData.num4;
   }
}