Spring Boot入门92-129：Thymeleaf入门

最新推荐文章于 2023-03-21 19:20:25 发布

高开低走。

最新推荐文章于 2023-03-21 19:20:25 发布

阅读量211

点赞数

分类专栏：锦到说Springboot 文章标签： java

本文链接：https://blog.csdn.net/qq_43568982/article/details/124240864

版权

锦到说Springboot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

开始时间：2022-04-18
课程链接：动力节点springboot

Thymeleaf 模板引擎

Thymeleaf：是使用java开发的模板技术，在服务器端运行。把处理后的数据发送给浏览器。
模板是作视图层工作的。显示数据的。 Thymeleaf是基于Html语言。 Thymleaf语法是应用在
html标签中。 SpringBoot框架集成Thymealeaf, 使用Thymeleaf代替jsp。

Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot， Spring Boot只是很好地集成这种模板技术，作为前端页面的数据展示，在过去的 Java Web 开发中，我们往往会选择使用 Jsp 去完成页面的动态渲染，但是 jsp 需要翻译编译运行，效率低

写一个简单的例子

Controller安排上

@Controller
public class HelloThymeleafController {

    @GetMapping("/hello")
    public String helloThymeleaf(Model model,HttpServletRequest request){
        //添加数据到request作用域， 模板引擎可以从request中获取数据
        request.setAttribute("data","欢迎使用Thymeleaf模板引擎");

        //使用model存放对象
        model.addAttribute("mydata","model中的数据");

        //指定视图（模板引用使用的页面（html））
        //逻辑名称  classpath:/templates/hello.html
        return "hello";
    }
}

再写一个hello.html,放在resource下的template
不经过模板处理，显示后面的，经过了就可以获得前面的值，不经过比如说我直接打开本地的html，就是不经过模板处理

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hello.html</title>
</head>
<body>
<h3>使用Thymeleaf的例子</h3>
<!--    处理后才能正确显示，不然只显示后面部分的数据-->
<p th:text="${data}">想显示数据</p>
<p th:text="${mydata}">数据</p>
</body>
</html>

语法：

${key}

作用：获取key对于的文本数据， key 是request作用域中的key ，使用

request.setAttribute(), model.addAttribute()

在页面中的 html标签中，使用

th:text="${key}"

更改配置文件

#把缓存关了，让修改立即生效
spring.thymeleaf.cache=false
#编码格式
spring.thymeleaf.encoding=utf-8
#模板的类型 HTML
spring.thymeleaf.mode=HTML
#设置前缀
spring.thymeleaf.prefix=classpath:/templates/
#设置后缀 拼起来就是SpringMVC的视图解析器一样了，不写这些都有，默认的
spring.thymeleaf.suffix=.html

看看效果
在这里插入图片描述

标准变量表达式

定义一个实体类SysUser

public class SysUser {
    private Integer id;
    private String name;
    private String sex;
    private Integer age;

定义一个controller

@Controller
@RequestMapping("/tpl")
public class ThymeleafController {

    //第一个标准变量表达式
    @GetMapping("/expression1")
    public String expression1(Model model){
        //添加数据到Model
        model.addAttribute("site","www.bjpowernode.com");
        model.addAttribute("myuser", new SysUser(1001,"李四","m",20));
        //指定视图
        return "expression1";
    }

定义一个放置全局的index.html，用于链接
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>index.html---学习Thymeleaf语法</h3>
    <a href="tpl/expression1">标准变量表达式</a><br/>
    <a href="tpl/expression2">选择变量表达式</a><br/>
    <a href="tpl/link">链接表达式</a><br/>
    <a href="tpl/property">模板属性</a><br/>
    <a href="tpl/eachList">循环List</a><br/>
    <a href="tpl/eachArray">循环Array</a><br/>
    <a href="tpl/eachMap">循环Map</a><br/>
    <a href="tpl/ifunless">判断语句if-unless</a><br/>
    <a href="tpl/switch">判断语句switch</a><br/>
    <a href="tpl/inline">内联iniline</a><br/>
    <a href="tpl/text">字面量</a><br/>
    <a href="tpl/strjoin">字符串连接</a><br/>
    <a href="tpl/sym">运算符使用</a><br/>
    <a href="tpl/baseObject">内置对象</a><br/>
    <a href="tpl/utilobject">内置工具类对象</a><br/>
    <a href="tpl/customtpl">自定义模板</a><br/>
</body>
</html>

书写expression1表达式

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>标准变量表达式</title>
</head>
<body>
    <div style="margin-left: 400px">
        <h3>标准变量表达式:  ${key}</h3>
        <p th:text="${site}">key不存在</p>
        <br/>
        <p>获取SysUser对象 属性值</p>
        
