Ant Design学习(八)

3.2.3、新增页面

上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢？

所有的页面依然是保存的src/pages中，在pages目录下，以功能为单元创建目录，如：

创建文件 NewAnalysis.js：

import React from 'react';
class NewAnalysis extends React.Component {
render() {
return (
<div>NewAnalysis</div>
);
}
}
export default NewAnalysis;

修改路由中的路径：

测试：

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

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中完成。

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