thymeleaf的语法

java攻城狮

发布于 2020-10-10 16:12:57

4550

发布于 2020-10-10 16:12:57

文章被收录于专栏：个人积累个人积累

网页的表头表示（图片）

图片以favicon.ico的形式命名，并放在resources下面的resources根目录

1.导入相关依赖

<!--thymeleaf模板引擎-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

2. 在html头部添加提示语句

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

基本标签语法

<!--th:utext 和 th:text区别 前者不转译特殊字符 后者转译特殊字符-->
    <div th:utext="${div}"></div>
    <div th:text="${div}"></div>
    
    <input type="text" size="32" th:value="${name}">
    
    <!--th:each 遍历列表，常用，优先级很高，仅此于代码块的插入-->
    <!--th:each 修饰在div上，则div层重复出现，若只想p标签遍历，则修饰在p标签上-->
    <div th:each="message : ${list}"> <!-- 遍历整个div-p，不推荐-->
        <p th:text="${message}" />
    </div>
    <hr>
    <div> <!--只遍历p，推荐使用-->
        <p th:text="${message}" th:each="message : ${list}" />
    </div>
    
    <!--th:object 声明变量，和*{} 一起使用-->
    <div th:object="${bean}">
        <p>ID: <span th:text="*{name}" /></p><!--th:text="${thObject.id}"-->
        <p>TH: <span th:text="*{age}" /></p><!--${thObject.thName}-->
        <p>DE: <span th:text="*{tal}" /></p><!--${thObject.desc}-->
    </div>

后台中传赋值如下

@RequestMapping("/success")
public String Refer (Map<String,Object> maps){
    List<String> arr = new ArrayList<String>();
    Person person = new Person();
    person.setAge(15);
    person.setName("jack");
    person.setTal("180cm");
    arr.add("zhangsan");
    arr.add("lisi");
    maps.put("name","zhangsan");
    maps.put("type","doller");
    maps.put("div","<h2>hello this is a test title</h2>");
    maps.put("list",arr);
    maps.put("thIf","isNotEmpty");
    maps.put("bean",person);

    return "success";
}

单选框和下拉选

<-- 单选框 -->
<div class="form-group">
	<label>Gender</label><br/>
	<div class="form-check form-check-inline">
		<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}">
		<label class="form-check-label">男</label>
	</div>
	<div class="form-check form-check-inline">
		<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
		<label class="form-check-label">女</label>
	</div>
</div>

<-- 下拉选 -->
<div class="form-group">
	<label>department</label>
	<!--提交的是部门的id-->
	<select class="form-control" name="department.id">
		<option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
	</select>
</div>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-04-18，如有侵权请联系 cloudcommunity@tencent.com 删除

html