推荐文章
Ant Design Pro

ant design pro 使用mock数据

2022-08-31 08:26:19      点击：
1、mock简介
Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。
 
在 Ant Design Pro 中，因为我们的底层框架是 umi，而它自带了代理请求功能，通过代理请求就能够轻松处理数据模拟的功能。
 
umi 里约定 mock 文件夹下的文件即 mock 文件，文件导出接口定义，支持基于 require 动态分析的实时刷新，支持 ES6 语法，以及友好的出错提示，详情参看 umijs.org。
 
export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },
 
  // GET POST 可省略
  '/api/users/1': { id: 1 },
 
  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => {
    res.end('OK');
  },
};
当客户端（浏览器）发送请求，如：GET /api/users，那么本地启动的 umi dev 会跟此配置文件匹配请求路径以及方法，如果匹配到了，就会将请求通过配置处理，就可以像样例一样，你可以直接返回数据，也可以通过函数处理以及重定向到另一个服务器。
 
2、添加跨域请求头
'POST /api/users/create': (req, res) => {
  ...
  res.setHeader('Access-Control-Allow-Origin', '*');
  ...
},
3、使用代理proxy
当想请求真实服务器地址的时候，只需要在config.js中设置对应的代理即可
 
proxy: {
    '/api/': {
      target: 'https://preview.pro.ant.design/api/',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
通过以上代码就可以代理到服务器的真实接口地址
 
当本地开发完毕之后，如果服务器的接口满足之前的约定，那么只需要关闭 mock 数据或者代理到服务端的真实接口地址即可。
 
4、关闭mock数据
在启动的时候指定关闭mock数据
 

上一篇：Mac 安装 Ant Design Pro
下一篇：最后一页

文章标签：

Copyright © 2025  洛科信息技术(北京)有限公司  京ICP备17071282号     访问洛数云图产品