        <p th:text="${myuser.id}">id</p>
        <p th:text="${myuser.name}">姓名</p>
        <p th:text="${myuser.sex}">姓名：m男</p>
        <p th:text="${myuser.age}">年龄</p>
        <p th:text="${myuser.getName()}">获取姓名使用getXXX</p>
    </div>
</body>
</html>

两者等价

<p th:text="${myuser.name}">姓名</p>.
<p th:text="${myuser.getName()}">获取姓名使用getXXX</p>

在这里插入图片描述
点击expression1

选择变量表达式

语法： *{key}
作用：获取这个key对应的数据， *{key}需要和th:object 这个属性一起使用。
目的是简单获取对象的属性值。
不用写那么多的key

  //选择标准变量表达式
    @GetMapping("/expression2")
    public String expression2(Model model){
        //添加数据到Model
        model.addAttribute("site","www.bjpowernode.com");
        model.addAttribute("myuser", new SysUser(1001,"李四","m",20));
        //指定视图
        return "expression2";
    }

expression2
我们看，先申明了对象，再直接拿

       <p>使用 *{} 获取SysUser的属性值</p>
        <div th:object="${myuser}">
            <p th:text="*{id}"></p>
            <p th:text="*{name}"></p>
            <p th:text="*{sex}"></p>
            <p th:text="*{age}"></p>

也可以和标准表达式写法一样

<p th:text="*{myuser.name}" ></p>
<p th:text="${myuser.name}" ></p>

链接表达式

语法： @{url}
作用：表示链接

    //链接表达式
    @GetMapping("/link")
    public String link(Model model){
        model.addAttribute("userId",1002);
        return "link";
    }
    //测试链接表达式的地址
    @GetMapping("/queryAccount")
    @ResponseBody
    public String queryAccount(Integer id){
        return "queryAccount,参数id="+id;
    }
    //有两个参数的地址
    @GetMapping("/queryUser")
    @ResponseBody
    public String queryUser(String name, Integer age){
        return "queryUser,有两个参数：name="+name+",age="+age;
    }

link.html

 <h3>链接绝对路径</h3>
    <a th:href="@{http://www.baidu.com}">链接到百度</a>

    <h3>链接的是相对地址</h3>
    <a th:href="@{/tpl/queryAccount}">相对地址，没有参数</a>
    <h3>链接的相对地址，使用字符串链接传递参数</h3>
    <a th:href="@{'/tpl/queryAccount?id='+ ${userId} }">获取model中数据</a>

在这里插入图片描述
我们如果不加 th: 就不会经过模板处理

对比一下区别
在这里插入图片描述

再来看两个

<h3>推荐使用的传参数的方式</h3>
    <a th:href="@{/tpl/queryAccount(id=${userId})}">传参数</a>
    <h3>传递多个参数</h3>
    <a th:href="@{/tpl/queryUser(name='lisi',age=20)}">传多个参数</a>

小括号括起来，再接变量表达式

Thymeleaf属性

属性是放在html元素中的，就是html元素的属性，加入了th前缀。属性的作用不变。加入上th，属性的值由模板引擎处理了。在属性可以使用变量表达式

例如

<form action="/loginServlet" method="post"></form>

<form th:action="/loginServlet" th:method="${methodAttr}"></form>

写一个例子

//使用模板的属性
    @GetMapping("/property")
    public String useProperty(Model model){
        model.addAttribute("methodAttr","post");
        model.addAttribute("id","2342");

        model.addAttribute("paramname","name");
        model.addAttribute("uservalue","lisi");

        model.addAttribute("textcolor","color:blue");

        return "html-property";
    }

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <script th:src="@{/js/jquery-3.4.1.js}" type="text/javascript"></script>
</head>
<body>
    <div style="margin-left: 400px">
        <h3>属性使用， 在html元素的属性上加入th</h3>
        <form th:action="@{/loginServlet}" th:method="${methodAttr}">
            <input th:type="text" th:name="${paramname}" th:value="${uservalue}"> <br/>
            <input type="button" id="btn" th:onclick="btnClick()" value="按钮">
        </form>

