【SpringBoot新手篇】SpringBoot集成thymeleaf模板引擎

1.Thymeleaf简介

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点

• Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板 + 数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
• Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式效果，避免每天套模板、改 JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
• Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

2.结合springboot使用

2.1 引入依赖

这里添加五个依赖就能够写成一个springboot+thymeleaf的项目了！！！！

<!--继承springboot的父项目-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.7</version>
    </parent>
    <dependencies>
        <!--引入springboot的web支持-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--引入lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </dependency>
        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>
        <!--使用thymelaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

2.2 在 application.yml 中配置 Thymeleaf

#指定一下 端口号 springboot
server:
  port: 1111
#配置一下数据源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/t149?serverTimezone=Asia/Shanghai&useSSL=false&useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true
    hikari:
      username: root
      password: root
      #thymeleaf整合
  thymeleaf:
    prefix: classpath:/templates/ #前缀
    mode: LEGACYHTML5
    cache: false #开发时关闭缓存,不然没法看到实时页面
    suffix: .html #后缀

#扫描mapper和给实体类驼峰
mybatis:
  mapper-locations: classpath:/com/liu/mapper/*.xml
  type-aliases-package: com.liu.entity
  configuration:  #输出日志文件sql语句日志文件
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

2.3 创建测试用 JavaBean

创建一个测试效果的 JavaBean，简单封装一下即可（这里我是用了两张表）

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Clubs {
    private int cid;
    private String cname;
    private String city;
}

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Players {
    private int pid;
    private String pname;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss" ,timezone = "GMT+8")
    private Date birthday;
    private int height;
    private int weight;
    private String position;
    private int cid;

    private Clubs clubs;
}

2.4 创建测试用 Controller

创建一个 Controller，造一些测试数据并设置跳转

@Controller
public class NBAPlayersController {

    @Autowired
    private NBAPlayersService nps;
    
    /*
    * 查询全部  条件查询--模糊查询    根据球队和姓名  分页查询
    * */
    @RequestMapping("/PlayersAll")
    public String newsdetail(
            @RequestParam(value="pn",defaultValue="1")Integer pn,
            Model model ,
            @RequestParam(value = "pname", required = false) String pname,
            @RequestParam(value = "cid", required = false) String cid) {
         List<Clubs> clubs = nps.AllClubs();
        model.addAttribute("clubs", clubs);
        /*for (Clubs club : clubs) {
            System.out.println(club);
        }*/
        //从第一条开始 每页查询一条数据
        PageHelper.startPage(pn, 4);
        List<Players> players = nps.AllPlayers(null,pname,cid);
        //将用户信息放入PageInfo对象里
        PageInfo page = new PageInfo(players, 5);
        model.addAttribute("page", page);
        return "list";
    }

2.5 创建测试页面

在 templates 目录下创建 list.html 文件，代码如下：

<!DOCTYPE html>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>美国职业篮球联盟(NBA)球员信息</title>
</head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script th:src="@{https://code.jquery.com/jquery-3.6.1.min.js}"></script>
<script th:src="@{http://code.jquery.com/jquery-latest.js}"></script>
<body>
<div style="text-align: center ; margin: auto"/>
<div >
    <h3>美国职业篮球联盟(NBA)球员信息</h3>
    <!--查询条件-->
    <form>
        球员姓名：<input type="text" name="pname"/>
        所属球队：
        <select name="cid">
            <option text="" value="0">--请选择--</option>
            <option th:each="clubs:${clubs}" th:value="${clubs.cid}" th:text="${clubs.cname}" th:name="${clubs.cid}">
            </option>
        </select>
        <input type="button" value="搜索" onclick="addTrip()">
        <button><a th:href="@{'/PlayersAddClubs'}">添加</a></button>
    </form>

    <!--遍历集合，查询所有球员信息-->
    <table class="table table-hover" border="1">
        <tr>
            <td>球员序号</td>
            <td>球员名称</td>
            <td>出生日期(yyyy-MM-dd)</td>
            <td>球员身高(单位：cm)</td>
            <td>球员体重(单位：kg)</td>
            <td>球员位置</td>
            <td>所属球队</td>
            <td>相关操作</td>
        </tr>

        <tr th:each="list:${page.list}">
            <td th:text="${list.pid}"></td>
            <td th:text="${list.pname}"></td>
            <td th:text="${#dates.format(list.birthday , 'yyyy-MM-dd')}"></td>
            <td th:text="${list.height}"></td>
            <td th:text="${list.weight}"></td>
            <td th:text="${list.position}"></td>
            <td th:text="${list.clubs.cname}"></td>
            <!--players.birthday-->
            <td>

                <button><a th:href="@{/delPlayers(pid=${list.pid})}">删除</a></button>
                <button><a th:href="@{/updPlayersAndId (pid=${list.pid})}">修改</a></button>
            </td>
        </tr>
    </table>
