在VUE前端开发中,一般会采用前端UI框架来实现基础UI的搭建,如ElementUI以及AntD,今天,我们讨论一个照片墙组件的定制开发,基于的框架是AntD,一般情况下,其它框架或组件的定制方式大同小异。
之所以出现定制需求,是因为AntD中的照片墙组件Upload内嵌了后台管理逻辑,即跟服务器的交互已经通过action,method等参数实现了,但商业开发中,后台交互一般有统一的API接口并遵循统一的安全机制,因此,Upload和后端的交互就需要通过定制去使用商业API而非自包含的后台交互逻辑。
Upload的定制接口是预留的,使用起来比较方便,重要的点包括如下几个:
预留接口的定义
AntD采用预留接口为customRequest,接口说明如下:
在组件中,通过属性定义,如下图,我定义一个新函数onUpload:
自定义接口函数的实现要点
Upload主要实现一个IPO结构,输入上传的文件,输出为成功或失败的结论,大致的实现逻辑如下:
onUpload中,我们接管了组件通过data传入的file信息,以及上传成功和失败的两个回调函数onSuccess和onError,而真正的上传操作,我们通过this.$nsdHandler.uploadFile来实现了,这个函数会根据调用结果分别回调onSuccess和onError做前端UI的更新。
删除接口
以上是上传接口,删除接口道理是一样的,Upload组件预留了remove属性作为删除的回调,因此,我们可以定制删除函数如下:
参数格式
这里有个问题要注意一下,Upload组件是通过fileList数组管理照片墙照片的,一个传参文件的参数结构如下图所示:
上述结构在初始化时,Upload会生成全新的file信息,我们在进行组件定制时,如果后端的返回结构和Upload默认组件不符,可以借助Upload生成的file对象中有一个字段叫response来做一下转化,也就是说,这是Upload存放原始数据格式的地方。
当然也可以自己修改Upload的参数结构,因为我这里应用比较简单,做一下简单转化就可以了,感兴趣的朋友可以自己试一下参数结构的全定制,有成果欢迎随时和我交流。