        <p th:style="${textcolor}">这是模板的例子</p>
    </div>
</body>
<script type="text/javascript">
    function btnClick(){
        alert("按钮单击了");
    }
    $(function(){
        $("#btn").click(function(){
            alert("click===jquery")
        })
    })
</script>
</html>

each

each循环，可以循环List，Array

语法：在一个html标签中，使用th:each

先循环一个list

//循环List
    @GetMapping("/eachList")
    public String eachList(Model model){
        List<SysUser> users  = new ArrayList<>();
        users.add( new SysUser(1001,"张三","m",20));
        users.add( new SysUser(1002,"关羽","m",70));
        users.add( new SysUser(1003,"张飞","m",60));
        users.add( new SysUser(1004,"刘备","m",80));
        users.add( new SysUser(1005,"孙尚香","f",50));
        model.addAttribute("myusers",users);
        return "eachList";
    }

在这里插入图片描述

<table border="1" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <td> 编号</td>
            <td> id 序号</td>
            <td> name</td>
            <td> sex</td>
            <td> age</td>
            <td>姓名</td>
            <td>是否是第一行</td>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user:${myusers}">
        <!--当前行 总行数-->
            <td th:text="${userStat.count}+'/'+${userStat.size}"></td>
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.sex}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${userStat.current.name}"></td>
            <td th:text="${userStat.first}"/>
        </tr>
        </tbody>
    </table>

th:if

“th:if” : 判断语句，当条件为true，显示html标签体内，反之不显示没有else语句

语法：
<div th:if=" 10 > 0 "> 显示文本内容 </div>

还有一个 th:unless 和 th:if相反的行为

语法：
<div th:unless=" 10 < 0 "> 当条件为false显示标签体内容 </div>

例如：

<div style="margin-left: 400px">
        <h3> if 使用</h3>
        <p th:if="${sex=='m'}">性别是男</p>
        <p th:if="${isLogin}">已经登录系统</p>
        <p th:if="${age > 20}">年龄大于20</p>
        <!--""空字符是true-->
        <p th:if="${name}">name是“”</p>
        <!--null是false-->
        <p th:if="${isOld}"> isOld是null</p>
 </div>

<div style="margin-left: 400px">
        <h3>unless: 判断条件为false，显示标签体内容</h3>
        <p th:unless="${sex=='f'}">性别是男的</p>
        <p th:unless="${isLogin}">登录系统</p>
        <p th:unless="${isOld}"> isOld是null </p>
 </div>

th:switch

语法：
<div th:switch="要比对的值">
    <p th:case="值1">
        结果1
    </p>
    <p th:case="值2">
        结果2
    </p>
    <p th:case="*">
        默认结果
    </p>
    以上的case只有一个语句执行
    
</div>

th:inline

内联text：在html标签外，获取表达式的值

语法：

<p>显示姓名是：[[${key}]]</p>

 <div style="margin-left: 400px">
        <h3>内联 text, 使用内联表达式显示变量的值</h3>
        <div th:inline="text">
            <p>我是[[${name}]]，年龄是[[${age}]]</p>
            我是<span th:text="${name}"></span>,年龄是<span th:text="${age}"></span>
        </div>

        <div>
            <p>使用内联text</p>
            <p>我是[[${name}]],性别是[[${sex}]]</p>
        </div>
</div>

内联javascript

例子：
 <script type="text/javascript" th:inline="javascript">
         var myname = [[${name}]];
         var myage = [[${age}]];

         //alert("获取的模板中数据 "+ myname + ","+myage)

        function fun(){
            alert("单击事件，获取数据 "+ myname + ","+ [[${sex}]])
        }
    </script>

字面量

<div style="margin-left: 400px">
       <h3>文本字面量: 使用单引号括起来的字符串</h3>
       <p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>

       <h3>数字字面量</h3>
        <p th:if="${20>5}"> 20大于 5</p>

        <h3>boolean字面量</h3>
        <p th:if="${isLogin == true}">用户已经登录系统</p>

        <h3>null字面量</h3>
        <p th:if="${myuser != null}">有myuser数据</p>
    </div>

字符串连接

连接字符串有两种语法

语法使用单引号括起来字符串，使用 + 连接其他的字符串或者表达式

  <p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>

语法：使用双竖线， |字符串和表达式|

<p th:text="|我是${name},我所在城市${city|">
    显示数据
</p>

 <div style="margin-left: 400px">
       <h3>字符串连接方式1：使用单引号括起来的字符串</h3>
       <p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>
        <br/>
        <br/>
        <h3>字符串连接方式2：|字符串和表达式|</h3>
        <p th:text="|我是${name},所在城市${city},其他人${myuser.name}|"></p>
    </div>

运算符

算术运算： + , - - , * , / , %
关系比较 : > , < , >= , <= ( gt , lt , ge , le )
相等判断： == , != ( eq , ne )


<div style="margin-left: 400px">
        <h3>使用运算符</h3>
        <p th:text="${age > 10}">年龄大于 10 </p>
        <p th:text="${ 20 + 30 }">显示运算结果</p>
        <p th:if="${myuser == null}">myuser是null</p>
        <p th:if="${myuser eq null}">myuser是null</p>
        <p th:if="${myuser ne null}">myuser不是null</p>

        <p th:text="${isLogin == true ? '用户已经登录' : '用户需要登录'}"></p>
        <p th:text="${isLogin == true ? ( age > 10 ? '用户是大于10的' : '用户年龄比较小') : '用户需要登录'}"></p>

    </div>

三元运算符：
 表达式  ？ true的结果 : false的结果

三元运算符可以嵌套

HttpSession HttpServletRequest