</div>

修改 html 标签用于引入 thymeleaf 引擎，这样才可以在其他标签里使用 th:* 语法，声明如下：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

这里可以看到我从controller拿到了数据并且映射到了页面

3. thymeleaf语法

3.1 标签使用

th:text 基础信息输出
这里提示一下：如果标签中有内容（索隆），这里th：text=="${user.username}"将会替代你的索隆
HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>th:text</title>
</head>
<body>

<span th:text="${user.username}">索隆</span>
</body>
</html>

Java代码：

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User implements Serializable {
    private String username;
    private Integer age;
}

@Controller
public class ThyymeleafController {

    @GetMapping("/")
    public String index(Model model){
        User user = new User();
        user.setUsername("路飞");
        user.setAge(21);
        model.addAttribute("user",user);
        return "index";
    }
}

th:utext html内容输出
使用"th:text"是对内容的原样输出，使用“th:utext”可以进行html标签输出。
Java代码：

@RequestMapping("/eat")
public ModelAndView eat() {
    ModelAndView modelAndView = new ModelAndView("/cat");
    modelAndView.addObject("data", "<span style='color:#f5c6f8'>剑豪美女带着肉来了</span>");
    return modelAndView;
}

HTML代码：

<h4 th:text="'th:text '+${data}"></h4>
<h4 th:utext="'th:utext '+${data}"></h4>

th:if, th:unless 条件判断
th:if为满足条件的业务处理，th:unless正好相反，是除去的意思。

<span th:if="${age > 18}">
    成年
</span>
<span th:unless="${age > 18}">
    未成年
</span>

th:switch, th:case 多条件判断

<div th:switch="${age}">
    <span th:case="18">18岁</span>
    <span th:case="19">19岁</span>
    <spa th:case="*">其他</spa>
</div>

注意 :默认选项使用th:case=“*” 指定。
th:href链接表达式传值
Java代码：

 /*
    * 根据pid删除球员信息
    * */
    @RequestMapping("/delPlayers")
    public String delPlayers(@RequestParam(value = "pid", required = false)Integer pid){
        nps.delPlayer(pid);
        return "redirect:/PlayersAll";
    }

HTML代码：

 <button><a th:href="@{/delPlayers(pid=${list.pid})}">删除</a></button>

这上面我是列出最常用的几个！！！！

3.2 其他使用

关键字	功能	案例
th:id	替换id	<input th:id=“‘xxx’ + ${collect.id}” / >
th:object	替换对象	< div th:object=“${session.user}” >
th:value	属性赋值	< input th:value=“${user.name}” />
th:with	变量赋值运算	< div th:with=“isEven=${prodStat.count}%2==0”>< /div>
th:style	设置样式	th:style=“‘display:’ + @{(${sitrue} ? ‘none’ : ‘inline-block’)} + ‘’”
th:onclick	点击事件	th:οnclick=“‘getCollect()’”
th:each	属性赋值	tr th:each=“user,userStat:${users}”>
th:fragment	布局标签，定义一个代码片段，方便其它地方引用	< div th:fragment=“alert”>
th:include	布局标签，替换内容到引入的文件	< head th:include=“layout :: htmlhead” th:with=“title=‘xx’”>< /head> />
th:replace	布局标签，替换整个标签到引入的文件	< div th:replace=“fragments/header :: title”>< /div>
th:selected	selected选择框 选中	selected选择框 选中
th:src	图片类地址引入	< img class=“img-responsive” alt=“App Logo” th:src=“@{/img/logo.png}” />
th:inline	定义js脚本可以使用变量	< script type=“text/javascript” th:inline=“javascript”>
th:action	表单提交的地址	< form action=“subscribe.html” th:action=“@{/subscribe}”>
th:attr	设置标签属性，多个属性可以用逗号分隔	比如th:attr=“src=@{/image/aa.jpg},title=#{logo}”，此标签不太优雅，一般用的比较少。

案例

文章总结

Thymeleaf简介
结合springboot使用
thymeleaf语法