简介
这是一个为前端使用的数据模型转换层/序列化层。可将后端返回的数据进行统一转换,成为前端方便使用的数据类,同时,也支持提交前将前端的数据反向转换,变成后端可接受的数据。
这两步操作由库封装好,前端只需要配置好对象,就可以直接使用了,用起来无需多个繁琐的步骤。
序列化、反序列化
当我们编写复杂的数据模型时,假如对象中有前端需要使用的私有函数、方法或者其他嵌套类,而从后端获取的数据只是纯json,需要继续使用这些函数、方法或者其他嵌套类,对于以前的方法只能重新根据json创建一个新的对象,然后再赋值,如果有多个地方需要使用这些数据,那么转换代码会变得到处都是,特别冗长。
本库为你封装了这些操作,你只需要配置好对象,输入后端的纯json,然后就可以快速递归地创建需要的对象,同时,也支持将前端的数据反向转换,变成后端可接受的数据,将转换相关代码封装起来,统一简单调用。
与后端数据交互
在我们开发CURD页面时,经常会遇到下面这几种恼人情况,使用本库,可以帮你解决这些烦人的问题:
后端返回的某些数据不能直接在组件中使用,需要在设置到组件之前做一次转换。例如,后端接口的某个日期字段,格式是 YYYY-MM-DD 的字符串,在使用组件库时,组件需要传入一个
Date对象。那么在常规方法中,我们需要在请求数据之后,赋值表单之前,需要手动将所有日期字段转为Date,然后在提交数据之前将所有Date转为YYYY-MM-DD 的字符串,再提交,比较麻烦。遇到上面这些情况,我可以使用本库的类型转换功能,在请求后端数据之后,把需要的字段转为我需要的类型,可以转为预设类型,也可以自定义处理,也可以多步流水线处理。
后端返回的字段有拼写错误,例如把
videoUrl写成vedioUrl(后端英语垃圾),我有强迫症,必须把它改过来。后端的字段都是胡乱写的,例如
abc,x,y,dd,set,如果直接在UI中引用,把我前端的UI相关代码字段弄得乱七八糟的,搞不清楚哪个字段是什么意思,后期维护起来看得眼花缭乱。后端特别喜欢胡乱改字段名称,偏偏这个字段被多个界面引用。例如:有多个界面显示了某个接口的
someString属性,假如某一天后端吧字段名称someString改成了thatString,那么我们在界面显示的地方也需要修改名称。以上情况如果只是一处两处还好,如果有好多地方都需要修改,那就非常麻烦了遇到上面这些情况,我就可以使用本库的字段映射功能,我可以将后端不好或者修改的字段名称映射到我自己的字段名称,前端逻辑和UI只需要引用这个字段,提交的时候会自动转为源字段,这样前端的命名就不会和后端过于耦合,就可以把后端不好的命名和习惯隔离在外!
后端返回的数据结构不统一,例如一个资源的接收/提交格式不一致,需要转换。例如:后端在拉取资源时返回了这种数据格式
{ "someKey": { "value": 1 }, }但是提交资源时需要这种数据格式
{ "someKey": 1, }遇到上面这种情况,我可以在本库的模型定义中自定义转换格式或者转换器,所有使用到这个资源的数据转换都在一处完成,无需在每个UI中手动写多次转换代码,将转换代码与UI解耦。
后端返回一个大结构数据时有些时候居然会缺了几个字段,造成页面显示异常,居然甩锅给前端!
遇到上面这种情况,我可以在本库的模型定义中,增加严格检查,遇到后端不传某些字段或者字段异常时抛出错误,精准定位哪个字段丢失。
*(关于上面几种情况的解决方法,请参考下方使用案例)
因此,本库就是为解决这些问题所写的,他的主要功能是:将数据转换单独抽离出来,可以统一在这里转换出结构清晰的数据供UI组件使用,而无需与UI组件耦合,无需再重复好几个地方写转换数据的代码。
也可以用来方式习惯不好的后端干扰我们前端的开发,将不好的东西隔离在外面!
主要的建议用法是:将其与您的 request/fecth 请求封装在一起,在请求/提交时自动转换相关数据,这样就无需在调用界面时还需要每个地方手动转换。
特性
- 支持数据双向转换,可以将数据从服务端返回的格式 》转为》 前端所需要的格式,又在提交时 从前端格式 》转为》 服务端需要的格式。
- 支持多种字段类型的转换(字符串、数字、布尔值,Date,dayjs,数组,对象)。
- 支持自定义转换器。
- 支持多转换器流水线转换。
- 支持数组、对象嵌套转换。
- 支持字段名称映射。
- 支持检查数据字段是否存在缺失,这在大量数据缺失某些字段排查时非常有用。
希望此库可以为你的开发带来帮助!
开始之前
文档中所示案例,你都可在 Github 仓库 中找到完整的源代码。
作者开发不易,如果这个项目对您有帮助,希望你可以去 Github 帮我点个 ⭐ ,这将是对我极大的鼓励。谢谢啦 (●'◡'●)
如果你准备好了,那我们就开始吧~