下载vue官方的脚手架,打开的文件config/index.js

    proxyTable: {
      sencod: {
        target: 'https://cnodejs.org/',     //从网上趴的接口的
        filter(pathname, req) {
          // console.info('pathname',pathname)
          const isApi = pathname.indexOf('/api') == 0;   //这里的abc是和后台商量好=>api
          const ret = isApi;
          return ret;
        },
        changeOrigin: true,
      },
      three: {
        target: ' https://easy-mock.com/mock/59d78f3b9d342f449f2fed3a/', //后面介绍这个接口
        filter(pathname, req) {
          // console.info('pathname',pathname)
          const isApi = pathname.indexOf('/baseapi') == 0;   //这里的abc是和后台商量好=>baseapi
          const ret = isApi;
          return ret;
        },
        changeOrigin: true,
      },
    },

//组件中调用

methods: {
      getData() {
        axios.get('/api/v1/topics', { //cnodejs的接口
          params: {
            page: 20,
            limit: 10
          }
        })
          .then(function (response) {
            //console.log(response);
          })
          .catch(function (error) {
            //console.log(error);
          });
      },
      getDatathree() {
        axios.get('/baseapi/table') //easy-mock的模拟出来的接口
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
  • 介绍的easy-mock的使用方法
    1. 自己注册一个账号进来
    2. 点击右下角的 + 的符号创建项目
    3. 这里写图片描述
    4. 对应的baseapi的关系就是这样,为什么选择easy-mock的方式,就是自己写接口,不用习惯性的写成api的方法
    5. 创建接口的
      这里写图片描述
      这里写图片描述

详细的教学方法,easy-mock的文档都是有的,掌握的这个easy-mock非常方便获取的数据。

Logo

前往低代码交流专区

更多推荐