在项目开发中后端接口如果没写好前端也不方便调试,参考了一些资料总结出前端调试可以使用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)
        })

这样就可以在浏览器上打印出随机生成的数据啦

Logo

前往低代码交流专区

更多推荐