2021-07-17AntDesignPro前后端交互

AntDesignPro前后端交互

request.js

在utils中封装的有request.js，相关的使用方法和axios类似

mock

在开发功能前，我们应该先和后台沟通对应的接口文档。后台根据接口文档开发接口。前端根据接口文档写mock数据，先开发前端功能

mock尽量分模块写

mock/student.js

export default {
  'GET /api/students': [{
    id: 1,
    name: "zhangsan"
  }, {
    id: 2,
    name: 'lisi'
  }]
}

config/proxy.js

项目中实现配置好了代理操作，我们只需要把我们需要代理的地址填写在对应的配置中即可，以npm run start:no-mock 可以实现对应的请求相关接口的功能。

/**
 * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
 * -------------------------------
 * The agent cannot take effect in the production environment
 * so there is no configuration of the production environment
 * For details, please see
 * https://pro.ant.design/docs/deploy
 */
export default {
  // 开发环境
  dev: {
    // 尽可能让后台所有的接口有统一的前缀 /api/v1/
    '/api/': {
      target: '替换为后台地址',
      changeOrigin: true,
      pathRewrite: {
        '^': '',
      },
    },
  },
  // 测试环境
  test: {
    '/api/': {
      target: 'https://preview.pro.ant.design',
      changeOrigin: true,
      pathRewrite: {
        '^': '',
      },
    },
  },
  pre: {
    '/api/': {
      target: 'your pre url',
      changeOrigin: true,
      pathRewrite: {
        '^': '',
      },
    },
  },
};