bootstrap+thymeleaf 页面多选回显时莫名其妙多了

bootstrap+thymeleaf 页面多选回显时莫名其妙多了

  • 问题现象
  • 问题分析
  • 问题处理
  • 总结

问题现象

今天遇到的问题的描述正如标题中的一样,就是后台管理系统在配置完内容后点击保存,回显时发现页面竟然莫名其妙多了一些数据。项目整体后台管理系统采用的是bootstrap+thymeleaf页面,这里首先复现一下问题效果
在这里插入图片描述
图1
在这里插入图片描述
图2
对比两个图不难看出,图2比图1多了一个套餐名称【书课包】,那么查看数据发现图1中对应的套餐id为【36,38,295】,而图2中回显的套餐id为【36,38,95,295】,那么问题来了,为什么选择了三个,而回显时却回显了四个呢?

问题分析

首先查看页面回显代码,根据页面分析来看,由于是字符串的contains比较,那么当逐个比较 “36” “38” “95” "295"时就能匹配上,因此页面会多余显示了95对应的套餐名称
在这里插入图片描述
那么既然问题分析明白了,我们就可以对当前遇到的问题进行处理了。
thymeleaf官方文档地址如下:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html,有需要的可以参考。下面开始处理当前遇到的问题。

问题处理

既然使用字符串的contains包含判断会出现误判的情况,那么我们可以采用list集合判断包含的形式,避免字符串判断出现误判的情况。首先需要将set.classIds转化成list集合,语法格式如下

