前端属性伪丢失+后端处理注意事项

最新推荐文章于 2024-08-11 15:42:08 发布
最新推荐文章于 2024-08-11 15:42:08 发布
阅读量334 收藏
点赞数
分类专栏： 追载上一篇博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32235259/article/details/105659983
版权
本文揭示了前端使用JSON.stringify方法处理值为undefined的属性时的常见误区，以及后端使用updateById方法更新null值属性时的潜在问题。探讨了解决方案，包括属性值的正确设置和自定义后端更新方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天遇到内容：

1、前端设置属性undenfined后通过JSON.stringify(data);查看，值为undenfined的属性却丢失了，实际此处是JSON.stringify(data);方法的问题，它会将值为undenfined的属性隐藏掉，并不是属性丢失，所以严格说它会导致值为undenfined属性伪丢失，如果为了查看方便，可以将值设置为null，但是不建议设置为空串" "，这样可能会导致传入后台数据被置为空串产生别的问题

2、后台接收传入的值调用 updateById（）第三方原生的方法进行更新处理，发现某些值未被更掉，这是由于它会过滤掉null的属性，可以通过转xml自己写方法更新或者通过字段注解处理

以上为自己遇到的坑，困扰自己良久，就其原理实际是自己对某些东西不熟和忘了updateById（）方法api的解释，希望自己以后更加严谨一点吧！！！

