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

news2024/11/17 5:55:49

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.coloradmin.cn/o/1574803.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分类预测 | Matlab实现DRN深度残差网络数据分类预测

分类预测 | Matlab实现DRN深度残差网络数据分类预测 目录 分类预测 | Matlab实现DRN深度残差网络数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现DRN深度残差网络数据分类预测(完整源码和数据),运行环境为Matl…

usb_camera传输视频流编码的问题记录!

前言: 大家好,今天给大家分享的内容是,一个vip课程付费的朋友,在学习过程中遇到了一个usb采集的视频数据流,经过ffmpeg编码,出现了问题: 问题分析: 其实这个问题不难,关键…

wordpress子比主题打开文章详情页一直出现在首页的问题

遇到过几次这种情况了,不知是不是中了木马,无从下手,试了很多方法都不行快要疯了,之前试过解决不了只能重新安装,现在又出现了,第二次了,太麻烦了,突然无意中打开index.php文件发现被…

Android与RN远程过程调用的原理

Android与RN远程过程调用的原理是通过通信协议进行远程过程调用。RPC(Remote Procedure Call)是分布式系统常见的一种通信方式,从跨进程到跨物理机已经有几十年历史。 在React Native中,通信机制是一个C实现的桥,打通了Java和JS,实现了两者的…

数据被halo勒索病毒锁定?这里有恢复秘笈!

在当今数字化的社会,数据的重要性不言而喻。然而,随着网络技术的发展,数据安全问题也日益凸显。近年来,勒索病毒成为网络安全的一大威胁,其中halo勒索病毒更是让人闻风丧胆。一旦数据被这种病毒锁定,用户将…

42. 接雨水(Java)

目录 题目描述:输入:输出:代码实现: 题目描述: 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。 输入: height [0,1,0,2,1,0,1,3,2,1,2,1]输出&#xff1…

SpringCloud学习(11)-SpringCloudAlibaba-Nacos数据模型

一、Nacos数据模型 1.1、数据模型 对于Nacos配置管理,通过Namespace、Group、Date ID能够定位到一个配置集。Nacos数据模型如下所示: 1.2、命名空间(Namespace) 可用于进行不同环境的配置隔离。例如: 1)、可以隔离开发环境——测试环境和…

数据可视化高级技术Echarts(快速上手柱状图进阶操作)

目录 1.Echarts的配置 2.程序的编码 3.柱状图的实现(入门实现) 相关属性介绍(进阶): 1.标记最大值/最小值 2.标记平均值 3.柱的宽度 4. 横向柱状图 5.colorBy series系列(需要构造多组数据才能实现…

基于java实现的二手车交易网站

开发语言:Java 框架:ssm 技术:JSP JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7(一定要) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea…

C++初级----string类(STL)

1、标准库中的string 1.1、sring介绍 字符串是表示字符序列的类,标准的字符串类提供了对此类对象的支,其接口类似于标准字符容器的接口,但是添加了专门用于操作的单字节字符字符串的设计特性。 string类是使用char,即作为他的字符…

蓝桥杯 【日期统计】【01串的熵】

日期统计 第一遍写的时候会错了题目的意思,我以为是一定要八个整数连在一起构成正确日期,后面发现逻辑明明没有问题但是答案怎么都是错的才发现理解错了题目的意思,题目的意思是按下标顺序组成,意思就是可以不连续,我…

vue快速入门(八)绑定方法

注释很详细&#xff0c;直接上代码 上一篇 新增内容 v-if与button响应回顾事件方法写法 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …

《QT实用小工具·十七》密钥生成工具

1、概述 源码放在文章末尾 该项目主要用于生成密钥&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #pragma execution_character_set("utf-8")#include "frmmain.h" #include "ui_frmmain.h" #include "qmessag…

Spring Boot 学习(1)——环境搭建

一只老辣鸟的自我救赎 不科普&#xff0c;简单记录学习过程。 开发环境约束&#xff1a; jdk1.8 Spring Boot 1.5.9 Spring 4.3.13 Maven 3.3.3 Intellij IDEA 2017 【脑瓜灵光的开发环境随意&#xff0c;不灵光尽量按上述约束设置。看了好些教程总…

使用vue开发的前后台框架推荐

对于Vue后台前台框架&#xff0c;以下是几个值得推荐的选项&#xff1a; Element UI&#xff1a;一个基于Vue.js的桌面端组件库&#xff0c;提供了丰富的UI组件和交互方式&#xff0c;非常适合构建后台管理系统。 Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.…

蓝桥杯第十三届省赛C++B组(未完)

目录 刷题统计 修剪灌木 X进制减法 【前缀和双指针】统计子矩阵 【DP】积木画 【图DFS】扫雷 李白打酒加强版 DFS (通过64%&#xff0c;ACwing 3/11&#xff09;; DFS(AC) DP&#xff08;AC&#xff09; 砍竹子(X) 刷题统计 题目描述 小明决定从下周一开始努力刷题准…

springboot之RESTful接口与Swagger

一、RESTful GET获取资源、POST新建资源、PUT更新资源、DELETE删除资源。 RESTful两大特性 1、安全性&#xff1a;GET请求不会引起资源本身改变。 2、幂等性&#xff1a;对一个接口请求和多次请求返回的资源应该一致。 2xx&#xff1a;成功 4xx&#xff1a;客户端错误。 …

Spring Boot集成JWT快速入门demo

1.JWT是什么&#xff1f; JWT&#xff0c;英文全称JSON Web Token&#xff1a;JSON网络令牌。为了在网络应用环境间传递声明而制定的一种基于JSON的开放标准(RFC 7519)。这个规范允许我们使用JWT在客户端和服务端之间传递安全可靠的信息。JWT是一个轻便的安全跨平台传输格式&am…

学习天机04(优惠劵)

1.使用Redis和Mq优化领取优惠卷的高并发操作 实现思路&#xff1a; 因为领取优惠券的操作&#xff0c;涉及到操作db的操作很多&#xff0c;比如说查询优惠卷&#xff0c;统计已经领取的数量&#xff0c;更新已经发放的数量和新增用户券。所以了防止在高并发的情况下对我们的数…

【Java+Springboot】------ 通过JDBC+GetMapping方法进行数据select查询、多种方式传参、最简单的基本示例!

一、JDBC如何使用、PostGresql数据库 1、在pom.xml 先引用jdbc组件。 <!--jdbc--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency> 2、在pom.xml 再引用p…