${#strings.listSplit(namesStr,',')} 

在这里插入图片描述
然后再通过list集合判断包含的形式,语法格式如下

${#lists.contains(list, element)}

在这里插入图片描述
那么最后整合之后的thymeleaf页面代码如下

${#lists.contains(#strings.listSplit(set.classIds,','),item.classId+'')}

将修改后的页面代码放在页面,刷新项目后查看效果
在这里插入图片描述
在这里插入图片描述
这里可以很明显的看到回显的内容是正确的。但是这里其实还有一个问题,就是套餐不是非必填的,当套餐没有选择时页面效果是这样的
在这里插入图片描述
后台控制台打印日志如下
在这里插入图片描述
那么这个问题其实也好处理,在进行字符串转list之前需要进行字符串非空的判断,通过thymeleaf的if else判断,当字符串 set.classIds 为空时,不进行 #strings.listSplit(set.classIds,‘,’) 的转换,当 set.classIds 不为空时,再进行 #strings.listSplit(set.classIds,‘,’) 的转换,那么改造后的代码如下
在这里插入图片描述
改造之后再次刷新页面之后就可以看到没有问题了
在这里插入图片描述
到这里整个今天遇到的问题也就解决了,对于thymeleaf页面回显时,字段空的判断以及list集合空的判断一定不能少,少的话页面往往就会出现500报错无法展示的情况,需要注意。

总结

本次遇到的thymeleaf页面回显的问题其实算比较常见的,毕竟后台管理系统多选回显还是会经常遇到的,稍有不注意可能就会出现这样的情况。当然如果你使用的是 ${set.classIds?.contains(item.classId+‘’)} 也不一定会出现问题,因为这个问题必须等数据积累到一定程度了才会出现,比如这次我遇到的情况 【36,38,295】【36,38,95,295】,因此最好的处理办法就是遇到这类多选回显的问题,直接采用我现在使用的方案,防止以后数据积累出现这样莫名其妙的情况时而不能及时察觉,导致系统数据出现一些莫名其妙的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/298993.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

回归预测 | Matlab基于CPO-GPR基于冠豪猪算法优化高斯过程回归的多输入单输出回归预测

回归预测 | Matlab基于CPO-GPR基于冠豪猪算法优化高斯过程回归的多输入单输出回归预测 目录 回归预测 | Matlab基于CPO-GPR基于冠豪猪算法优化高斯过程回归的多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab基于CPO-GPR基于冠豪猪算法优化高斯…

【Consul】基于Golang实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制

【Consul】基于Go实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制 大家好 我是寸铁👊 总结了一篇【Consul】基于Go实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制✨ 这应该是目前全网最全的使用golang手…

Git命令(1)[删除,恢复与移动]

文章目录 1.删除文件1.1命令----rm <filename>1.2命令----git rm <filename>1.1命令----git rm <filename> -f 2.恢复文件2.1命令----git restore <filename>2.1命令----git restore --staged <filename> 3.重命名文件3.1命令----mv 旧文件 新文…

Node.js------Express

◆ 能够使用 express.static( ) 快速托管静态资源◆ 能够使用 express 路由精简项目结构◆ 能够使用常见的 express 中间件◆ 能够使用 express 创建API接口◆ 能够在 express 中启用cors跨域资源共享 一.初识Express 1.Express 简介 官方给出的概念&#xff1a;Express 是基…

CSS - 你实现过0.5px的线吗

难度级别:中级及以上 提问概率:75% 我们知道在网页显示或是网页打印中,像素已经是最小单位了,但在很多时候,即便是最小的1像素,精度却不足以呈现所需的线条精度和细节。因此,为了在网页显示和网页打印中呈现更加细致的线条,为了在视觉…

带你了解自动驾驶中的功能安全

谈一谈自动驾驶中的功能安全 附赠自动驾驶学习资料和量产经验&#xff1a;链接 一 概述 汽车涉及到人的生命财产安全&#xff0c;谈汽车首先要谈的就是安全。目前自动驾驶的安全主要分为三大块&#xff1a;功能安全&#xff0c;网络&#xff08;信息&#xff09;安全&#xf…

【LeetCode】--- 动态规划 集训(二)

目录 一、63. 不同路径 II1.1 题目解析1.2 状态转移方程1.3 解题代码 二、931. 下降路径最小和2.1 题目解析2.2 状态转移方程2.3 解题代码三、174. 地下城游戏3.1 题目解析3.2 状态转移方程3.3 解题代码 一、63. 不同路径 II 题目地址&#xff1a; 不同路径 II 一个机器人位于…

腾讯云(CVM)托管进行权限维持

前言 刚好看到一个师傅分享了一个阿里云ECS实战攻防&#xff0c;然后想到了同样利用腾讯云CVM的托管亦可实现在实战攻防中的权限维持。 简介 腾讯云自动化助手&#xff08;TencentCloud Automation Tools&#xff0c;TAT&#xff09;是一个原生运维部署工具&#xff0c;它可…

“Linux 三剑客”,通常指的是三个经典的命令行工具:grep、sed 和 awk

1、grep&#xff1a; 简介&#xff1a;grep 是一个强大的文本搜索工具&#xff0c;可以用于在文件中查找匹配特定模式的行。示例&#xff1a; 搜索包含特定关键词的行&#xff1a; grep "keyword" filename 递归搜索目录下所有文件&#xff1a; grep -r define zj…

java面试题(Redis)

事情干的差不多了&#xff0c;开刷面试题和算法&#xff0c;争取在短时间内快速成长&#xff0c;理解java面试的常见题型 一、redis使用场景&#xff1a; 缓存&#xff1a;穿透、击穿、雪崩 双写一致、持久化 数据过期、淘汰策略 分布式锁&#xff1a;setnx、redisson 计数…

Flutter Boost 3

社区的 issue 没有收敛的趋势。 设计过于复杂&#xff0c;概念太多。这让一个新手看 FlutterBoost 的代码很吃力。 这些问题促使我们重新梳理设计&#xff0c;为了彻底解决这些顽固的问题&#xff0c;我们做一次大升级&#xff0c;我们把这次升级命名为 FlutterBoost 3.0&am…

Redis -- 缓存穿透问题解决思路

缓存穿透 &#xff1a;缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库。 常见的解决方案有两种&#xff1a; 缓存空对象 优点&#xff1a;实现简单&#xff0c;维护方便 缺点&#xff1a; 额外…

讲讲你对数据结构-线性表了解多少?

线性表 - 数组和矩阵 当谈到线性表时&#xff0c;数组和矩阵是两种常见的数据结构。 数组&#xff08;Array&#xff09;&#xff1a; 数组是有序的元素集合&#xff0c;可以通过索引来访问和操作其中的元素。它是最简单、最基本的数据结构之一。数组的特点包括&#xff1a; …

paddlepaddle模型转换onnx指导文档

一、检查本机cuda版本 1、右键找到invdia控制面板 2、找到系统信息 3、点开“组件”选项卡&#xff0c; 可以看到cuda版本&#xff0c;我们这里是cuda11.7 cuda驱动版本为516.94 二、安装paddlepaddle环境 1、获取pip安装命令 &#xff0c;我们到paddlepaddle官网&#xff…

2012年认证杯SPSSPRO杯数学建模C题(第二阶段)碎片化趋势下的奥运会商业模式全过程文档及程序

2012年认证杯SPSSPRO杯数学建模 C题 碎片化趋势下的奥运会商业模式 原题再现&#xff1a; 从 1984 年的美国洛杉矶奥运会开始&#xff0c;奥运会就不在成为一个“非卖品”&#xff0c;它在向观众诠释更高更快更强的体育精神的同时&#xff0c;也在攫取着巨大的商业价值&#…

idea2023.2.1 java项目-web项目创建-servlet类得创建

如何创建Java项目 1.1 方式1&#xff1a; 1.2 方式&#xff1a; 1.3 方式 如何创建web项目 方式 ----- 推荐 如何创建servlet类 复制6 中得代码 给servlet 配置一个路径 启动tomcat 成功了

【星海随笔】Ubuntu22.04忘记密码

服务器篇&#xff1a; 有问题可留言。 第一步 远程console界面进入该设备 并重启该设备 如果看到这个界面情况 则点击右上角按钮 【发送 CtrlAltDelete】 调出grub启动菜单 NOTE&#xff1a;启动的后半段去点击这个按钮&#xff0c;前半段一直点会一直重启 如果是直连服务器&a…

Linux-4 gcc和makefile

Linux编译器-gcc/g使用 1.设计样例 c语言&#xff1a;linux中用的stdc99版本--可能会出现其他问题 c&#xff1a;Linux中用的stdc11--使用c11版本 Linux没有文件格式的区分&#xff0c;但是编译器区分 gcc编译器的文件格式是filename.c g编译器的文件格式是filename.cc或者fil…

docker的安装及入门指令

目录 一、将docker安装到云服务器步骤 1.更新系统yum版本 2.安装所需依赖 3.添加docker仓库设置(使用的是阿里云) 4.安装docker引擎 5.启动docker并开启自动启动 6. 检查是否安装成功&#xff0c;成功会显示相应版本&#xff0c;否则安装失败 二、docker常用命令 1.从…

Javascript/Node.JS中如何用多种方式避免属性为空(cannot read property of undefined ERROR)

>>>>>>问题 "cannot read property of undefined" 是一个常见的 JavaScript 错误&#xff0c;包含我在内很多人都会遇到&#xff0c;表示你试图访问一个未定义&#xff08;undefined&#xff09;对象的属性。这通常是因为你在访问一个不存在的对象…