正文

thymeleaf模板引擎学习(代码片段)

bgyb  bgyb  2022-12-07  604

关键词：

开发传统Java WEB项目时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用JSP页面进行页面渲染了。从而Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP，或其他模板引擎，如Velocity、FreeMarker等。它的语法与我们以前使用的EL表达式和JSTL标签库十分类似。接下来我们进行学习使用Thymeleaf！

一、新建一个Spring Boot项目添加Thymeleaf依赖：创建Spring Boot可以参考一下这篇博文

1   <dependency>
2      <groupId>org.springframework.boot</groupId>
3      <artifactId>spring-boot-starter-thymeleaf</artifactId>
4    </dependency>

二、在SpringBoot的.yml配置文件中添加以下配置：

1 server:
2   port: 8097
3 spring:
4   thymeleaf:
5     prefix: classpath:/templates/ #获取页面路径
6     mode: HTML5
7     encoding: UTF-8
8     content-type: text/html
9     cache: false

三、新建一个Controller进行请求拦截，最后返回一个页面：

 1 @Controller //此处必须是@Controller注解，@RestController注解不进行解析，则返回页面返回JSON字符串
 2 public class ThymeleafController 
 3 
 4     //传输简单文字，Model对象，进行信息存储返回到index页面
 5     @RequestMapping("/hello")
 6     public String hello(Model model)
 7         model.addAttribute("name","李小龙");
 8         model.addAttribute("age","15");
 9         model.addAttribute("text","那小子真帅");
10         return  "index";
11     
12 
13

四、在resources/templates/新建一个index.html页面，代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <!--Thymeleaf库-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Thymeleaf</title>
</head>
<body>

    <!--基本字段显示-->
    <p style="color:red">hello world</p>
    <p th:text="‘姓名:‘+$name"></p>
    <p th:text="‘年龄:‘+$age"></p>
    <p th:text="‘介绍:‘+$text"></p>

</body>

至此我们启动项目，访问:http://localhost:8097/hello查看以下效果说明：使用Thymeleaf模板进行简单字段传输并渲染到页面成功！

技术图片

接下来可以在页面中进行条件判断:if、unless、switch,页面效果大家可以试验一番。

  <!--if判断true时才显示-->
    <div th:if="$age == 16">... do something ...</div>

    <!--unless和if判断条件相反，只有为false时候才会显示-->
    <div th:unless="$age == 16">...  something ...</div>

    <!--switch判断进行数据匹配判断-->
    <span th:switch="$age">
        <p th:case="15">李小龙是15岁</p>
        <p th:case="16">李小龙是16岁</p>
        <p th:case="*">没有匹配成功的数据！</p>
    </span>

在Thymeleaf模板中传输对象：1.Controller层、2.HTML层、

 1   //传输对象
 2     @RequestMapping("/queryuser")
 3     public String queryuser(Model model)
 4         User user = new User();
 5         user.setName("李小龙");
 6         user.setAge("16岁");
 7         user.setText("他对我说:那小子真帅");
 8         user.setSuccess("并拍了拍了我的肩膀");
 9         model.addAttribute("myuser",user);
10         return "user";
11

    <!--第一种方式是通过属性获取-->
    <div style="border: 1px solid red;width: 200px;height: 160px;text-align: center; ">
        <p th:text="‘尊姓大名:‘+$myuser.name"></p>
        <p th:text="‘芳龄:‘+$myuser.age"></p>
        <p th:text="‘简介:‘+$myuser.text"></p>
        <p th:text="‘动作:‘+$myuser.success"></p>
    </div>

    <!--第一种方式是通过属性选择值-->
    <div style="border: 1px solid blue;width: 200px;height: 160px;text-align: center; ">
        <div th:object="$myuser">
            <p th:text="‘尊姓大名:‘+ *name"></p>
            <p th:text="‘芳龄:‘+ *age"></p>
            <p th:text="‘简介:‘+ *text"></p>
            <p th:text="‘动作:‘+ *success"></p>
        </div>
    </div>

