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;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！