前端、后端、数据库、安全、配置等代码规范
tttzzzqqq2018的博客
10-31 230
【规范】前端、后端、数据库、安全、配置等代码规范
编码规范与后端注意事项
weixin_45834048的博客
11-19 695
关于java编码规范需要注意的内容 阿里编码规范学习 类名以及常量编码命名规则： 1.不允许中文，不能使用拼音缩写（会导致看不懂），不能将英文和中文拼音混合内容 2.代码中的命名均不能以下划线或美元符号开始，也不能以下划线或美元符号结束。 3.类的命名需要采用大驼峰，除外以下情形：DO / BO / DTO / VO / AO / PO 等。 4.方法名、参数名、成员变量、局部变量都统一使用小驼峰。 5.常量命名字母全部需要大写，每个单词间用下划线隔开。 6.包名使用小写，包名使用单数形式，但是类名如果有复
前端提交数据对象属性以_开头导致的数据丢失问题
蓝色的乌鸦的专栏
02-02 1018
前端提交数据对象属性以_开头导致的数据丢失问题,在这里记录一下,避免下次重复遇到 后台:java spring boot框架,json解析用的阿里巴巴的fastjson 前端提交一个属性为_price的值(1.6666666667),同时也有另外一个属性price(2.0),但是提交到后台之后总是接收不到那个1.66666667的那个属性,查阅资料之后发现是fastjson的问题,fastjs
解决uni-app 接口传参传递空值，属性会被自动移除
qq_57477371的博客
03-18 742
在uni-app中，如果接口传参，传递的空值，会被自动移除该属性。stringify 包裹参数。可以看到，空参数被自动移除了。
后端传到前端的数据缺少了一个属性
发光并非太阳的专利，你也可以发光。
11-30 3890
前言 最近小编遇到了一个很奇葩的问题，后台查出来的数据返回到前台后，缺少了一个属性，很奇怪，上网查了很多资料，都没能解决这个问题，结果问了问同事，o(￣︶￣)o才知道原来是自己不小心删除了几句代码。 学东西要学他的原理，来龙去脉都要搞清楚，这样遇到问题很快就能找到原因，下面分享一下到底误删了什么遇到这个问题了。 解决方案 下面是前台接收到的数据和后台反给前台数据对比 前台 ...
后端对象属性返回到前端缺失
weixin_38972910的博客
02-16 2674
参考链接：后端对象属性返回到前端缺失_janet1100的博客-优快云博客 通过postman调用接口，在postman中发现少了一个字段isCollect，而多了一个字段Collect。 该实体类是通过lombook的注解来完成get/set方法 然后我把注解去掉，又生成了get set方法，发现了问题，如下：isCollect的方法不是getIsCollect,和setIsCollect,而是isCollect和setCollect，至此发现了问题，把这两个方法改为正常的get、set方法即
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
09-01
4. **挑战与注意事项** - **浏览器兼容性**：由于依赖HTML5特性，断点续传可能在旧版本或非主流浏览器中不支持。 - **错误处理**：需要处理网络中断、文件丢失等情况，确保在恢复上传时能够正确处理。 - **安全性...
java web(后端＋前端) 学习路线记录（代码＋总结）---1.JavaSE（完成）
qq_46319647的博客
01-10 1991
自学Java web记录（更新中）
盲盒源码H5+APP+小程序开发搭建前端uniapp后端php
xuyoudad的博客
08-11 1420
除了传统的实体盲盒外，现在还出现了许多基于互联网和区块链技术的虚拟盲盒应用，这些应用通过盲盒源码实现更加公平、高效和有趣的交易方式，吸引了大量用户的参与。盲盒游戏/应用是一种基于随机性和收集性的游戏/应用形式，玩家通过购买或开启盲盒，随机获得游戏/应用内的物品、道具或奖品。这些盲盒通常分为不同的等级或稀有度，玩家通过收集更多的盲盒来获得更稀有的物品，从而增加游戏的趣味性和挑战性。数据库管理：对于需要保存用户数据、交易记录、奖品信息等的应用，盲盒源码还需要包括数据库管理部分，用于数据的存储、检索和维护。
SpringBoot + WebService + CXF 返回值Json 字符串 实体类属性为null时，属性丢失？
丛林雪狼code的博客
10-29 736
最近在写 webService 接口，由于长时间没写过词类接口了 就把之前的知识忘掉了 结果可想而知 一顿操作猛如虎.......实际上是个小白鼠 上篇文章写到 SpingBoot 开发 webService 接口SpringBoot 项目中开发 webService+CXF接口_丛林雪狼code的博客-优快云博客项目架构：SpringBoot+Orcal前景： SpringBoot 项目中 对外公布接口，故采用 WebService ，在论坛上看了许多的代码示例，大体是分为以下几步： 1）引入j...
揭秘前端精度丢失之谜！！！
林老师带你学编程
03-22 909
今天测试突然跟我说页面显示的数值和数据库的对应不上，一开始我以为是程序问题，把数据给修改了，但是后面检查程序发现，没有任务问题，用postman请求，发现数据也和数据库的一致。但是页面上面显示的就是不一样。 问题追踪 一开始我怀疑是前端转型把精度丢失，前端那边直接是通过Number接收的，没有任何转型操作。后来我怀疑可能是因为服务器是Long类型，前端是Number类型，可能是精度对应不上，后...
返回给前端数据包，字段为空不显示问题
weixin_45102029的博客
11-04 2992
返回给前端数据包，字段为空不显示问题
spring-boot 如何处理前端表单传过来的undifined null没有按类型传参
qq_26889291的博客
04-16 906
值以及未按预期类型传递的参数，确保数据的正确性和业务流程的正常执行。同时，前端与后端之间的错误信息交流有助于提升用户体验和调试效率。，或者未能按照预期的类型传递参数的情况。在Spring Boot应用中处理前端表单提交的数据时，可能会遇到前端传入的数据值为。通过上述措施，Spring Boot应用能够有效地应对前端表单传来的。
（SSM）数据库查询正常，但是后端返会NULL，导致前端无法正常显示数据
weixin_45124507的博客
05-22 2514
（SSM）数据库查询正常，但是后端返会NULL，导致前端无法正常显示数据 我的数据库字段名如下： 对应的实体类的属性名如下： 用数据库直接查询表数据返会数据正常，用mybatis查询正常。但是将数据放到后端与实体类对应，并显示在前端时，发现错误，只获取到了gender的值，其余值全为null； 后来发现原来是因为实体类属性名和数据库表的字段名不一致，导致不能一一对应。（gender属性和数据库字段名一致，故获取正常。） 解决方法有以下几种： 一 、修改实体类的字段名，使之与数据库表的字段名一致。 二、m
后端返回的数据中含有Null的则不在前端展示
宁好的博客
04-18 686
方式 1：application 上加配置只需要在配置文件 上，增加 如下配置。：方式 1 其实有一定的局限性。如果项目里继承了 WebMvcConfigurationSupport，那么方式 1 配置就失效了。
向前端数据返回null值忽略(亲测）
yunxuantu的博客
06-15 513
前提：采用SpringBoot框架。在yml配置文件添加下面配置即可。 spring: jackson: default-property-inclusion: non_null
开发技术-返回前端字段为空的解决方法
JustDI0209的博客
09-30 1729
1.需求：Java后端返给vue前端一个实体类，当实体类中的字段值为null时，该字段不返回，导致前端取值时报undefined错误。 2.方法：利用反射，获取实体类中的属性名，判断属性值，为null时，利用set方法赋值为空字符串“”，代码如下： private Pojo getcheckMapValue(Pojo model) throws Exception { Field[] field = model.getClass().getDeclaredFields(); // 遍
springMVC返回参数，丢失为null字段
weixin_39579817的博客
06-19 1053
##java springMVC返回参数，丢失为null字段 原因：mvc序列化返回json参数时，默认NON_NULL。 解决方案： @JsonSerialize(include=JsonSerialize.Inclusion.ALWAYS) 但是include=JsonSerialize.Inclusion.ALWAYS 已经过时了，可以使用@JsonInclude()。 @JsonInclude默认值为ALWAYS（总是显示） 当然也可以基于全局对设置json序列化方式，根据自身需求选择吧 ...
前端如何预览通过后端接口请求到的word文档
最新发布
03-19
<think>嗯，用户问的是前端如何预览通过后端接口请求到的Word文档。这个问题看起来挺常见的，因为现在很多系统都需要在线预览文档，而Word文档又是最常用的格式之一。首先，我得想想有哪些方法可以实现这个功能。 用户可能的情况是，他们有一个后端接口，可以获取到Word文档的数据，现在需要在前端展示出来，而不需要用户下载到本地再用Word打开。这可能涉及到如何将二进制数据或者文件流转换成前端可以渲染的格式。 首先，我需要考虑前端直接渲染Word文档的可能性。不过，浏览器本身不支持直接渲染.doc或.docx文件，所以可能需要转换格式。常见的做法是将Word转换为PDF或者HTML，这样浏览器就能展示了。 接下来，用户提到的后端接口返回的数据类型。如果后端返回的是文件流，前端可能需要用Blob对象来处理，生成一个可访问的URL。比如，使用URL.createObjectURL来创建临时链接，然后通过iframe或者a标签来打开。不过这样可能只是触发下载，而不是预览，所以需要进一步处理。 然后，第三方库的选择。比如，使用docx-preview这个库，它可以在浏览器端将.docx文件渲染成HTML。这可能是一个比较方便的解决方案，但需要注意它是否支持.doc格式，因为有些库可能只支持.docx。另外，还有Mammoth.js，它可以将Word转成HTML，可能样式上需要调整。 另外，转换为PDF也是一个常见的方法。后端可以将Word转成PDF，然后前端使用PDF.js来渲染。这样做的优点是PDF的预览比较通用，但需要后端的配合进行转换。如果后端不能处理转换，可能需要前端自己处理，但这样可能不太现实，因为转换工作可能较重。 还有，使用微软的Office Online服务，也就是在iframe中嵌入Office的在线预览功能。不过这可能涉及到网络问题，以及需要文档是公开可访问的URL，或者需要配置权限，可能在国内访问速度不理想。 用户可能需要分步骤的解决方案，比如先尝试使用docx-preview库，或者让后端返回PDF格式。另外，需要注意跨域问题和文件类型是否正确处理，比如确保响应头中的Content-Type正确，以及可能的CORS配置。 还有，是否需要支持旧版的.doc格式，因为很多现代库可能主要支持.docx。如果用户需要支持.doc，可能需要后端先转换成docx或者PDF，或者使用其他工具。 另外，安全性也是一个考虑点，直接在前端处理用户上传的Word文件可能存在风险，需要确保文件的安全性。但如果是内部系统，可能问题不大。 总结下来，可能的步骤是：1. 从后端获取文件流；2. 转换为Blob；3. 使用第三方库渲染成HTML，或者转换为PDF后使用PDF.js；4. 或者使用微软的在线预览。需要根据具体情况选择合适的方法，比如后端是否能转换格式，是否需要支持旧格式，以及前端库的大小和兼容性。</think>实现前端预览Word文档的核心思路是将文档内容转换为浏览器支持的格式（如HTML/PDF）。以下是分步骤解决方案： 一、基础方案（直接下载+浏览器插件） 1. 获取文件流 ```javascript axios.get('/api/getWord', { responseType: 'blob' }).then(res => { const blob = new Blob([res.data], { type: 'application/msword' }) const fileURL = URL.createObjectURL(blob) // 方案1：直接触发下载 const a = document.createElement('a') a.href = fileURL a.download = 'document.doc' a.click() // 方案2：使用iframe预览（需本地安装Office插件） const iframe = document.createElement('iframe') iframe.src = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileURL)}` document.body.appendChild(iframe) }) ``` 二、推荐方案（使用专业转换库） 1. 安装依赖 ```bash npm install docx-preview mammoth.js ``` 2. 实现.docx预览 ```javascript import { renderAsync } from 'docx-preview' async function previewDocx(blob) { const container = document.getElementById('preview-container') await renderAsync(blob, container) } ``` 3. 实现.doc兼容方案（旧格式） ```javascript import mammoth from 'mammoth.js' async function previewDoc(blob) { const arrayBuffer = await blob.arrayBuffer() const { value } = await mammoth.convertToHtml({ arrayBuffer }) document.getElementById('preview').innerHTML = value } ``` 三、进阶方案（PDF转换预览） 1. 后端配合返回PDF流 ```javascript axios.get('/api/getWordPdf').then(res => { const pdfBlob = new Blob([res.data], { type: 'application/pdf' }) const pdfUrl = URL.createObjectURL(pdfBlob) // 使用PDF.js渲染 const loadingTask = pdfjsLib.getDocument(pdfUrl) loadingTask.promise.then(pdf => { pdf.getPage(1).then(page => { const canvas = document.createElement('canvas') const context = canvas.getContext('2d') // 渲染逻辑... }) }) }) ``` 四、企业级方案（Office Online集成） ```javascript <iframe src={`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileURL)}`} width="100%" height="600px" frameborder="0" ></iframe> ``` 注意事项： 1. 跨域问题：确保服务器配置CORS 2. 文件大小：超过10MB建议分片加载 3. 安全策略：验证文件来源，防止XSS攻击 4. 格式兼容性：优先使用.docx格式 5. 移动端适配：触摸事件处理 各方案对比： | 方案 | 优点 | 缺点 | |----------------|-----------------------|-------------------------| | 直接下载 | 实现简单 | 依赖本地软件 | | docx-preview | 纯前端实现，样式保留好 | 仅支持.docx格式 | | Mammoth | 支持旧格式 | 样式丢失较多 | | PDF转换 | 跨平台一致性高 | 需要后端配合转换 | | Office Online | 完美兼容所有格式 | 需要公网访问，有网络延迟 | 推荐组合方案： 1. 优先尝试docx-preview渲染.docx 2. 旧版.doc文件使用Mammoth转换 3. 超大文件采用PDF分页加载 4. 关键文档提供Office Online备用方案 性能优化建议： 1. 添加加载进度指示 2. 实现缓存机制（localStorage） 3. 使用Web Worker处理文件解析 4. 实现文档目录导航 5. 添加文本选择/搜索功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值