thymeleaf示例

 1.组件封装

th:fragment="topbar"

2.组件使用并携带数据

<div th:insert="~{commons/commons::sidebar(active='list.html')}"></div>

3.导航选中高亮，通过步骤2

<a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}">

4.表单展示

• 数据遍历：

<tr th:each="emp:${emps}">

• 性别转换：

<td th:text="${emp.getGender()==0?'女':'男'}"></td>

• 日期格式化：

<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>

<!--顶部导航栏-->
		<div th:insert="~{commons/commons::topbar}"></div>

		<div class="container-fluid">
			<div class="row">
<!--				侧边栏-->
<!--				插入组件~{页面名::组件名}-->
<!--				通过组件传参显示高亮-->
				<div th:insert="~{commons/commons::sidebar(active='list.html')}"></div>



				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2>Section title</h2>
					<div class="table-responsive">
						<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>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="emp:${emps}">
									<td th:text="${emp.getId()}"></td>
									<td th:text="${emp.getLastName}"></td>
									<td th:text="${emp.getEmail()}"></td>
<!--									性别表单-->
									<td th:text="${emp.getGender()==0?'女':'男'}"></td>
									<td th:text="${emp.getDepartment().getDepartmentName()}"></td>
<!--									时间格式化-->
									<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
									<td>
										<button class="btn-sm btn-primary">编辑</button>
										<button class="btn-sm btn-danger">删除</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</main>
			</div>
		</div>

5.rf风格传递对象属性

<a class="btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a>

6.单选框回显

<div class="form-check form-check-inline">
								<input th:checked="${emp.getGender()==1}"  class="form-check-input" type="radio" name="gender" value="1">
								<label class="form-check-label">男</label>
							</div>
							<div class="form-check form-check-inline">
								<input th:checked="${emp.getGender()==0}" class="form-check-input" type="radio" name="gender" value="0">
								<label class="form-check-label">女</label>
							</div>

7.多选框回显

<select class="form-control" name="department.id">
								<option th:each="dept:${departments}" th:selected="${dept.getId()==emp.getDepartment().getId()}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
							</select>

 8.前端格式化日期

<div class="form-group">
							<label>Birth</label>
							<input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}" type="text" class="form-control" name="birth" placeholder="2019/1/1">
						</div>

9.后端格式化日期

  
spring:
    mvc:
        format:
          date: yyyy-MM-dd

10.修改编写id隐藏域

<input type="hidden" name="id" th:value="${emp.getId()}">