vue之mock.js模拟接口
项目开发后端接口如果没写好,前端调试可以使用mock.js模拟后台接口,当然数据是自定义的,后台接口写好后替换掉mock模拟的接口就行了。方法如下:第一,打开cmd进入项目下载mock至项目中:npm intsall mockjs --save-dev第二,在src目录下建立文件夹mock,mock文件夹下建立mock.js文件,js文件代码如下:import Mock from 'mockjs
·
在项目开发中后端接口如果没写好前端也不方便调试,参考了一些资料总结出前端调试可以使用mock.js模拟后台接口,当然数据是自定义的,后台接口写好后替换掉mock模拟的接口就行了。方法如下:
第一,打开cmd进入项目下载mock至项目中:
npm intsall mockjs --save-dev
第二,在src目录下建立文件夹mock,mock文件夹下建立mock.js文件,js文件代码如下:
import Mock from 'mockjs';//es6语法引入mock模块
export default Mock.mock('http://test.cn', {//输出数据
'name': '@name',//随机生成姓名
'age|1-10': 10
//还可以自定义其他数据
});
第三,在vue组件中使用,比如在这样目录下:src/components/pages/goods.vue
import data from '../../mock/mock.js';
第四,请求接口方面,比如我使用的是axios请求,则:
computed:{
created(){
Vue.prototype.$http.get('http://test.cn')
.then(res => {
console.log(res.data);
this.msg=res.data.name;
console.log(this.msg)
})
这样就可以在浏览器上打印出随机生成的数据啦
更多推荐
已为社区贡献9条内容
所有评论(0)