   //模板内置对象
    @GetMapping("/baseObject")
    public String baseObject(Model model, HttpServletRequest request,
                             HttpSession session){
        //添加数据
        model.addAttribute("myname","李思");
        request.setAttribute("requestData","request作用域中的数据");
        request.getSession().setAttribute("sessionData","session作用域中的数据");
        //直接使用session
        session.setAttribute("loginname","zhangsan");
        return "baseObject";
    }

获取作用域中的数据

<div style="margin-left: 350px">
        <h3>内置对象#request,#session，session的使用</h3>
        <p>获取作用域中的数据</p>
        <p th:text="${#request.getAttribute('requestData')}"></p>
        <p th:text="${#session.getAttribute('sessionData')}"></p>
        <p th:text="${session.loginname}"></p>

        <br/>
        <br/>
        <h3>使用内置对象的方法</h3>
        getRequestURL=<span th:text="${#request.getRequestURL()}"></span><br/>
        getRequestURI=<span th:text="${#request.getRequestURI()}"></span><br/>
        getQueryString=<span th:text="${#request.getQueryString()}"></span><br/>
        getContextPath=<span th:text="${#request.getContextPath()}"></span><br/>
        getServerName=<span th:text="${#request.getServerName()}"></span><br/>
        getServerPort=<span th:text="${#request.getServerPort()}"></span><br/>
        sessionId,getId=<span th:text="${#session.getId()}"></span>

        <h3>param对象：表示请求的参数集合</h3>
        name参数的值：<span th:text="${param.name}"></span><br/>
        参数的数量：<span th:text="${param.size()}"></span><br/>
    </div>

在这里插入图片描述

内置工具类

内置工具类型： Thymeleaf自己的一些类，提供对string， date ，集合的一些处理方法

#dates: 处理日器的工具类

#numbers:处理数字的

#lists: 处理list集合的

<div style="margin-left: 350px">
      <h3>日期类对象 #dates</h3>
      <p th:text="${#dates.format(mydate )}"></p>
      <p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"></p>
      <p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss')}"></p>
      <p th:text="${#dates.year(mydate)}"></p>
      <p th:text="${#dates.month(mydate)}"></p>
      <p th:text="${#dates.monthName(mydate)}"></p>
      <p th:text="${#dates.createNow()}"></p>
      <br/>

      <h3>内置工具类#numbers，操作数字的</h3>
      <p th:text="${#numbers.formatCurrency(mynum)}"></p>
      <p th:text="${#numbers.formatDecimal(mynum,5,2)}"></p>

      <br/>
      <h3>内置工具类#strings,操作字符串</h3>
      <p th:text="${#strings.toUpperCase(mystr)}"></p>
      <p th:text="${#strings.indexOf(mystr,'power')}"></p>
      <p th:text="${#strings.substring(mystr,2,5)}"></p>
      <p th:text="${#strings.substring(mystr,2)}"></p>
      <p th:text="${#strings.concat(mystr,'---java开发的黄埔军校---')}"></p>
      <p th:text="${#strings.length(mystr)}"></p>
      <p th:text="${#strings.length('hello')}"></p>
      <p th:unless="${#strings.isEmpty(mystr)}"> mystring 不是 空字符串  </p>

      <br/>
      <h3>内置工具类#lists,操作list集合</h3>
      <p th:text="${#lists.size(mylist)}"></p>
      <p th:if="${#lists.contains(mylist,'a')}">有成员a</p>
      <p th:if="!${#lists.isEmpty(mylist)}"> list 集合有多个成员</p>

      <br/>
      <h3>处理null</h3>
      <p th:text="${zoo?.dog?.name}"></p>

  </div>

自定义模板

模板是内容复用，定义一次，在其他的模板文件中多次使用。

模板使用：

1.定义模板

th:fragment="模板自定义名称"

例如：
<div th:fragment="head">
    <p>
        动力节点-java开发
    </p>
    <p>
        www.bjpowernode.com
    </p>
</div>

2.使用模板

1) ~{templatename :: selector}
   templatename:  文件名称
   selector： 自定义模板名称
2）templatename :: selector
   templatename:  文件名称
   selector： 自定义模板名称

对于使用模板：有包含模板（th:include）， 插入模板(th:insert)

结束时间：2022-04-19

高开低走。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot入门92-129：Thymeleaf入门

开始时间：2022-04-18课程链接：动力节点springbootThymeleaf 模板引擎Thymeleaf：是使用java开发的模板技术，在服务器端运行。把处理后的数据发送给浏览器。模板是作视图层工作的。显示数据的。 Thymeleaf是基于Html语言。 Thymleaf语法是应用在html标签中。 SpringBoot框架集成Thymealeaf, 使用Thymeleaf代替jsp。Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot， S
复制链接

扫一扫