前端请求后端数据，后端返回前端的值如果为Null的几种处理方式

最新推荐文章于 2024-06-19 14:30:44 发布
置顶 最新推荐文章于 2024-06-19 14:30:44 发布
阅读量4.7w 收藏 66
点赞数 15
分类专栏： Java攻城狮的成长之路 打Bug升级的程序猿 后端 文章标签： Null 前端 postman Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41973208/article/details/84931655
版权

后端传给前端的Bean中有的属性为Null怎么处理？

  • 前端向后端请求数据，而返回的Bean中有的属性为Null值，如图
    在这里插入图片描述

一般遇到这种情况，是要尽量避免向前端传Null值的，因为前端对这样的数据处理起来很麻烦，所以一般情况下我们如果字段是非必需的数据，一般选择不返回这条属性，如果是必须的话，一般就返回一个空字符占位。

方法一：直接过滤，选择不返回！

  • 在对象不多的情况下可以选择直接在DTO对象上加上注解，如图
//如果值为Null则不返回该条属性。
     @JsonInclude(JsonInclude.Include.NON_NULL)

在这里插入图片描述

  • 上面那个注释掉的那个注解也可以同样的效果，只不过已经被技术淘汰了！
如果对象太多的话，就需要设置全局变量了，这个时候只需找到配置文件，在里面添加一条记录即可！
#设置全局，Null值不返回到前端
  jackson:
     default-property-inclusion: non_null

在这里插入图片描述

  • 两个方法都可以直接将Null值的属性直接过滤掉！不返回给前端！效果如下，我们可以看到的是orderDtailList对象已经不在了！
    在这里插入图片描述

方法二：返回空字符占位或设置默认值。

当然以上的方法是是直接不返回。但一个项目中不可能所有的Null值都不返回，有的数据即使为Null值，又必须返回的数据，这个时候我们一般就选择返回空占位符，或空符号位！

  • 这个时候我们可以直接为对象设置默认值，例如我的orderDtailList返回的是List ，我就直接给它初始化为ArrayList：

这是我之前的以及返回情况：
在这里插入图片描述
在这里插入图片描述

这是修改过后以及返回情况：
在这里插入图片描述
在这里插入图片描述

  • 可以看到的是我的属性并没有返回Null值，而是返回一个空数组占位符！

如果返回给前端是一个字符串的话，一般就设置个空字符：
如图，我之前没有给msg设置默认值：
在这里插入图片描述
用postman获取数据，可以看到都是返回的值为Null：

在这里插入图片描述

这里我将msg设置默认为空字符，再用postman获取返回值可以看到，msg已经变成了空字符！但这条属性依然存在！
在这里插入图片描述
在这里插入图片描述
声明：本文为作者学习廖师兄实战课程中总结所得，如有贻误，望指正！谢谢！

