【ES6+ReactJs】第5章： Ant Design Pro

了解Ant Design Pro

Ant Design Pro 是基于Ant Design的一个开箱即用的，企业级中后台前端/设计解决方案。
效果：

源码地址：https://github.com/ant-design/ant-design-pro

特性：

3.2、快速入门
3.2.1、部署安装
下载地址：https://github.com/ant-design/ant-design-pro
我们使用资料中提供的，已经下载好的文件：ant-design-pro-master.zip
第一步：将ant-design-pro-master.zip解压到任意目录，我的目录是F:\code

Ant Design Pro提供的目录如下：

第二步，导入项目到Idea中

第三步：进行初始化以及启动


可以看到，系统已经启动完成。

3.2.2、菜单和路由
默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路 由。
在pro中，菜单和路由，在router.config.js配置文件中进行管理：

打开router.config.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/

/user的布局：

接下来，我们先重点关注，/路由：

所以，可以得出结论，菜单是有路由的配置生成的。接下来进行实验，新增一个路由：

测试：

可以看出，新的菜单以及添加到页面中，只是显示的文字不对。那么文字在哪里配置 呢？
其实，文字是在国际化文件中进行配置的：


新增配置如下：

进行测试：

发现，已经正常显示了。

3.2.3、新增页面
上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢？
所有的页面依然是保存的src/pages中，在pages目录下，以功能为单元创建目录，如：

创建文件 NewAnalysis.js：

修改路由中的路径：

测试：

可以看到，一个新的页面就创建好了，并且已经加入到菜单中。

3.2.4、pro中的model执行流程

在pro系统中，model是如何执行的，下面我们以表格为例，探究下在Pro中的执行流程。

进入TableList.js代码进行查看：
生成表格的主要逻辑在这里：

在StandardTable中，使用Table组件生成表格，其中数据源是data：

TableList.js中，data数据从构造方法中获取到：

this.props中的rule数据，是通过@connect()修饰器获取：
需要注意的是：{ rule, loading }是解构表达式，
从props中获取数据

数据从model中获取，在models下的rule.js中：

在TableList.js中，组件加载完成后进行加载数据:

在rule.js中，进行加载数据：

queryRule是在/services/api中进行了定义：

数据的mock是在mock/rule.js中完成。

这就是整个数据的加载、更新流程。