ant design mock接口配置

最新推荐文章于 2024-06-05 14:04:10 发布

转载最新推荐文章于 2024-06-05 14:04:10 发布 · 834 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c4537646fb9a049e93d0a72

文章标签：

#javascript #json #ViewUI

本文详细介绍了如何在前端项目中配置和使用Mock数据，包括在api.js中添加接口调用，创建datamap.js文件定义Mock数据，以及在.roadhogrc.mock.js中设置代理，最后展示了如何在页面组件中调用这些接口获取Mock数据。

1、services/api.js

添加接口

export async function getDataCode(params) {
  return request('/mock/datamap/datacode/15');
}
复制代码

2、mock文件夹下添加datamap.js文件

export const getDataCode = (req, res) => {
  res.json({
    code: 'success',
    data: {
      total: 100,
      list: [ {
        id: 2,
        name: '缴费流程',
        hasTemplate: true,
      }],
    },
  });
};

export default {
  getDataCode,
};

复制代码

3、.roadhogrc.mock.js

import { getDataCode } from './mock/datamap';
复制代码

proxy变量里添加：

  'GET /mock/datamap/datacode/15': getDataCode,
复制代码

4、页面文件里使用接口

 import { getDataCode } from '../../../services/api';
 
   showDrawer = (id) => {
   // mock 数据
   getDataCode({
     id: id,
   }).then((res) => {
     if (res && res.code === 'success') {
     /*  this.setState({
         historyKpis: (response.data.list || []).filter((item) => {
           return item.isPlanData === record.isPlanData;
         }),
         visible: true,
         title: record['指标名称'],
       });*/
     console.log('res', res.data);
     } else {
       message.error('历史数据未取到!');
     }
   });

   this.setState({
     visible: true,
   });
 }
复制代码