SpringBoot中thymeleaf的使用

迷南。 2022-04-22 22:50 309阅读 0赞

## ##

### 1、在pom.xml中导入thymeleaf ###

<dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

###    需要将html页面放在templates下面，thymeleaf模板引擎就会自动渲染。 ###

### 2、在html中使用thymeleaf需要导入名称空间 ###

### 3、导入webjars中的css样式 ###

### 4、导入springboot中static目录下的自己的css样式 ###

![20190117195935596.png][]

### 5、在thymeleaf中发送请求 ###

//发送http://localhost:8080/user/login请求
    <form class="form-signin" action="dashboard.html" th:action="@{/user/login}" method="post">
        ...
    </form>

### 6、thymeleaf公共页面的抽取 ###

![20190118135747450.png][]

将工具的html代码片段写在common目录的 bar.html中。

第一种使用th:fragment
    <div th:fragment="topbar">  topbar为起的片段名称
    	....
    </div> 
    
    引用方法：
    <div th:replace="common/bar::topbar"></div>
    
    第二种：使用id选择器
    <div id="sidebar">
    	....
    </div> 
    
    引用方法：
    <div th:replace="common/bar::#sidebar"></div>
    
    th:insert：将公共片段整个插入到声明引入的元素中
    th:replace：将声明引入的元素替换为公共片段 
    th:include：将被引入的片段的内容包含进这个标签中

### 7、thymeleaf引入片段时传递参数 ###

<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" th:href="@{main.html}"
                            根据传递的参数，决定是否高亮显示
                            th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                <polyline points="9 22 9 12 15 12 15 22"></polyline>
                            </svg>
                            主页 <span class="sr-only">(current)</span>
                        </a>
                    </li>
    
    
    
    引入侧边栏,传递参数
    <div th:replace="common/bar::#sidebar(activeUri='main.html')"></div>

### 8、使用thymeleaf的CRUD操作 ###

**8.1查询员工列表**

后台：

//获取员工列表
        @GetMapping("/emps")
        public String getEmps(Model model) {
            Collection<Employee> employees = employeeDao.getAll();
            //放入域中
            model.addAttribute("emps", employees);
            // thymeleaf默认就会拼串
            // classpath:/templates/xxxx.html
            return "emp/list";
        }

thymeleaf页面：

<table class="table table-striped table-sm">
    	<thead>
             <tr>
    			<th>ID</th>
    			<th>LastName</th>
    			<th>Email</th>
    			<th>Gender</th>
    			<th>Department</th>
    			<th>Birth</th>
    			<th>Option</th>
    		</tr>								
    	</thead>
    	<tbody>
    		<tr th:each="emp:${emps}">
    			td th:text="${emp.id}"></td>
    			<td>[[${emp.lastName}]]</td>
    			<td th:text="${emp.email}"></td>
    			<td th:text="${emp.gender}==0?'女':'男'"></td>
    			<td th:text="${emp.department.departmentName}"></td>
    			
    			<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>
    			<td>
                 <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
    			
    			<button th:attr="delete_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
    			</td>
    		</tr>
    	</tbody>
    </table>

其中注意编辑按钮发送的请求写法：

th:href="@{/emp/}+${emp.id}" 这样发送的才是正确的地址http://localhost:8080/emp/1。

**8.2 添加页面和修改页面合一**

**添加页面和修改页面的区别在于：**

**a、修改时需要查询员工信息进行回显，因此在页面中可以判断$\{emp\}是否为空，区分修改页面和添加页面。当$\{emp\}不为空时，说明是修改页面，再对员工信息进行回显。**

**b、添加时提交的方式是POST，而修改时采用的是PUT，并要提供员工ID，因此采用隐藏域保存员工ID。**

>     当是修改页面时，发送PUT请求，但是form表单只支持GET和POST，因此需要自己实现发送PUT
>     1、springMVC中配置HiddenHttpMethodFilter（springboot自动配置好了） 
>     2、页面创建一个POST表单 
>     3、创建一个input项，name="_method"; 值就是我们指定的请求方式(PUT\DELETE等)。
> 
> 因此在$\{emp\}不为空时，采用 <input type="hidden" name="\_method" value="PUT" th:if="$\{emp!=null\}">

<form th:action="@{/emp}" method="post">
    					
    					<input type="hidden" name="_method" value="PUT" th:if="${emp!=null}">
    					
    					<input type="hidden" name="id" th:value="${emp.id}" th:if="${emp!=null}">
    
    					<div class="form-group">
    						<label>LastName</label>
    						<input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
    					</div>
    					<div class="form-group">
    						<label>Email</label>
    						<input name="email" type="email" class="form-control" placeholder="zhangsan@qq.com" th:value="${emp!=null}?${emp.email}">
    					</div>
    					<div class="form-group">
    						<label>Gender</label><br/>
    						<div class="form-check form-check-inline">
    							<input class="form-check-inline" 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-inline" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
    							<label class="form-check-label">女</label>
    						</div>
    						<div class="form-group">
    							<label>Department</label>
    							<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}"></option>
    							</select>
    						</div>
    						<div class="form-group">
    							<label>Birth</label>
    							<input th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}" name="birth" type="text" class="form-control" placeholder="2019-1-1">
    						</div>
    						
    						<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
    					</div>
          </form>

### 8.3 删除员工 ###

删除按钮：

<button th:attr="delete_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>

<form id="deleteEmpForm" method="post">
        <input type="hidden" name="_method" value="DELETE">
    </form>

<script>
        $(".deleteBtn").click(function(){
        //删除当前员工
        $("#deleteEmpForm").attr("action", $(this).attr("delete_uri")).submit();
        return false;
    })
    </script>

thymeleaf官网使用文档：[https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html][https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html]

[20190117195935596.png]: /images/20220326/c105a863a2e14d1899f19c9d5c4c29e9.png
[20190118135747450.png]: /images/20220326/b8a49a97a6f847e795589b4da17cc8e0.png
[https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html