效果如下:

技术图片

在Thymeleaf模板中传输List、Map集合：1.Controller层、2.HTML层、

 1     //传输List
 2     @RequestMapping("/finAllList")
 3     public String finAllList(Model model)
 4         List<User> listuser = new ArrayList<User>();
 5         for (int i=0;i<6;i++)
 6             User user = new User();
 7             user.setName("阿里云成立第"+i+"年");
 8             user.setAge("阿里云第"+i+"岁");
 9             user.setText("阿里云第"+i+"岁时做了"+i+"件事情");
10             user.setSuccess("并拍了"+i+"次我的肩膀");
11             listuser.add(user);
12         
13         model.addAttribute("ListUser",listuser);
14         return "userarry";
15     
16 
17 
18     //传输Map
19     @RequestMapping("/finAllMap")
20     public String finAllMap(Model model)
21         Map<String,User> mapuser = new HashMap<String, User>();
22         for (int i=0;i<6;i++)
23             User user = new User();
24             user.setName("阿里云成立第"+i+"年");
25             user.setAge("阿里云第"+i+"岁");
26             user.setText("阿里云第"+i+"岁时做了"+i+"件事情");
27             user.setSuccess("并拍了"+i+"次我的肩膀");
28             mapuser.put("mapuser"+i,user);
29         
30         model.addAttribute("Mapuser",mapuser);
31         return "userarry";
32

 <!-- 对list集合不为空判断-->
    <table th:if="$not #lists.isEmpty(ListUser)">
        <tr><td>List序号</td><td>姓名</td><td>年龄</td><td>事件</td><td>动作</td><td>偶数</td><td>奇数</td></tr>
        <tr th:each="user,memberStat:$ListUser">
            <td th:text="$memberStat.index + 1"></td>
            <td th:text="$user.name"></td>
            <td th:text="$user.age"></td>
            <td th:text="$user.text"></td>
            <td th:text="$user.success"></td>
            <td th:text="$memberStat.even"></td>
            <td th:text="$memberStat.odd"></td>
        </tr>
    </table>

    <!--对Map集合不为空判断-->
   <table th:if="$not #maps.isEmpty(Mapuser)">
        <tr><td>Map集合序号</td><td>key</td><td>姓名</td><td>年龄</td><td>事件</td><td>动作</td><td>偶数</td><td>奇数</td></tr>
        <tr th:each="mapuser,memberStat:$Mapuser">
            <td th:text="$memberStat.index + 1"></td>
            <td th:text="$mapuser.key"/>
            <td th:text="$mapuser.value.name"></td>
            <td th:text="$mapuser.value.age"></td>
            <td th:text="$mapuser.value.text"></td>
            <td th:text="$mapuser.value.success"></td>
            <td th:text="$memberStat.even"></td>
            <td th:text="$memberStat.odd"></td>
        </tr>
    </table>

效果如下:

技术图片

个人总结：

在此个人只是做了一个小例子，各大网友可自行扩展功能业务，学习是永无止境的！

参考博文：

https://www.jianshu.com/p/a842e5b5012e

https://www.cnblogs.com/jiangbei/p/8462294.html

认识模板引擎-thymeleaf(代码片段)

模板引擎什么是模板引擎？原理/流程Thymeleaf使用流程1.通过maven引入依赖2.创建Html模板文件3.编写Servlet代码Thymeleaf常用模板语法理解只创建一个引擎实例ServletContext代码示例：多个Servlet共享数据监听器Listener代码示例：... 查看详情

认识模板引擎-thymeleaf(代码片段)

模板引擎thymeleaf介绍及使用(代码片段)

...擎2.1模板引擎介绍2.2模板引擎的作用2.3常见的模板引擎3.Thymeleaf3.1Thymeleaf介绍3.2Thymeleaf语法规则3.2.1标准表达式语法3.2.2th属性3.3Thymeleaf使用流程1.服务器生成动态页查看详情

