【文件管理】关于上传下载文件的设计
这里主要谈论的是产品设计里面的文件管理,比如文件的上传交互及背后影响到的前后端设计。
上传文件
场景:一条记录,比如个人信息,有姓名,出生年月,性别等一般的字段,还可以允许用户上传附件作为补充,比如上传个人的学历证明等。
版本一
【平台】-【基金管理】-【产品信息】旧页面(现已废弃)
后端
用户上传文件,会将文件存在一个路径下。
前端
这里的交互设计其实和后端的做法没有什么关联。就是设计的不合理。
交互设计
新建弹窗分多步完成。
- 点击新增,第一步只允许编辑一般字段,点击下一步之后,先调用一次 Create 接口,后端返回该新增记录的ID;
- 第二步,允许用户上传附件,并且不用用户点击确定按钮就已经调用了上传接口。删除附件也是立即调用删除附件的接口。
- 点击确定,更新附件的信息到该记录的附件字段。
导致的问题:所有的用户下的附件不能重名。
优点: -
缺点:用户交互麻烦,如果在上传附件的时候,想要放弃该条数据,就要关闭弹窗再去删除这条数据。(或者在第二步的弹窗中有取消按钮,点击取消就去删除第一步跳转过来时候 create 接口新增的数据)
版本二
【平台】-【基金管理】-【产品信息(新)】
后端
在版本一的基础上,会在文件名前生成一个uuid,存到路径中。
并根据文件内容生成一个md5信息,在调用上传文件的接口后,会将文件的这些信息返回。
前端
交互设计
新建弹窗中,附件也和其他字段一样管理。在点击“确定”之后,attachments字段数组存放的是上传文件接口返回的文件信息,将这个字段和其他字段一起在调用 create 接口的时候作为 payload 传下去。
缺点:文件会越来越多,一直是增量的,即使在记录中删除了附件,也没有在数据(文件路径下)中真正的删除。
采用理由:在产品信息新页面中,是需要记录修改历史记录的,没有物理删除。所以该方案合理。
版本三
【平台】-【OA】-【表单设计】-【上传组件】
相关文章:
【文件管理】关于上传下载文件的设计
这里主要谈论的是产品设计里面的文件管理,比如文件的上传交互及背后影响到的前后端设计。 上传文件 场景:一条记录,比如个人信息,有姓名,出生年月,性别等一般的字段,还可以允许用户上传附件作为…...
微服务架构 SpringCloud
didi单体应用架构 将项目所有模块(功能)打成jar或者war,然后部署一个进程--医院挂号系统; > 优点: > 1:部署简单:由于是完整的结构体,可以直接部署在一个服务器上即可。 > 2:技术单一:项目不需要复杂的技术栈,往往一套熟…...
前端 css 实现标签的效果
效果如下图 直接上代码: <div class"label-child">NEW</div> // css样式 // 父元素 class .border-radius { position: relative; overflow: hidden; } .label-child { position: absolute; width: 150rpx; height: 27rpx; text-align: cente…...
SLAM基础知识-卡尔曼滤波
前言: 在SLAM系统中,后端优化部分有两大流派。一派是基于马尔科夫性假设的滤波器方法,认为当前时刻的状态只与上一时刻的状态有关。另一派是非线性优化方法,认为当前时刻状态应该结合之前所有时刻的状态一起考虑。 卡尔曼滤波是…...
云时代【6】—— 镜像 与 容器
云时代【6】—— 镜像 与 容器 四、Docker(三)镜像 与 容器1. 镜像(1)定义(2)相关指令(3)实战演习镜像容器基本操作离线迁移镜像镜像的压缩与共享 2. 容器(1)…...
【QT+QGIS跨平台编译】之五十三:【QGIS_CORE跨平台编译】—【qgssqlstatementparser.cpp生成】
文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器,它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison,您可以使用…...
JMeter性能测试基本过程及示例
jmeter 为性能测试提供了一下特色: jmeter 可以对测试静态资源(例如 js、html 等)以及动态资源(例如 php、jsp、ajax 等等)进行性能测试 jmeter 可以挖掘出系统最大能处理的并发用户数 jmeter 提供了一系列各种形式的…...
你知道什么是回调函数吗?
c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话: 知不足而奋进,望远山而前行&am…...
mac苹果电脑c盘满了如何清理内存?2024最新操作教程分享
苹果电脑用户经常会遇到麻烦:内置存储器(即C盘)空间不断缩小,电脑运行缓慢。在这种情况下,苹果电脑c盘满了怎么清理?如何有效清理和优化存储空间,提高计算机性能?成了一个重要的问题。今天,我想给大家详细介…...
k8s-kubeapps图形化管理 21
结合harbor仓库 由于kubeapps不读取hosts解析,因此需要添加本地仓库域名解析(dns解析) 更改context为全局模式 添加repo仓库 复制ca证书 添加成功 图形化部署 更新部署应用版本 再次进行部署 上传nginx 每隔十分钟会自动进行刷新 在本地仓库…...
1_Springboot(一)入门
Springboot(一)——入门 本章重点: 1.什么是Springboot; 2.使用Springboot搭建web项目; 一、Springboot 1.Springboot产生的背景 Servlet->Struts2->Spring->SpringMVC,技术发展过程中,对使…...
Docker Machine简介
Docker Machine 是一种可以让您在虚拟主机上安装 Docker 的工具,并可以使用 docker-machine 命令来管理主机。 Docker Machine 也可以集中管理所有的 docker 主机,比如快速的给 100 台服务器安装上 docker。 Docker Machine 管理的虚拟主机可以是机上的…...
GWO优化高斯回归预测(matlab代码)
GWO-高斯回归预测matlab代码 GWO(Grey Wolf Optimizer,灰狼优化算法)是一种群智能优化算法,由澳大利亚格里菲斯大学的Mirjalili等人于2014年提出。这种算法的设计灵感来源于灰狼群体的捕食行为,其核心思想在于模仿灰狼…...
LaTeX-设置图像与表格位置
文章目录 LaTeX-设置图像与表格位置1.图像位置定位1.1 基本定位1.2 figure环境实现图像的位置定位(常用)1.3 一个图形中包含多个图像1.4在图形周围换行文本 2.表格位置定位2.1基本定位2.1 table环境实现表格的位置定位(常用)2.3在…...
STM32 DMA入门指导
什么是DMA DMA,全称直接存储器访问(Direct Memory Access),是一种允许硬件子系统直接读写系统内存的技术,无需中央处理单元(CPU)的介入。下面是DMA的工作原理概述: 数据传输触发&am…...
mysql根据指定顺序返回数据--order by field
在查询数据的时候,在in查询的时候,想返回的数据根据 in里的数据顺序返回,可以直接在orderby中通过 FIELD(字段名称逗号分隔的值的顺序) 进行指定;示例没有加 order by field添加 order by field效果...
IEEE SGL与NVMe SGL的区别?
在HBA(Host Bus Adapter)驱动程序中,IEEE SGL(Institute of Electrical and Electronics Engineers Scatter-Gather List)和NVMe SGL(Non-Volatile Memory Express Scatter-Gather List)是两种不…...
struct内存对齐
5.1.3 struct内存对齐 结构体的对齐规则: (1)第一个成员在与结构体偏移量为0的地址处。 (2)其他成员变量要对齐到对齐数的整数倍的地址处 对齐数 编译器默认的对齐数与该成员大小的较小值。(vs中默认值为8) (3)结构体总大小为最大对齐数…...
探索Redis 6.0的新特性
Redis(Remote Dictionary Server)是一个开源的内存中数据结构存储系统,通常被用作缓存、消息队列和实时数据处理等场景。它的简单性、高性能以及丰富的数据结构支持使其成为了众多开发者和企业的首选。在Redis 6.0版本中,引入了一…...
关于CSS中定位的教程
在CSS中,定位是一种强大的工具,可以帮助我们控制元素在页面上的位置。通过使用定位属性,我们可以精确地放置元素在页面的任何位置,并且可以实现各种复杂的布局效果。在本教程中,我们将深入探讨CSS中的定位属性…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
数据结构:递归的种类(Types of Recursion)
目录 尾递归(Tail Recursion) 什么是 Loop(循环)? 复杂度分析 头递归(Head Recursion) 树形递归(Tree Recursion) 线性递归(Linear Recursion)…...
车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...
