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 ...
随机推荐
- Composer的安装以及替换为国内镜像
Composer的安装以及使用国内镜像 Composer 学习网址 Composer官网 https://getcomposer.org/ Composer中文网 http://www.phpcomp ...
- CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号
大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...
- VMWare虚拟机中网络连接类型对比
1.NAT NAT:Network Address Translation,网络地址转换:虚拟机的网卡连接到宿主的 VMnet8 上 虚拟机与主机的关系:只能单向访问,虚拟机可以通过网络访问到主机,主 ...
- vue:概要
一.环境 #安装nodejs-官网安装包配置环境变量 node -v #安装webpack npm install webpack -g #安装vue-cli npm install vue-cli ...
- 45 | 自增id用完怎么办?
MySQL 里有很多自增的 id,每个自增 id 都是定义了初始值,然后不停地往上加步长.虽然自然数是没有上限的,但是在计算机里,只要定义了表示这个数的字节长度,那它就有上限.比如,无符号整型 (un ...
- The 2019 ICPC China Nanchang National Invitational and International Silk-Road Programming Contest
目录 Contest Info Solutions A. Attack B. Polynomial E. Interesting Trip F. Sequence G. Winner H. Anoth ...
- Angular2日期格式化
一:组件日期格式化: ts中调用: import {DatePipe} from "@angular/common"; @Component({ providers: [D ...
- python 时间等待
#coding=utf- import time t1=time.time() time.sleep() t2=time.time() print(t2-t1) 输出 3.00304102898
- Eclipse中Git的操作
一.工程初始化为本地库 工程→右键→Team→Share Project→Git 点击Finish即可 二.Eclipse 中忽略不必追踪控制的文件 列如: .classpath 文件 .projec ...
- Bean Shell常用内置变量
JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:写入信息到jmeber.log文件,使用方法:log.info( ...