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

网友投稿 651 2022-11-26

【ES6+Reactjs】第5章: Ant Design Pro

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

了解Ant Design Pro

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

效果:

源码地址: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中完成。

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

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:【ES6+ReactJs】第2章:ReactJS入门
下一篇:【Linux云计算架构:第三阶段-Linux高级运维架构】第14章——使用Varnish为网站加速
相关文章

 发表评论

暂时没有评论,来抢沙发吧~