模板引擎thymeleaf介绍及使用(代码片段)

thymeleaf搜索模板引擎(代码片段)

1.Thymeleaf是什么?Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中，并将HTML在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。T... 查看详情

thymeleaf模板引擎(代码片段)

Springboot需要使用thymeleaf模板引擎来编写前端页面，代替了SSM中的JSPcontroller的return页面的路径，默认为resources下的template 查看thymeleaf的配置文件，在template下默认使用.html页面 thymeleaf的语法：在html中导入thymeleaf的命名... 查看详情

thymeleaf-模板引擎(代码片段)

一，Thymeleaf简介Thymeleaf是一个跟Velocity、FreeMarker类似的模板引擎，它可以完全替代JSP。相较与其他的模板引擎，它有如下三个极吸引人的特点：1，Thymeleaf在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面... 查看详情

认识模板引擎-thymeleaf(代码片段)

thymeleaf模板引擎的使用(代码片段)

Thymeleaf模板引擎的使用一、模板引擎JSP、Velocity、Freemarker、Thymeleaf二、springboot推荐使用Thymeleaf模板引擎特点：语法更简单，功能更强大；1、引入Thymeleaf<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-bo... 查看详情

使用thymeleaf模板引擎(代码片段)

...必须为自己生气而道歉。】新书购买戳图购买>>>4.1Thymeleaf模板引擎介绍4.1.1Thymeleaf概述Thymeleaf是一个优秀的面向Java的XML/XHTML/HTML5页面模板，并具有丰富的标签语言和函数。因此& 查看详情

thymeleaf使用详解(代码片段)

Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP，Velocity，FreeMaker等，它也可以轻易的与SpringMVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比，Thymeleaf最大的特点是能够直接在浏览器中打开并正确显... 查看详情

014新的模板引擎(代码片段)

一.概述　　在springboot之中,抛弃了默认的thymeleaf作为模板引擎. 二.环境的搭建[1]配置依赖包　　我们首先需要声明的就是我们使用thymeleaf3来完成任务,比2要友好很多的.<properties><thymeleaf.version>3.0.2.RELEASE</thymeleaf.vers... 查看详情

springboot学习笔记——thymeleaf(代码片段)

...笔记——自动配置原理SpringBoot学习笔记——Web开发探究Thymeleaf模板引擎前端交给我们的页面，是html页面。如查看详情

springbootspringboot基础知识及整合thymeleaf模板引擎(代码片段)

...SpringBoot配置文件详解属性配置配置文件分类SpringBoot整合Thymeleaf模板引擎Thymeleaf简介整合总结🌕博客x主页：己不由心王道长🌕!🌎文章说明：spring🌎✅系列专栏：spring🌴本篇内容：对SpringBoot... 查看详情

springboot的推荐模板引擎-thymeleaf(代码片段)

1）添加对themeleaf的支持的依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency> 查看详情

11.模板引擎(代码片段)

1.模板引擎的分类　　JSP、Velocity、Freemarker、Thymeleaf（SpringBoot推荐）2.模板引擎的功能3.thymeleaf的使用3.1.thymeleaf的引入<properties><thymeleaf.version>3.0.9.RELEASE</thymeleaf.version><thymeleaf-layout-dialect.version>2.2.2</thymeleaf-lay... 查看详情

thymeleaf模板引擎基础知识(代码片段)

一、表达式分为四类：1.变量表达式$：获取容器上下文变量的值。举例：获取application域中的username：$application.username获取session域中的username：$session.username获取request域中的username：$request.username. 注意：没有使用域对象，直接... 查看详情

模板引擎thymeleaf的简单了解(代码片段)

...的tomcat，故不支持JSP了模板引擎：JSP、Velocity、Freemarker、ThymeleafSpringBoot推荐的Thymeleaf；语法更简单，功能更强大；1、引入thymeleaf；<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</ar... 查看详情