阅读 4015

使用ant design Pro开发项目的小结

一、关于上手。

1. 关于ant design Pro的介绍,自己看官网,大致上可以理解为ant design(组件库) + ant design Pro (完整的项目)+ dva(路由+数据流管理)的组合拳。总之这个Pro是一个已经帮你打通了从搭建到测试打包发布的一整套完整的项目,你只需要站在巨人的肩膀上开发就好了。

2. 按照官网安装好项目之后,就能看到几个页面。进行开发之前,你需要一定的react语法、Js(ES6)、dva的基础。啥?全家桶都不会?没关系,写页面又不需要你精通全家桶,看完以下链接就开始写页面吧,遇到不会的再去查,这样学比较快。请按照以下顺序食用

二、使用ant design Pro 

以一个ant design Table组件展示数据为例。


这样一个页面,可以看到:左边是导航栏menu组件,右边是主体BasicLayout组件。至于什么是layout,同样,在ant design Pro官网找得到。当你刚安装好antdp的时候已经有几个页面可以参考了。此处:在页面中,有几个按钮,按钮下方是ant design 的Table组件。

一、新建一个页面。

1.在路由中新建一条页面的配置。先不要管报错,因为路由对应的component和models你还没有,继续往下看。

2.新增一条之后,需要去对应的路径新建页面。一般都放在routes文件夹中


例如我新建了一个角色管理的页面,使用connect进行关联models。

3.然后再去models文件夹中新建一个model层文件,注意namespace要对应connect的component


二、数据交互。

这个表格页面使用antd 的table 组件,自己去官网拷贝代码。这里不再赘述。主要提一下,数据是怎样交互的。

Table组件里面的行数据就是是columns,它有自己的数据格式,你需要把数据格式转换成他规定的那种。在刚装好的项目中有表格的例子你可以参考一下,只不过案例是写死的静态数据。试试看:你把columns里面的数据删除掉,然后从外部获取到数据替换掉。

1.使用生命周期函数componentDidMount在组件挂载时,去请求表格的数据。这里发起一个dispatch 触发action,type的值就是models层中的。


2.在models中会使用antd封装好的方法去请求api.js中定义好的接口地址,然后等待返回就可以处理数据。


此处response拿到服务端返回的结果。你可以在此处对数据进行处理。比如后端返回的并非是你需要的数据格式,或者你可以进行更高层次的封装。

3.再调用reducers中的save方法将数据存储。通过在UIcomponent中已经进行关联,此时this.props能够取到你传送过去的数据。然后放入Table组件即可。

此处可能讲得不是很详细,比如上述代码各种方法是做什么用的,如果你有仔细看过文章开头列举的文档,尤其是dva文档,心中应该略知一二。此处只介绍了一个很粗略的开发流程,后续我会详细讲解。

三、个人开发思想及心得

1.在使用这套框架开发几个页面之后会明显感觉到,框架有点像MVC分层,十分规范!

M层models负责控制数据

V层UIComponent ,and design以及为你准备了丰富的组件库。

C层control,我个人理解为是api层的管理,将所有的需要请求后台数据的接口统一起来,很直观也方便调用和修改。

2.ant design Pro几乎已经为你做好了一切,你只需要替换数据、接口,开箱即用。在你切完数个页面之后会发现一个问题:如何进行更高层次的封装呢?不能每次都要复制粘贴很多重复的组件代码呢?

我个人是这样做的:比如说上面举例的表格页面。

首先,我会封装一个函数,函数接收各种字段。比如后端返回一系列的input各种类型的字段给你,你在函数中对字段进行匹配,每个字段对应到ant design的组件,将数据与组件关联,然后return这个组件。最后将所有的组件push到一个数组中,然后放入render函数,即可渲染出整个页面。

这个函数有点类似于React的HOC高阶组件(传组件和props进去,rerurn新的组件出来)概念,区别是我这里传入的是每个组件所需的数据而非组件,而return出的是一个组件。

3.多利用无状态组件、函数组件。表格上最后一行,编辑/删除按钮。我是在models层进行处理的,因为columns(Table组件的数据对象)在UIcomponents层已经进行渲染了,个人认为UI组件应该尽量简化,它只负责渲染数据。我在models层中将columns中的数据进行遍历,在本地构建一个对象(编辑按钮组件、删除按钮组件)与服务端返回的对象进行合并。同时,两个按钮的组件应该本身具备自有的功能,比如在任何一个表格中调用该组件即可使用其功能。合并后将新的colums对象丢给表格组件,这样进行了一个小小的抽象。

在表格上方的按钮,同样是通过函数来输出的按钮组件。按钮具有各自的属性、功能,通过入参来传递给函数,然后通过props设置给组件,来达到复用的目的。

最后,页面上有哪些组件、哪些按钮该如何规定呢?你需要和后端协商好字段、属性,比如一个表单页面有很多种input类型,input会有type、rules(验证规则)....后端返回给你一段组件所需的属性之后,你根据这些数据即可渲染出整个页面的组件。


以上是本人萌新使用ant design Pro的小小经验,可能创建页面的案例讲的不太清晰、抽象封装的思想不知道各位能否明白我所说的。

希望各位大佬们多多指教。如何进行更高层次的封装呢?每个页面需要对应路由、models、api接口地址、能否再进行封装达到动态的目的呢?这样连修改接口的重复工作也省了。

感谢阅读。



关注下面的标签,发现更多相似文章
评论

查看更多 >