Skip to content

简介

这是一个为前端使用的数据模型转换层/序列化层。可将后端返回的数据进行统一转换,成为前端方便使用的数据类,同时,也支持提交前将前端的数据反向转换,变成后端可接受的数据。

这两步操作由库封装好,前端只需要配置好对象,就可以直接使用了,用起来无需多个繁琐的步骤。

序列化、反序列化

当我们编写复杂的数据模型时,假如对象中有前端需要使用的私有函数、方法或者其他嵌套类,而从后端获取的数据只是纯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 帮我点个 ⭐ ,这将是对我极大的鼓励。谢谢啦 (●'◡'●)

如果你准备好了,那我们就开始吧~

立即开始

Released under the MIT License.