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

一、关于上手。

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

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

  • dva知识地图
  • js快速预览
  • react快速预览
  • react小书
  • dva文档
  • react中文文档
  • ES6
  • MDN ??? MDN有什么好看的?如果你js不太熟,MDN有很全的API可以查阅

二、使用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接口地址、能否再进行封装达到动态的目的呢?这样连修改接口的重复工作也省了。

感谢阅读。



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Activiti中的高级脚本:自定义配置注入

脚本任务可能是Activiti代码库中“最古老的”类之一,但我认为它仍然未被许多人使用。 (可以理解的?)缺点当然是性能(解释还是编译),并且从IDE角度来看支持较少。 但是,好处&#xf…

帆软决策报表嵌入html,在决策报表中使用网页框控件

假设决策报表里有一个网页框控件,控件名为rHIframe0;同时有三个按钮控件,分别给按钮控件添加下面的点击事件:3.1 setValue(String)设置并刷新网页框控件的地址(保留原参数)1)模板路径var Widget this.options.form.getWidgetByNa…

CentOS7.4搭建ftp服务

1.使用yum安装vsftpd yum install vsftpd -y 2.安装完成后,启动 FTP 服务: service vsftpd start 3.配置ftp权限 目前 FTP 服务登陆允许匿名登陆,也无法区分用户访问,为了安全,我们需要设置一下ftp权限 vsftpd 的配置目…

mysql binlog redo_mysql的binlog与redo log

binlogMysql Binlog是二进制格式的日志文件,用来记录Mysql内部对数据库的改动(只记录对数据的修改操作),主要用于数据库的主从复制以及增量恢复。获取binlog日志列表MariaDB [examples]> show master logs;----------------------| Log_name | File_s…

如何把网址配置为http和https可以同时访问

1.打开iis7 ,找到具体站点 2.点击站点后右侧有个绑定按钮 3.点击绑定,增加https,设置端口,ssl选择 iis证书 4.找到ssl设置,要求证书不勾选,客户证书,忽略 5.如果右侧不显示浏览站点https,点击站点高级设置-已启用协议&…

【前端轶事】Chrome 小恐龙背后的故事

本文转自 FEPulse 公众号(微信搜索 FEPulse,精选国内外最新前端资讯,为你把握前端脉搏)。 如果你是 Chrome 用户,一定对那萌萌哒的小恐龙不陌生,每当互联网连接断开时,你便能看到那只小恐龙&am…

高起专计算机专业答案,Windows知识题(高起专)答案

WORD格式可编辑.第2章Windows操作系统及其应用(单选题)1.Windows操作系统的主要功能是___B___。A.实现软、硬件转换B.管理计算机系统所有的软、硬件C.把源程序转换为目标程序D.进行数据处理提示:操作系统属于系统软件,它的主要功能是:管理系统…

深浅copy

深浅copy对比 列表赋值 例如:列表a[‘a’, b, c, d, 1, 2, 3],当执行代码ba,可以得到b[‘a’, b, c, d, 1, 2, 3],具体实现如下: >>> a[a, b, c, d, 1, 2, 3] >>> ba >>> id(a),id(b) (280…

mysql5 varchar_MYSQL 5.7 VARCHAR 类型实验

MYSQL 的VARCHAR 类型字段的最多能存储多少字符?模糊记得 VARCHAR 最多能存65535个字符,真的吗?理论上,一个字符类型能存的字符数量跟选取的编码字符集和存储长度限制肯定是有关系的,字符编码长度越小,长度…

《React源码解析》系列完结!

前言 距离第一篇《React源码解析(一)》已经过去将近4个月的时间,由于是我第一次进行源码解析相关的写作,思路和文笔还不够成熟。一百多天以来,我基于读者反馈反思这几篇文章中的不足,同时也在不断学习借鉴其他优秀作者的写作方法…

优化Java序列化– Java,XML,JSON,Kryo,POF

也许我很天真,但是我一直认为Java序列化肯定是将Java对象序列化为二进制形式的最快,最有效的方法。 毕竟Java是第7个主要发行版,所以这不是新技术,并且由于每个JDK似乎都比上一个快,因此我错误地认为序列化现在必须非常…

html5 css 字体加粗,HTML和CSS实现字体加粗的三种方法

大家在浏览网站时有没有注意到,页面中有些文字或字体加粗了,正在学习HTML和CSS的小伙伴,你知道HTML如何给文字加粗吗?CSS怎么设置字体加粗呢?这篇文章给大家总结了给字体和文字加粗的三种方法,包括HTML中的…

浅谈模拟退火

核心思想 模拟退火十分好写,它的核心思想就是: 每一次降温都可以从当前状态转移到另一种相近状态(没有严格定义,可以自己想产生相近解的方法) 如果那个相近状态的答案更优,当然转移到那种状态! …

如何应用前端技术唤起app及判断用户来源及与原生交互的原理

做唤起时需要native端进行配合, h5唤起app这种需求是常见的。在移动为王的时代,h5在app导流上发挥着重要的作用。 目前我们采用的唤起方式是url scheme(iOS,Android平台都支持),只需原生APP开发时注册scheme, 那么用户…

mysql 设置client char_mysql编码问题:show variables like “%char%”

mysql编码设置mysql> SHOW VARIABLES LIKE character_set_%;------------------------------------------------------| Variable_name | Value |------------------------------------------------------| character_set_client | latin1 || character_set_connection | la…

虾扯蛋之函数防抖和节流

背景 今天在coding的时候,做了一个搜索框,也正是这个搜索框,让我和后台小伙伴直接由铁磁变为塑料兄弟。那到底发生啥了呢?其实很简单,其实很无奈,就是我用王者的手速把他的接口访问崩了! 我们在…

四川省内二本计算机公立好的大学排名,四川有哪些二本院校是公立的?附四川省公立二本大学排名及分数线...

选择科目测一测我能上哪些大学选择科目领取你的专属报告>选择省份关闭请选择科目确定v>四川省内的公办大学一直以来都是历年高考生及家长关注的重点,本篇文章我将针对“四川省有多少所二本公立大学?有哪四川省内的公办大学一直以来都是历年高考生及…

NetBeans 7.4 Beta提示警告无效的异常处理

有许多例子说明Java异常处理可能比首次出现时要困难得多,Josh Bloch专门将一整章的《 Effective Java》 (两个版本)专门用于异常处理。 Java中的检查异常模型 仍然 “ 有争议” 。 我很高兴看到我最近下载的NetBeans 7.4 beta有一些提示&…

平心静气

昨天做一个功能的时候需要修改ofbiz代码,增加关联的表和查询字段,本以为很简单,照着写一下就好了,但是一直报错.临近下班,苦思冥想没有找到原因,八点左右不得已回家了. 第二天早上半个小时搞定.关键还是要平心静气,其实只是一个大小写的问题,由于大小写不匹配,没有匹配到对应的…

mysql5.7.17解压版安装_Windows中 MySQL5.7.17解压版安装步骤

1、先去MySQL官网下载。当前最新版是5.7.19,可能安装方法不同了,本人测试没有安装成功,若有安装成功的朋友,希望分享一下安装步骤。2、将下载的压缩包解压出来,然后在“MySQL解压目录”中新建“data”文件夹。如下图&a…