AntDesignPro开发实例

拿到AntDesignPro项目,安装依赖,启动项目,基本上就可以根据你的业务需求进行开发了。

首先你需要去写一个路由页面(新建路由页面,包括js和less文件)

AntDesignPro开发实例_第1张图片

AntDesignPro开发实例_第2张图片

其中,js文件中connect连接的是model文件,可以将从后台拿到的数据存在model里面,通过这个连接拿到;也可以通过这个连接发起异步请求到model。既然提到model,下面就配置一下数据模型文件model

AntDesignPro开发实例_第3张图片

mode连接的是server和pages,路由页面发起异步请求到model,某个方法去调用相应接口,返回来的数据存在model中可以做相应处理,然后再pages中通过this.props进行调用。

新建一个模拟请求数据返回:

AntDesignPro开发实例_第4张图片

新建一个真实请求数据返回AntDesignPro开发实例_第5张图片

然后,注意要在router.config.js中配置路由

AntDesignPro开发实例_第6张图片

菜单跳转到外部地址:

{     path: 'http://192.168.3.152:8000/account',     target: '_blank', // 点击新窗口打开     name: "某某某", }

当你再path中写完整地址时,框架会自行处理跳转相应路由页面。正常的是通过config.js中的proxy进行代理的。

proxy: {
    '/api': {
      target: 'http://192.168.8.97:1111/',
      changeOrigin: true,
    },
  },

官方文档:

  • AntDesignPro 代码地址:        https://github.com/ant-design/ant-design-pro
  • AntDesignPro 文档:        https://pro.ant.design/docs/getting-started-cn
  • AntDesignPro在线问题讨论:        https://github.com/ant-design/ant-design-pro/issues
  • AntDesign在线文档:         https://ant.design/index-cn
  • 国内镜像站点:          http://ant-design-pro.gitee.io/index-cn   https://ant-design.gitee.io/docs/react/introduce-cn
  • AntDesignPro在线预览:          https://preview.pro.ant.design/dashboard/analysis

你可能感兴趣的:(Antd-Design-Pro,a,ant-design)