• springboot Thymeleaf


    模板引擎

    模板引擎作用:根据页面模板和数据生成展示页面

    初识Thymeleaf

    引入Thymeleaf

    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

            <dependency>
                <groupId>org.thymeleaf</groupId>
                <artifactId>thymeleaf-spring5</artifactId>
            </dependency>
            <dependency>
                <groupId>org.thymeleaf.extras</groupId>
                <artifactId>thymeleaf-extras-java8time</artifactId>
            </dependency>

    编写模板

    1、模板位置(两次敲击Shift)

    @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";

    2、thymeleaf应用

    https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#using-texts

    添加thymeleaf约束(xmlns:th="http://www.thymeleaf.org"),方便提示

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div th:text="${msg}"></div>
    </body>
    </html>

    编写Controller

    @Controller
    public class TestController {
    
        @GetMapping("/test")
        public String test(Model model){
            model.addAttribute("msg","Hello Thymeleaf");
            return "test";
        }
    }

    Thymeleaf 语法学习

    表达式:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax

    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: _

    属性设置:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#attribute-precedence

    Order特征Attributes备注
    1 Fragment inclusion th:insert
    th:replace
    片段包含:相当于include
    2 Fragment iteration th:each 循环
    3 Conditional evaluation th:if
    th:unless
    th:switch
    th:case
    判断
    4 Local variable definition th:object
    th:with
     
    5 General attribute modification th:attr
    th:attrprepend
    th:attrappend
    通用属性修改
    6 Specific attribute modification th:value
    th:href
    th:src
    ...
    th:可以修饰Html的标签属性
    7 Text (tag body modification) th:text
    th:utext

    转义特殊字符

    不转义特殊字符

    8 Fragment specification th:fragment 声明片段
    9 Fragment removal th:remove  

    练习测试

    1、Controller

        @RequestMapping("/t2")
        public String test2(Map<String,Object> map){
            //存入数据
            map.put("msg","<h1>Hello</h1>");
            map.put("users", Arrays.asList("xiaoqiang","dahuang"));
            //classpath:/templates/test.html
            return "test";
        }

    2、html

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div th:text="${msg}"></div>
    
    <!--不转义-->
    <div th:utext="${msg}"></div>
    
    <!--遍历数据-->
    <!--th:each每次遍历都会生成当前这个标签:官网#9-->
    <h4 th:each="user :${users}" th:text="${user}"></h4>
    
    <h4>
        <!--行内写法:官网#12-->
        <span th:each="user:${users}">[[${user}]]</span>
    </h4>
    </body>
    </html>
  • 相关阅读:
    安装mysql
    工坊第十天
    工坊第九天
    友链qaq
    About me
    好耶
    [Ynoi2011]初始化
    [Ynoi2013]大学
    [Ynoi2015]盼君勿忘
    [Ynoi2019模拟赛]Yuno loves sqrt technology III
  • 原文地址:https://www.cnblogs.com/WarBlog/p/15119560.html
Copyright © 2020-2023  润新知