thymeleaf中switch case多出一个空行
以下是《thymeleaf3.0.5中文参考手册.pdf》中的代码,官方代码没有具体去查询。
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
</div>
这样最终生成代码总会多出一个div。例如
<div>
<p>User is an administrator</p>
</div>
以下是笔者的代码。
user实体绑定实体ApiUserDto相关字段如下
@Data
public class ApiUserDto extends ApiUser {
private String certStatusLabel;
} @Data
public class ApiUser{
/***
* 审核状态 0 un certified //未认证(默认)
* 1 unaudited //待审核
* 2 certified //已认证
*/
private Integer certStatus;
}
<div th:switch="${user.certStatus}">
<div th:case="0" th:text="未认证" class="I124_name pageChange" data-page="/approve/index"></div>
<div th:case="1" th:text="待审核" class="I124_name pageChange" data-th-data-page="${user.type=='personal'?'/approve/personal':'/approve/company'}"></div>
<div th:case="2" th:text="已认证" class="I124_name pageChange" data-th-data-page="${user.type=='personal'?'/approve/personal':'/approve/company'}"></div>
</div>
生成效果
显然在以下情况下,那个class并没有 最外层div,样式效果有可能就有变化了。走样?
解决方法1:
在sql语句层面额外生成一个属性certStatusLabel绑定到ApiUserDto,其他属性在页面上使用SpringEL表达式判断
select
case cert_status
WHEN 0 THEN '未认证'
WHEN 1 THEN '待审核'
WHEN 2 THEN '已认证'
END certStatusLabel,
count(n.id) notificationCount,
count(u.id) appCount,
IFNULL(u.avatar_url,'head_portrait2.png') avatar_url,
u.*
from api_user u left JOIN api_notification n
on n.user_id = u.id
LEFT JOIN api_app a on a.user_id = u.id
where u.login_name = #{loginName} and u.`password` = #{encryptedPassword}
笔者前端代码变成以下类似形式:
<div th:text="${user.certStatusLabel}" class="I124_name pageChange" data-th-data-page="${user.certStatus==0?'/approve/index':(user.certStatus==1)}"></div>
最终生成代码:
弊端:此种情况维护的时候需要修改sql语句重启web服务器
完美解决方法:
使用th:block
<th:block th:switch="${user.certStatus}">
<div th:case="0" th:text="未认证" class="I124_name pageChange" data-page="/approve/index"></div>
<div th:case="1" th:text="待审核" class="I124_name pageChange" data-th-data-page="${user.type=='personal'?'/approve/personal':'/approve/company'}"></div>
<div th:case="2" th:text="已认证" class="I124_name pageChange" data-th-data-page="${user.type=='personal'?'/approve/personal':'/approve/company'}"></div>
</th:block>
最终生成代码:
弊端:生成代码上下文有空行,当然可以那几个case放到同一样,不过不方便维护,对于强迫症患者,来说比较致命。
如果你知道怎么把空行去除了,欢迎留言,笔者也是一个强迫症患者:)。
参考来源:
https://stackoverflow.com/questions/29657648/thymleaf-switch-statement-with-multiple-case
thymeleaf中switch case多出一个空行的更多相关文章
- Javascript 中 switch case 等于 (== )还是 恒等于(===)?
Javascript 中 switch case 等于 (== )还是 恒等于(===)? 可以测试一下以下代码,这个 case 中是 等于(==)还是恒等于(===) <script> ...
- asp.net ashx处理程序中switch case的替代方案总结
目录 1.用委托字典代替switch...case; 2.利用反射替代switch...case: 3.比较两种方案 4.其他方案 4.说明 5.参考 在开发 asp.net 项目中,通常使用一般处理 ...
- python中Switch/Case实现
学习Python过程中,发现没有switch-case,过去写C习惯用Switch/Case语句,官方文档说通过if-elif实现.所以不妨自己来实现Switch/Case功能. 方法一 通过字典实现 ...
- Python里如何实现C中switch...case的功能
python没有switch case 不过可以通过建立字典实现类似的功能 例子:根据输入的年月日,判断是该年中的第几天 y = int(input('请输入年:')) m = int(input(' ...
- C# 中Switch case 返回不止用break
Switch(temp) { case "A": //跳出循环 break; case "B": //返回值 return var; case "C& ...
- js中switch/case分支的值可以是变量或表达式
在一些高级语言如C#中,switch分支的值只能是常量,而js中可以是变量或表达式: <!DOCTYPE html> <html lang="en"> &l ...
- sql中关于case when的一个例子
SELECT rownum R, a.expert_id as USERID, a.expert_id as TYPE, b.type_desc as TYPE_DESC, a.sex as SEX, ...
- Android中在activity中弹出一个popwindow
//-----在onCreate方法--中------创建popwindow布局 --pop_item-------------------------- View view=Lay ...
- Java switch case和数组
Java switch case 语句 switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch case 语句格式: switch(express ...
随机推荐
- python 根据两个字段排序, 一个升序, 一个降序
from collections import Counter c = Counter(input()) l=sorted(c.items(), key=lambda s:(-s[], s[])) ] ...
- THINKPHP SQL注入处理方式
//注入的产生一般都是对用户输入的参数未做任何处理直接对条件和语句进行拼装. //不安全的写法举例1 $_GET['id']=8;//希望得到的是正整数 $data=M('Member')->w ...
- vue2 自定义键盘事件
- 洛谷 P2119 魔法阵 题解
Analysis 这道题也是考试题,我也依然打了个n三次方暴力.正解是先枚举差,再枚举c和d,a和b用乘法原理优化,这样就能大大减少时间. #include<iostream> #incl ...
- webservice企业开发实例
1. 2. 3.环境变量的配置 4.创建动态web工程-->版本2.5-->tomcat7.0 第一步:创建cxf项目 第二步:添加cxf的jar包 全部将jar包拷入lib目录下 第三步 ...
- vue报错 :NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
解决的几种办法 https://blog.csdn.net/weixin_43202608/article/details/98884620 这个适合所有vue的UI框架 在main.js下添加一下代 ...
- uoj #139
树链剖分//模板题由于存在换根操作对所有关于节点 u 的修改和查询操作进行分类讨论若 Root 在 u 的子树中,则不处理 u 所在的 Root 的那颗子树否则不会有影响寻找 Root 所在的那颗子树 ...
- leetcode 198 动态规划
题目意思是:给一组数组,要使选取的子数组和(不用连续)最大,但不能同时选取相邻. 我的思路: 对于a[i]来说,要么选取,要么不选取.假设选取a[i],那么肯定不能选取a[i-1],只能看前0~i-2 ...
- mac 登陆phpmyadmin 提示 mysqli_real_connect(): (HY000/2002): No such file or directory
我们将下载的phpmyadmin 放在apache目录中,进入phpmyadmin目录, 首先将这个目录中的配置文件改名 sudo mv config.sample.inc.php config.in ...
- JS-七大查找算法
顺序查找 二分查找 插值查找 斐波那契查找 树表查找 分块查找 哈希查找 查找定义:根据给定的某个值,在查找表中确定一个其关键字等于给定值的数据元素(或记录).查找算法分类:1)静态查找和动态查找:注 ...