Springboot(三)——Thymeleaf模板

精选原创

跟张哥学编程 2024-03-02 12:58:59 ©著作权

文章标签 html spring 赋值 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者跟张哥学编程的原创作品，请联系作者获取转载授权，否则将追究法律责任

Springboot(三)——Thymeleaf模板

内容回顾：

1.springboot基本配置；

2.springboot整合mybatis开发web项目

本章重点：

1.什么thymeleaf模板

2.使用thymeleaf完全前台页面操作

一、Thymeleaf介绍

Thymeleaf是一个全新得模板引擎，可以用来替代jsp页面。是spring4推荐使用得一个模板引擎。

特点：

1.Thymeleaf支持HTML原型，在服务不运行得情况下，可以直接运行，可以让美工在浏览器上直接查看页面的静态效果，也可以支持开发人员在服务器运行时查询动态页面效果。

2.在html标签中增加了额外得属性来达到模版+数据得展示方式，在浏览器解析html页面时，会自动忽略html标签中未定义得属性，达到可以显示静态页面效果；当有数据返回时，thymeleaf标签会动态得替换掉静态内容，显示动态页面。

3.提供了标准和spring标准两种语言，实现jstl,ognl表达式得效果。

4.使用方便，学习简单，快速得实现表单得数据绑定。

二、Thymeleaf使用

2.1 创建springboot项目

2.2 在pom.xml中引入需要得依赖关系

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

2.3 配置springboot

server.servlet.context-path=/springboot03

# 数据库配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/yiibaidb?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
spring.datasource.username=root
spring.datasource.password=root

# thymeleaf模板配置
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8

2.4 编写Controller层代码

@Controller
public class TestController {

    @RequestMapping("test")
    public String test(Model model){
        model.addAttribute("msg","测试方法调用成功");
        return "success";
    }
}

2.5 创建thymeleaf模板

在templates创建html页面
在html页面上引入thymeleaf命名空间

<html lang="en" xmlns:th="http://" >

2.6 在html标签中使用thymeleaf标签获取服务器返回得数据信息

<span th:text="${msg}">success</span>

三、直接访问templates下模板文件

# 静态资源路径
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/templates/

四、Thymeleaf常用标签

关键字	功能介绍	案例
th:id	替换id	<input th:id="'xxx' + ${collect.id}"/>
th:text	文本替换	<p th:text="${collect.description}">description</p>
th:utext	支持html的文本替换	<p th:utext="${htmlcontent}">conten</p>
th:object	替换对象	<div th:object="${session.user}">
th:value	属性赋值	<input th:value="${}" />
th:with	变量赋值运算	<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style	设置样式	th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick	点击事件	th:onclick="'getCollect()'"
th:each	属性赋值	tr th:each="user,userStat:${users}">
th:if	判断条件	<a th:if="${userId == collect.userId}" >
th:unless	和th:if判断相反	<a rel="nofollow" th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href	链接地址	<a rel="nofollow" th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch	多路选择配合th:case 使用	<div th:switch="${user.role}">
th:case	th:switch的一个分支	<p th:case="'admin'">User is an administrator</p>
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选择框选中	th:selected="(${} == ${configObj.dd})"
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:remove	删除某个属性	<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:attr	设置标签属性，多个属性可以用逗号分隔	比如th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。

五、Thymeleaf标签中表达式语法

分为四类：

变量表达式；
星号表达式；
国际化表达式；
URL表达式；

5.1变量表达式

变量表达式就是OGNL表达式，获取上下文中对应对象得值，格式：${变量名}

<span th:text="${msg}">success.html</span>

5.2 星号表达式

可以选择指定对象替代上下文对象：

格式：*{变量名}

<span th:text="*{msg}">success.html</span><br/>

与变量表达式得区别：

1.当不考虑上下文得情况下，没有区别：

	变量表达式：<span th:text="${msg}">success.html</span><br/>
    星号表达式：<span th:text="*{msg}">success.html</span><br/>

2.*可以指定对象替代上下文对象，获取父类标签得值，示例：

<!-- 获取上下文中得emp对象得lastName属性值 -->
<div th:text="${emp.lastName}">emp</div>

<!-- th:object替换对象为emp -->
<div th:object="${emp}">
    <!-- *从emp对象中获取值 -->
    <span th:text="*{lastName}">lastName</span>
</div>

5.3 URL表达式

把上下文中得信息添加到URL中，URL重写。

RL表达式：
<a rel="nofollow" href="1.html" th:href="@{/add}">超链接1</a><br/>
<a rel="nofollow" href="1.html" th:href="@{/add(name='admin',pwd='123')}">超链接2</a><br/>
<a rel="nofollow" href="1.html" th:href="@{/add(name=${msg}})}">超链接3</a><br/>

5.4 表达式支持语法

1.文字

	<span th:text="123text">测试</span><br/>
    <span th:text="true">测试</span><br/>
    <span th:text="null">测试</span><br/>

2.文本操作

<span th:text="'AB'+${msg}">测试</span><br/>
<span th:text="|AB${msg}CC|">测试</span><br/>

3.算术运算，二元运算符，比较运算符

	<span th:text="1+2">测试</span><br/>
    <span th:text="2*2">测试</span><br/>

    <span th:text="1==1 and 1==2">测试</span><br/>

    <span th:text="1==2?'a':'b'">测试</span><br/>

六、常用标签得使用

1.赋值和字符串操作

	<span th:text="123text">测试</span><br/>
    <span th:text="true">测试</span><br/>
    <span th:text="null">测试</span><br/>

    <span th:text="'AB'+${msg}">测试</span><br/>
    <span th:text="|AB${msg}CC|">测试</span><br/>

2.条件判断

th:if当条件成立时，显示标签；

th:unless当条件不成立时，显示标签；

标签常用方法：<br/>
<a rel="nofollow" th:if="1==1" href="/add">if连接1</a><br/>
<a rel="nofollow" th:if="1==2" href="/add">if连接2</a><br/>
<a rel="nofollow" th:unless="1==1" href="/add">unless连接1</a><br/>
<a rel="nofollow" th:unless="1==2" href="/add">unless连接2</a><br/>

3.for循环

for循环：<br/>
    <table>
        <tr>
            <td>编号</td>
            <td>名</td>
            <td>姓</td>
        </tr>
        <tr th:each="l:${list}">
            <td th:text="${l.employeeNumber}">编号</td>
            <td th:text="${l.firstName}">名</td>
            <td th:text="${l.lastName}">姓</td>
        </tr>
    </table>

状态变量iterStat：

for循环：<br/>
<table>
    <tr>
        <td>下标，从0开始</td>
        <td>循环得第几个对象，从1开始</td>
        <td>编号</td>
        <td>名</td>
        <td>姓</td>
    </tr>
    <tr th:each="l,iterStat:${list}">
        <td th:text="${iterStat.index}"></td>
        <td th:text="${iterStat.count}"></td>
        <td th:text="${l.employeeNumber}">编号</td>
        <td th:text="${l.firstName}">名</td>
        <td th:text="${l.lastName}">姓</td>
    </tr>
</table>