首页 > 其他分享 >vue前后端分离项目中,对于空字符串转可空类型出错的解决办法

vue前后端分离项目中,对于空字符串转可空类型出错的解决办法

时间:2023-09-15 17:44:07浏览次数:41  
标签:vue NullableConverter options Converters 出错 reader 转可空 序列化 JsonSerializerOptions

环境:netcore  6.0+

序列化采用自带的 System.Text.Json工具

使用vue做前后端分离时,我们提交的对象中,可能有些字段是为空字符串,但是对应接口要求是int? ,decimal? datetime?等类型。
那么在序列化时,就会报错。

因为空字符串无法直接反序列化为 null

 

所以我们需要自定义一个转换规则:

 public class NullableConverter<T> : JsonConverter<T?> where T : struct
    {

        public override T? Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
        {
            if (reader.TokenType == JsonTokenType.String)
            {
                if (string.IsNullOrEmpty(reader.GetString()) || string.IsNullOrWhiteSpace(reader.GetString()))
                {
                    return null;
                }
            }
            return JsonSerializer.Deserialize<T>(ref reader, options);
        }


        public override void Write(Utf8JsonWriter writer, T? value, JsonSerializerOptions options)
        {
            JsonSerializer.Serialize(writer, value!.Value, options);
        }

    }

然后注入到services中

            services.AddControllersWithViews(options =>
            {
            }).AddJsonOptions(options =>
            {
                options.JsonSerializerOptions.Converters.Add(new KJXX.Models.NullableConverter<int>());
                options.JsonSerializerOptions.Converters.Add(new KJXX.Models.NullableConverter<decimal>());
                options.JsonSerializerOptions.Converters.Add(new KJXX.Models.NullableConverter<DateTime>());

            });

有多少个类型,都需要增加对饮的option注入。

 

这样就能解决了

 

标签:vue,NullableConverter,options,Converters,出错,reader,转可空,序列化,JsonSerializerOptions
From: https://www.cnblogs.com/fei686868/p/17705609.html

相关文章

  • 原生HTML单页面使用vue框架
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=devi......
  • antdesign vue通用表单生成页面
    效果图效果图由于涉及企业敏感信息,信息进行了打码,还请多多包涵。。。点击左侧菜单树,右侧加载不同table,并且绑定列名不同(说明:前两列企业名称和城市名称固定不变)技术思路左侧菜单为标识,控制表单页面的布局和模块显示,字段显示隐藏,可根据下面2附图加深理解,由于信息敏感问题,暂时不提供......
  • vue-day02
    模版语法html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>&......
  • Vue Debug Reac 配置
    https://zhuanlan.zhihu.com/p/475999585 作为前端开发,基本每天都要调试Vue/React代码,不知道大家都是怎么调试的,但我猜大概有这么几种:不调试,直接看代码找问题console.log打印日志用ChromeDevtools的debugger来调试用VSCode的debugger来调试不同的调试方式效......
  • vue vue-devtools调试工具神器安装
    目录vuevue-devtools调试工具神器安装前言chrome商店直接安装手动安装第一步:找到vue-devtools的github项目,并将其clone到本地.vue-devtools第二步:安装项目所需要的npm包第三步:编译项目文件第四步:添加至chrome游览器vue-devtools如何使用文章转自vuevue-devtools调试工具神器安......
  • vue3videplayer播放m3u8视频流注意事项
    前言使用vue3开发项目时,碰上需要做一个视频流列表的页面,最开始是想获取所有列表数据后创建对应的video标签,这样默认获取第一帧作为封面,同时暂停视频减轻不断请求的压力。但开发后发现视频就算暂停后也会继续请求视频流,多个视频反而会导致页面卡顿。方案手动获取视频的第一......
  • Vue——模版语法、文本指令、事件指令、属性指令、style和class、条件渲染、列表渲染
    模版语法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></head><body><divid=&......
  • vue背景及快速使用
    前端介绍1.HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看2. Ajax的出现->后台发送异步请求,Render+Ajax混合3.单用Ajax(加载数据,DOM渲染页......
  • 每日一练:无感刷新页面(附可运行的前后端源码,前端vue,后端node)
    1、前言想象下,你正常在网页上浏览页面。突然弹出一个窗口,告诉你登录失效,跳回了登录页面,让你重新登录。你是不是很恼火。这时候无感刷新的作用就体现出来了。2、方案2.1redis设置过期时间在最新的技术当中,token一般都是在Redis服务器存着,设置过期时间。只要在有效时间内,重新发......
  • Vue基础
    一条件渲染指令释义v-if相当于:ifv-else相当于:elsev-else-if相当于:elseif<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>if、elseif、else</title><scriptsrc=......