快速学习Ant Design Pro-快速入门
快速学习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中
第三步：进行初始化以及启动
tyarn install #安装相关依赖
tyarn start #启动服务测试：
可以看到，系统已经启动完成。
3.2.2、菜单和路由
默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路 由。
在pro中，菜单和路由，在router.config.js配置文件中进行管理：
打开router.config.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/
/user的布局：
接下来，我们先重点关注，/路由：
routes: [
// dashboard
{
path: '/',
redirect: '/dashboard/analysis'
},
{
path: '/dashboard',
name: 'dashboard',
icon: 'dashboard',
routes: [{
path: '/dashboard/analysis', //请求路径name: 'analysis',
component: './Dashboard/Analysis', //组件位置
},
{
path: '/dashboard/monitor',
name: 'monitor',
component: './Dashboard/Monitor',
},
{
path: '/dashboard/workplace',
name: 'workplace',
component: './Dashboard/Workplace',
},
],
},所以，可以得出结论，菜单是有路由的配置生成的。 接下来进行实验，新增一个路由：
// new
{
path: '/new',
name: 'new',
icon: 'user',
routes: [{
path: '/new/analysis',
name: 'analysis',
component: './Dashboard/Analysis',
},
{
path: '/new/monitor',
name: 'monitor',
component: './Dashboard/Monitor',
},
{
path: '/new/workplace',
name: 'workplace',
component: './Dashboard/Workplace',
},
],
},测试：
可以看出，新的菜单以及添加到页面中，只是显示的文字不对。那么文字在哪里配置呢？
其实，文字是在国际化文件中进行配置的：
新增配置如下：
'menu.new': 'New Dashboard',
'menu.new.analysis': 'New 分析页',
'menu.new.monitor': 'New 监控页',
'menu.new.workplace': 'New 工作台',进行测试：
发现，已经正常显示了。
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中完成。
这就是整个数据的加载、更新流程。