【工作笔记-20211209】Thymeleaf语法的一些学习

前言

• 新的项目采用了SpringBoot+Thymleaf来搭建，这是一个网络上的开源项目：https://gitee.com/bdj/SpringBoot_v2。
• 由于之前对于Thymeleaf的使用不多，这里稍微记录一些Thymeleaf的语法

---

一、关于<select>下拉框的返显

后台代码

@GetMapping("/editHtml/{id}")
public String editHtml(@PathVariable("id")String id, ModelMap map) {
	map.put("object", object); // 一个实体类（由service查询出来，这里省略了）
	map.put("list", list);// 下拉栏的选项集合
	return prefix + "/edit";
}

HTML代码

<form class="layui-form" action="" th:object="${object}">
	<select name="xx" >
		<option value="">请选择</option>
		<option th:selected="*{type}==${item.type}" th:each="item:${list}" th:value="${item.type}" th:text="${item.name}" />
	</select>
</form>

这里涉及到以下几个th的语法

• th:object
• th:each：遍历
• th:value
• th:text：显示在页面上的text
• th:selected：被选中的option
• ${...}和*{...}：这里的*{type}拿到的是object的属性，如果是一个从后台传过来的数据，则使用${}

---

二、th:block、th:include、th:inline

<!--引用其他页面的hear部门-->
<th:block th:include="include :: header('xxxx')">

<th:block th:include="include :: footer">

<script th:inline="javascript">
// 用了th:inline属性，就可以在js中引用后端传来的参数
let a = [[${a}]];
</script>

---

三、Layui的使用

• Layui开发文档(LayUI官方网站在2021好像就没了，源码在码云上)
• xm-Select搜索型下拉框文档地址

参考资料

• Thymeleaf 下拉框、单选框赋值并判断选中