网站首页 > 技术文章 正文
在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的参数结构,因为我这里应用比较简单,做一下简单转化就可以了,感兴趣的朋友可以自己试一下参数结构的全定制,有成果欢迎随时和我交流。
- 上一篇: vue搭配什么做前端开发比较好?
- 下一篇: 技术分享 | 测试平台开发-前端开发之Vue.js 框架
猜你喜欢
- 2024-11-21 初学Vue(一) -- Vue简单入门
- 2024-11-21 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
- 2024-11-21 新手自学前端开发的六个阶段
- 2024-11-21 Vue Shop Vite:轻量级前端开发的新神器
- 2024-11-21 实战 | 基于Vue语言的企业级前端开发框架Hui的应用研究
- 2024-11-21 前端图形学实战:从零开发几何画板(vue3 + vite版)
- 2024-11-21 循序渐进Vue+Element前端开发(14)—根据ABP后端接口实现前端界面
- 2024-11-21 1.8K Star!Cool-Admin-Vue:AI编码+流程编排,重新定义后台开发
- 2024-11-21 VUE3前端开发入门系列教程三:VITE热更新配置及WSL填坑
- 2024-11-21 后端Springboot+前端Vue开发的角色权限管理系统,源码免费分享
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)