项目地址：https://gitee.com/wl_projects/study.git
1. 引入 thymeleaf
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2. 引入 thymeleaf
如何使用？
thymeleaf 的默认配置
3. 默认配置使用
使用 thymeleaf 默认配置，只需要将 html 文件放在 templates 文件夹下即可！
LoginController.java
package com.test.wl.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
/**
* @author Administrator
* @date 2021年5月20日 08:52:34
*/
@Controller
public class LoginController {
@GetMapping("login")
public String login() {
return "login";
}
}
访问地址：http://localhost:8080/login
4. 自定义配置使用
spring:
#thymeleaf模板引擎
thymeleaf:
cache: true
encoding: utf-8
prefix: classpath:/templates
suffix: .html
mode: HTML5
5. thymeleaf 语法
使用 thymeleaf 首先要引入 xmlns:th="http://www.thymeleaf.org"
<html lang="en" xmlns:th="http://www.thymeleaf.org">
以下是本人用到的语法示例：
th:value
<input type="text" name="title" th:value="${article.title}" placeholder="标题">
th:text，th:each，th:href
<form action="/back/goodsInfo/delCheck" method="post" id="ff">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="10px"><input id="checkAll" type="checkbox" class="checkbox-template"></th>
<th>全选</th>
<th>序号</th>
<th>商品名称</th>
<th>现价</th>
<th>原价</th>
<th>商品类别</th>
<th>操作指令</th>
</tr>
</thead>
<tbody>
<tr th:each="goodsInfo,st:${page.records}">
<td colspan="2"><input name="ids" type="checkbox" th:value="${goodsInfo.iid}" class="checkbox-template"></td>
<td th:text="${st.count}"></td>
<td th:text="${goodsInfo.iname}"></td>
<td th:text="${goodsInfo.nprice}"></td>
<td th:text="${goodsInfo.pprice}"></td>
<td th:text="${goodsInfo.goodsType.gname}"></td>
<td>
<a class="btn btn-sm btn-warning" href="javascript:;" th:onclick="doDel([[${goodsInfo.iid}]])">删除</a>
<a class="btn btn-sm btn-info" th:href="@{'/back/goodsInfo/update/'+${goodsInfo.iid}}">修改</a>
</td>
</tr>
</tbody>
</table>
</form>
th:if
<button th:if="${article.status == '0'}" class="btn btn-sm btn-danger" disabled>未发布</button>
<button th:if="${article.status == '1'}" class="btn btn-sm btn-success" disabled>已发布</button>
th:class
<div id="pager" th:fragment="pager">
<div style="float:left" th:if="${page.pages>0}">
当前第 <span th:text="${page.current}"></span> 页，共 <span th:text="${page.pages}"></span> 页，总记录数 <span th:text="${page.total}"></span> 条
</div>
<div style="float: right" th:if="${page.pages>0}">
<a class="btn btn-primary" th:if="${page.current>1}" th:href="@{${url}}">首页</a>
<a class="btn btn-primary" th:if="${page.current>1}" th:href="@{${url}+${page.current-1}}" >上一页</a>
<a th:href="@{${url}+ ${i}}"
th:each="i :${#numbers.sequence(1, page.pages)}" th:text="${i}"
th:class="${page.current == i}? 'btn btn-danger' :'btn btn-primary' "></a>
<a class="btn btn-primary" th:if="${page.current<page.pages}" th:href="@{${url}+${page.current+1}}">下一页</a>
<a class="btn btn-primary" th:if="${page.current<page.pages}" th:href="@{${url}+${page.pages}}">尾页</a>
</div>
</div>
th:src
<img th:src="${#strings.replace(article.picUrl,'/200/300','/1800/1200')}" alt="网络不给力" class="ui m-bg image" />
th:id
<i th:id="@{'upCount'+${article.articleId}}" th:onclick="upVote(this.id, [[${article.articleId}]])" th:class="${article.isUpVote == true} ? 'thumbs up icon white m-font-size-text-mini' : 'thumbs up icon black m-font-size-text-mini'" style="margin-top: -5px"></i>
th:fragment
<div id="menu" th:fragment="menu">
<nav class="side-navbar">
<div class="sidebar-header d-flex align-items-center">
<div class="title">
<h1 class="h4">[[${session.username}]]</h1>
<p>当前用户</p>
</div>
</div>
<span class="heading" style="font-size: 24px;color: gray">主菜单</span>
<ul class="list-unstyled" style="height: 390px">
<li><a href="/back/" style="border-bottom: 1px solid #D7D7D7;border-top: 1px solid #D7D7D7;"> <i class="fa fa-home"></i>首页 </a></li>
<li shiro:hasPermission="/back/goodsType/view" style="border-bottom: 1px solid #D7D7D7"><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="fa fa-shopping-basket"></i>商品管理</a>
<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
<li><a href="/back/goodsType/view">商品类别</a></li>
<li><a href="/back/goodsInfo/view">商品信息</a></li>
<li><a href="/back/goodsTastes/view">商品口味</a></li>
</ul>
</li>
<li shiro:hasPermission="/back/member/view" style="border-bottom: 1px solid #D7D7D7"><a href="/back/member/view"> <i class="fa fa-user-circle-o"></i>用户管理 </a></li>
<li shiro:hasPermission="/back/blog/view" style="border-bottom: 1px solid #D7D7D7"><a href="/back/blog/view"> <i class="fa fa-file-text"></i>文章管理 </a></li>
<li shiro:hasPermission="/back/announcement/view" style="border-bottom: 1px solid #D7D7D7"><a href="/back/announcement/view"> <i class="fa fa-universal-access"></i>公告管理 </a></li>
</ul>
</nav>
</div>
th:replace
<div th:replace="/back/menu :: menu"></div>
……
