美文网首页
代理mock数据

代理mock数据

作者: 回不去的那些时光 | 来源:发表于2020-01-22 16:14 被阅读0次

1、在根目录新建mock文件夹,然后在文件夹中新建需要的文件名,格式按 模块名_功能名

2、文件中的内容(可以仿照这个来)

// dashboard_chart.js
function chart(method) {
    let res = null;
    switch (method) {
        case 'GET':
            res = [120, 40, 19, 78, 30, 48];
            break;
        default:
            res = null;
    }
    return res;
}

module.exports = chart;

3、vue.config.js(vue的webpack配置文件)

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true,
            bypass: function (req, res) {
                if (req.headers.accept.indexOf('html') !== -1) {
                    console.log('Skipping proxy for browser request.');
                    return '/index.html';
                } else {
                    const name = req.path.split('/api/')[1].split('/').join('_');
                    const mock = require(`./mock/${name}`);
                    const result = mock(req.method);
                    delete require.cache[require.resolve(`./mock/${name}`)];    // 清除缓存
                    return res.send(result);
                }
            }
        }
    }
}

4、使用

axios
.get("/api/dashboard/chart", {
  params: {
    ID: 12345
  }
})
.then(response => {
  this.chartOption = {
    title: {
      text: "ECharts 入门示例"
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: response.data
      }
    ]
  };
});

相关文章

  • mock

    1.手机端mock假数据2.浏览器端mock代理

  • antd pro 使用mock

    在mock文件下创建mock数据 修改代理文件 修改package.json,添加mock环境 yarn star...

  • vue本地开发mock数据.md

    一、为什么要mock数据? 二、如何mock数据? 三、webpack本地代理配置 四、mockjs使用 五、ea...

  • python实现一个简单的mock

    接口请求 mock的封装 data为mock返回数据 mock的实现也可用代理工具如fiddler、charles...

  • 代理mock数据

    1、在根目录新建mock文件夹,然后在文件夹中新建需要的文件名,格式按 模块名_功能名 2、文件中的内容(可以仿照...

  • Android MOCK HTTP 接口新方式

    前言 以往,我们想要模拟接口返回数据,一般是利用 Charles 作为代理中转,配合在线 MOCK 网站 mock...

  • 使用mock数据进行开发

    核心思想:webpack中使用代理,访问本地的mock数据 API参考:https://webpack.docsc...

  • Vue项目开发mock数据

    数据模拟 一、使用开发服务器配置before选项,可以直接编写接口,提供mock数据 编写接口 调用 二、代理,使...

  • mock数据

    Vue中的mock数据指的是什么? mock数据指的模拟数据,mock中文翻译愚弄,嘲笑。 实现mock数据如下:...

  • 搭建小型 node 服务代理接口

    通过express框架,启一个小型node服务,来模拟后端请求,并代理打包编译好的vue项目。 mock数据 数据...

网友评论

      本文标题:代理mock数据

      本文链接:https://www.haomeiwen.com/subject/mdtpzctx.html