zoukankan      html  css  js  c++  java

  • SpringBoot之Thymeleaf模板引擎如何运用？案例详解

     

    SpringBoot之Thymeleaf模板引擎

    根据B站狂神学java的笔记

    模板引擎Thymeleaf

    前端想要显示数据，我们以前是把页面转换成jsp。这样我们就能够实现数据的显示，及交互等。 jsp支持非常强大的功能，包括能写Java代码 。但是我们使用SpringBoot项目是jar方式而不是war。我们还是使用嵌入式的Tomcat，但现在springBoot默认是不支持jsp的。那该使用什么呢？
    第二要注意：光理论是不够的。在此免费赠送5大JAVA架构项目实战教程及大厂面试题库，有兴趣的可以进裙 783802103获取，没基础勿进哦！

    SpringBoot推荐你可以来使用模板引擎：

    模板引擎，我们其实大家听到很多，其实jsp就是一个模板引擎，还有用的比较多的freemarker，包括SpringBoot给我们推荐的Thymeleaf，模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的，什么样一个思想呢我们来看一下这张图：

    模板引擎的作用就是使用表达式解析后台的数据。

    引入Thymeleaf

    怎么引入呢，对于springboot来说，什么事情不都是一个start的事情嘛，我们去在项目中引入一下。给大家三个网址：

    Thymeleaf 官网：https://www.thymeleaf.org/

    Thymeleaf 在Github 的主页：https://github.com/thymeleaf/thymeleaf

    Spring官方文档：找到我们对应的版本

    https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

    找到对应的pom依赖：可以适当点进源码看下本来的包！

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

    官网的jar包
<dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
       </dependency>

    Thymeleaf分析

    前面呢，我们已经引入了Thymeleaf，那这个要怎么使用呢？

    我们首先得按照SpringBoot的自动配置原理看一下我们这个Thymeleaf的自动配置规则，在按照那个规则，我们进行使用。

    我们去找一下Thymeleaf的自动配置类：ThymeleafProperties

    @ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;

	public static final String DEFAULT_PREFIX = "classpath:/templates/";

	public static final String DEFAULT_SUFFIX = ".html";

    我们可以在其中看到默认的前缀和后缀！

    我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。

    使用thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可！

    测试

    首先编写一个TestController

    @Controller
public class TestController {
    @RequestMapping("/test")
    public String test1(){
        //自动解析为classpath:/templates/test.html
        return "test";
    }
}

    在template建立test.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf测试页面</title>
</head>
<body>
我进来了
</body>
</html>

    运行测试：

    thymeleaf语法

    要学习语法，还是参考官网文档最为准确，我们找到对应的版本看一下；

    Thymeleaf 官网：https://www.thymeleaf.org/ ， 简单看一下官网！我们去下载Thymeleaf的官方文档！

    我们做个最简单的练习 ：我们需要查出一些数据，在页面中展示

    1.修改测试请求，增加数据传输

    @Controller
public class TestController {
    @RequestMapping("/test")
    public String test1(Model model){
        //自动解析为classpath:/templates/test.html
        model.addAttribute("msg","hello Thymeleaf!");
        return "test";
    }
}

    2.我们首先需要导入命名空间约束

    我们可以去官方文档的#3中看一下命名空间拿来过来：

    <html lang="en"  xmlns:th="http://www.thymeleaf.org">

    3.编写页面

    <!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf测试页面</title>
</head>
<body>
我进来了
<div th:text="${msg}"></div>
</body>
</html>

    4.测试：

    Thymeleaf使用语法

    1、我们可以使用任意的 th:attr 来替换Html中原生属性的值！
    2、表达式

    Simple expressions:（表达式语法）
Variable Expressions: ${...}：获取变量值；OGNL；
    1）、获取对象的属性、调用方法
    2）、使用内置的基本对象：#18
         #ctx : the context object.
         #vars: the context variables.
         #locale : the context locale.
         #request : (only in Web Contexts) the HttpServletRequest object.
         #response : (only in Web Contexts) the HttpServletResponse object.
         #session : (only in Web Contexts) the HttpSession object.
         #servletContext : (only in Web Contexts) the ServletContext object.

    3）、内置的一些工具对象：
