下载地址: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 #启动服务
测试:
可以看到,系统已经启动完成。
默认的菜单是不能直接投入到项目开发的,所以,我们需要搞清楚如何自定义菜单和路 由。
在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 工作台',
进行测试:
发现,已经正常显示了。
上面我们添加了新的菜单,但是页面依然使用的是模板中的页面,那么如何新增页面呢?
所有的页面依然是保存的src/pages中,在pages目录下,以功能为单元创建目录,如:
创建文件 NewAnalysis.js:
修改路由中的路径:
测试:
可以看到,一个新的页面就创建好了,并且已经加入到菜单中。
在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中完成。
这就是整个数据的加载、更新流程。