private_static
关注
  • 15
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
如何在项目中实现，后端返回的数据中含有null的则不在前端展示
邻家
10-21 1198
方式 1：application 上加配置 只需要在配置文件 上，增加 如下配置。 application 格式配置： spring.jackson.default-property-inclusion=non_null yml 格式配置： spring: jackson: default-property-inclusion: non_null 注意：方式 1 其实有一定的局限性。如果项目里继承了 WebMvcConfigurationSupport，那么方式 1 配置就失效了。 方式
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
10-19
需要注意的是，如果除了文件以外的其他键值对数据没有传过来，后端获取的值会是字符串"null"。 在这两种方法中，都要确保AJAX请求的异步传输成功，并且在后端正确地接收和处理文件与数据。同时，确保所有细节正确...
前后端交互时将返回值中的null置为空字符串的8种方式
qwerasdctds的博客
05-19 3937
返回给前端的Json对象中有很多字段没有值，就会有很多的null值（如下图）前端判断处理会比较麻烦，所以打算在后端回传数据时做一下处理
后端返回前端的值为Null时的几种处理方式
热门推荐
yemuyouhan的博客
08-31 1万+
问题描述： 接手了公司一个不知道转了几手的老项目，在与前端联调的时候，发现有很多返回数据，都是用实体类来接收返回的，而这其中，甚至有的实体类属性有几十个，但实际需要返回的参数却只需几个，于是就出现了一大长串 null 的情况，简直不能忍！！！ // 原本的返回代码示例，来感受一下这种源自内心的颤抖吧 { "id": 1, "loginId": 123456, "loginName":
后端数据null前端统一显示成空
最新发布
Xiang_Gong_Ya_的博客
06-19 382
【代码】后端数据null前端统一显示成空。
前后端分离SpringBoot项目后端返回给前端JSON格式数据出现null问题解决
eternally_zh128@sina.com的博客
04-27 4253
一、问题描述 很多时候前后端数据交互的时候，后端返回的JSON格式数据，有一些数据库中的值为null，自然返回为null。但是前端很多时候是不太能处理null，这样就需要对null值进行过滤或者赋值 二、解决办法 1.如果值为Null则不返回该条属性。 @JsonInclude(JsonInclude.Include.NON_NULL) private String remark; 2.对null值的属性赋默认值 private List<Long> ids = Lists.newLinked
前端优雅的处理接口返回Json数据中值为null的方案（页面绑值时无需写非空校验，基于TypeScript）
喻志强的博客
12-05 7245
前端优雅的处理接口返回的Josn数据中有null值的情况，再也不用写一堆非空校验了
前端处理后台返回数据为null的值
lzfengquan的博客
07-16 3323
先来看看初始时页面的效果和接口返回的数据 可以明显看到，我们获取到的数据是直接渲染在页面的，但是有时候后台不给我们做处理，那我们前端自己搞。 successCallBack: (successTableRef, res) => { // 拿到后台返回的数组 data值 var records = successTableRef.dataSource; // 这里是方法 你可以直接 res.data.records 也是直接拿的结果 for (var i =
在前端解決顯示null值一例
weixin_30653097的博客
09-30 362
用.netcore2.1api返回的JSON里包含null值，前端直接顯示出來了，影響閱讀， 用以下語句將null轉換為空字符串： // Build html. html += "<tr>"; // Translate...
后端数据返回前端时，不返回null的字段
qq_25844803的博客
07-27 8549
要求 前端调用某接口，返回的是一个pojo，里面有些字段可能为null。null的字段，就不返回给前端了。 比如返回了User，里面只有一个account有值，其他都为null。那么在返回的时候，只返回account即可。 实体类、接口、现在效果、预期效果 实体类 接口 现在效果 预期效果 实现 方式1：application上加配置 只需要在配置文件application上，增加spring.jackson.default-property-inclusion=non_null配置即可。 方式2
后端统一处理接口返回结果字段为null的json
小海米的博客
12-28 715
1、在公司多个项目的研发过程中，很多次遇到移动端反馈某个字段或者数组返回了null导致app崩溃或者闪退的情况，最开始只是约定规范大家把string类型或者数组类型的字段都做下初始化操作，防止返回null导致app用到该字段造成应用异常崩溃的情况，后续经过研究可以统一拦截操作，从而分享下方案2、额外还有在后续对数据库主键使用雪花算法之后long类型返回到前端会存在丢失精度的问题，也是用该方法进行了统一处理，将long类型转为string类型进行返回，防止出现丢失精度的情况。
前后端字段一致 后端取值为null问题解决方案
cqdddgs的博客
03-06 1219
前后端字段一致 后端取值为null问题解决方案
java将图片转为base64返回给前端
08-25
Base64 编码是一种常用的编码方式，能够将二进制数据转换为文本字符串，以便在网络上传输。 Java 图片转换为 Base64 的实现过程 Java 图片转换为 Base64 返回给前端的实现过程可以分为以下几个步骤： 1. 读取图片...
基于ajax后台返回的数据为空前台显示出现undefined的解决方法
12-12
当后台返回的数据中存在空值或者未定义的字段时，如果不做处理，前端页面上可能会出现"undefined"的显示，这显然会影响用户体验。针对这个问题，我们可以采取一系列方法来避免这种情况。以下是一个具体的案例和解决...
解决layui批量传值到后台操作时出现传值为空的问题
10-16
如果仍然遇到值为空的问题，可以检查以下几点： - 确保`layui`的选择器功能正常工作，正确选中了需要操作的行。 - 检查`checkStatus.data`是否正确获取了表格选中行的数据。 - 查看浏览器的开发者工具，特别是网络...
前后端交互，数据库设计，null 值问题
Wen_J_Q的博客
04-17 164
我现在在财务办公室，设置今年的 GDP 增长率或者利润率，可能是正的表示增长，可能是负值亏损，请问我是 0 表示不增不亏，还是用 null 表示还没统计出结果，还是使用 0.8，或者 80，或者 1000 表示翻了10倍呢？我现在在地理科研室，出去跑地理环境，海平面定义 0米，海平面以下是负值，请问我传 null 表示这个地方我还没有设置过海拔，还是传 -1000， 表示马里纳海沟呢？竟然有儍痹，给温度设置默认值，-1000。比如 Geometry，可以表示，点，线，面，多点，多线，多面。
后端查询到数据，前端显示该数据为null
qq_47305937的博客
04-14 2963
出现这个问题的时候，我首先去检查了，前后端以及数据库中的字段名是否匹配。然后考虑是不是前后端缓存的问题，清空前后端缓存之后，前端仍然接收不到数据。我们来看看控制台打印的这个时候form表单里的数据。我们明显的看到，record这个属性在后端是查得到值的。接下来我们来看前端数据。查查我们的mybatis做映射的属性是不是改过来了。数据上来了，家人们~~~，又是被自己蠢哭的一天~xml文件：都报红半天了，你看不见？接下来我们查询订单详情，ID=8的订单。前端没拿到数据，怎么办家人们？接下来，见证奇迹的时刻~
前端null传递到后端变为“null”
weixin_43631820的博客
05-09 8872
前端在获取地址栏中的请求参数时，若没有该参数，会返回null（空对象），再将该参数通过ajax发送到后端时，后端获取到的参数值会变为字符串“null"， 在后端对参数进行判断时要注意这一点 对于传入后端为int 类型的参数，要先在前端处理null，否则传到后端变为“null”无法被转换成int类型，会报错 $("#search").click(function () { var rname = $("#search_content").val();
Java 数据库改了一个字段， 前端传值后端接收为null问题解决
朝花夕拾的博客
08-31 1631
前端传值后端为null的原因可能有很多种，我遇到一个问题是，数据库修改了一个字段，前端传值了，但是后台一直接收为null值，1、字段没有匹配上，数据库字段和前端字段传值不一致。3、get set方法也要改 ，光改值不行？方法名要跟字段值来。2、大小写一定要注意 这个疏忽大意了。以上都改了还是null ~~~~！
vue前端如何接收后端数据
07-28
Vue前端可以通过以下几种方式接收后端数据： 1. 使用Vue的内置方法：可以使用Vue的内置方法（例如`axios`、`fetch`等）发送HTTP请求到后端，然后接收后端返回的数据。这些方法返回的是Promise对象，可以通过`.then()`方法处理返回的数据。 示例代码： ```javascript import axios from 'axios'; axios.get('/api/data') .then(response => { // 处理后端返回的数据 console.log(response.data); }) .catch(error => { console.error(error); }); ``` 2. 使用Vue的生命周期钩子函数：可以在Vue组件的生命周期钩子函数中发送HTTP请求并接收后端返回的数据。常用的生命周期钩子函数有`created`和`mounted`，可以在这些钩子函数中调用后端接口获取数据，并将数据保存在Vue组件的数据中。 示例代码： ```javascript export default { data() { return { responseData: null }; }, created() { axios.get('/api/data') .then(response => { // 将后端返回的数据保存在组件的数据中 this.responseData = response.data; }) .catch(error => { console.error(error); }); } }; ``` 3. 使用Vue的插件或库：还可以使用一些Vue的插件或库来简化数据请求和处理过程，例如`vue-resource`、`vue-axios`等。这些插件或库提供了更方便的API和功能，可以更快速地发送请求和处理返回的数据。 示例代码（使用`vue-axios`）： ```javascript import Vue from 'vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); export default { data() { return { responseData: null }; }, mounted() { this.axios.get('/api/data') .then(response => { // 将后端返回的数据保存在组件的数据中 this.responseData = response.data; }) .catch(error => { console.error(error); }); } }; ``` 以上是几种常见的方式，具体选择哪种方式取决于项目需求和个人偏好。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

private_static

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值