　　　　　　#execInfo : information about the template being processed.
　　　　　　#uris : methods for escaping parts of URLs/URIs
　　　　　　#conversions : methods for executing the configured conversion service (if any).
　　　　　　#dates : methods for java.util.Date objects: formatting, component extraction, etc.
　　　　　　#calendars : analogous to #dates , but for java.util.Calendar objects.
　　　　　　#numbers : methods for formatting numeric objects.
　　　　　　#strings : methods for String objects: contains, startsWith, prepending/appending, etc.
　　　　　　#objects : methods for objects in general.
　　　　　　#bools : methods for boolean evaluation.
　　　　　　#arrays : methods for arrays.
　　　　　　#lists : methods for lists.
　　　　　　#sets : methods for sets.
　　　　　　#maps : methods for maps.
　　　　　　#aggregates : methods for creating aggregates on arrays or collections.
==================================================================================

  Selection Variable Expressions: *{...}：选择表达式：和${}在功能上是一样；
  Message Expressions: #{...}：获取国际化内容
  Link URL Expressions: @{...}：定义URL；
  Fragment Expressions: ~{...}：片段引用表达式

Literals（字面量）
      Text literals: "one text" , "Another one!" ,…
      Number literals: 0 , 34 , 3.0 , 12.3 ,…
      Boolean literals: true , false
      Null literal: null
      Literal tokens: one , sometext , main ,…
      
Text operations:（文本操作）
    String concatenation: +
    Literal substitutions: |The name is ${name}|
    
Arithmetic operations:（数学运算）
    Binary operators: + , - , * , / , %
    Minus sign (unary operator): -
    
Boolean operations:（布尔运算）
    Binary operators: and , or
    Boolean negation (unary operator): ! , not
    
Comparisons and equality:（比较运算）
    Comparators: > , < , >= , <= ( gt , lt , ge , le )
    Equality operators: == , != ( eq , ne )
    
Conditional operators:条件运算（三元运算符）
    If-then: (if) ? (then)
    If-then-else: (if) ? (then) : (else)
    Default: (value) ?: (defaultvalue)
    
Special tokens:
    No-Operation: _

    测试：

    编写controller

    @Controller
public class TestController2 {
    @RequestMapping("/test1")
    public String test2(Map<String,Object> map){
        map.put("msg","<h1>Hello</h1>");
        map.put("users", Arrays.asList("qi","wuxin"));
        return "test";
    }
}

    测试页面

    <!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf测试页面</title>
</head>
<body>
我进来了
<!--转义-->
<div th:text="${msg}"></div>
    <!--不转义-->
<div th:utext="${msg}"></div>
<!--遍历-->
<h4 th:each="user: ${users}" th:text="${user}"></h4>
<!--行内写法-->
<h4 th:each="user: ${users}">[[${user}]]</h4>
</body>
</html>

    结果页面

    最后注意：光理论是不够的。在此免费赠送5大JAVA架构项目实战教程及大厂面试题库，有兴趣的可以进裙 783802103获取，没基础勿进哦！
    本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理
  • 相关阅读:
    HDU 1501 Zipper（DFS）
    HDU 2181 哈密顿绕行世界问题（DFS）
    HDU 1254 推箱子（BFS）
    HDU 1045 Fire Net (DFS)
    HDU 2212 DFS
    HDU 1241Oil Deposits (DFS)
    HDU 1312 Red and Black (DFS)
    HDU 1010 Tempter of the Bone（DFS+奇偶剪枝）
    HDU 1022 Train Problem I（栈）
    HDU 1008 u Calculate e
  • 原文地址：https://www.cnblogs.com/chengxuyuanaa/p/13042970.html
Copyright © 2011-2022 走看看