springboot——7Thymeleaf模板引擎,基础语法

Thymeleaf模板引擎

我们为什么不用jsp呢,即熟悉,又方便?
我们用的是嵌入式的Tomcat,所以现在默认是不支持jsp的。

所以那么spring推荐的模板引擎还有些什么?
jsp,thymeleaf,freemarker

模板引擎的思想是
在这里插入图片描述
结合模板和数据,解析输出最终页面

第一步引入依赖,现在都是基于3.x版本的才可以用。
了解它
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.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

那么现在看一下,maven帮忙下载了一些什么东西?
在这里插入图片描述

第二步?没有第二步,在对应目录下写HTML吧(需要在html标签上加上属性xmlns:th="http://www.thymeleaf.org"
创建一个TestController

@Controller
public class TestController {

    @GetMapping("/thyme")
    public String tyeme(Model model){

        model.addAttribute("msg","<h1>快乐的玩耍吧~</h1>");
        return "test";
    }
}

创建一个test.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>
    <div th:utext="${msg}"/>
</body>
</html>

模板引擎的作用就是写一个动态模板,表达式等

springboot有ThymeleafProperties配置类,有一些配置,可以自己去查看配置类属性

重点是语法

语法

1、可以使用任意的 th:attr 来替换Html中原生属性的值!
在这里插入图片描述

html中的表达式还有

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

那么关于html中常用的foreach,进行演示说明一下

Controller.class


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

test.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>狂神说</title>
</head>
<body>
<h1>测试页面</h1>

<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>
## springboot整合thymeleaf ### 1. 导入起步依赖 ```xml org.springframework.boot spring-boot-starter-thymeleaf ``` ### 2. 更改引入版本 ```xml 3.0.2.RELEASE 2.1.1 ``` > 1. springboot自带的thymeleaf依赖为2.1.3版本,使用thymeleaf-layout-dialect版本为2以下版本。 > 2. 使用3或3以上的thymeleaf时,需要thymeleaf-layout-dialect的版本为2或以上。 > 3. 锁定thymeleaf版本时不能使用thymeleaf.version标签,会和springboot内部的依赖标签冲突。应当使用springboot-thymeleaf.version标签来锁定版本。 ### 3. 配置文件配置 ```properties spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.check-template-location=true spring.thymeleaf.suffix=.html spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.mode=HTML spring.thymeleaf.cache=false ``` > spring.thymeleaf.cache为缓存,需要热部署时,需要设置为false ## 语法 ### 1. 替换标签体内容 ```html 显示欢迎 显示欢迎 ``` ### 2. 替换属性 ```html 显示欢迎 ``` ### 3. 在表达式中访问属性域 ```html 访问属性域 访问请求域 方式一 访问请求域 方式二 访问Session域 访Session域 方式一 访问Application域 方式一 ``` ### 4. 解析url地址 ```html 解析URL地址,获取ContextPath的值 @{}是把ContextPath的值附加到指定的地址前 @{}是把ContextPath的值附加到指定的地址前 ``` ### 5. 直接执行表达式 ```html 直接执行表达式 无转义效果 : [[${attrRequestScope}]] 有转义效果 : [(${attrRequestScope})] ``` ### 6. 分支与迭代 #### 1. if 判断 ```html if判断字符串是否为空 attrRequestScope不为空显示 ~~~attrRequestScope为空显示~~~~ ``` #### 2. 测试循环 ```html 测试循环 ``` > 1. 使用th:each进行集合数据迭代 > 2. th:each="声明变量:${集合}" > 3. th:each 用在哪个标签上,哪个标签就会出现多次 ### 7. 引入外部代码 1. 要被引入的代码 include/part.html ```html 被包含的内容1111 被包含的内容2222 被包含的内容3333 ``` 2. 需要引入的页面 ```html ``` 3. 渲染后的页面源码 ```html 被包含的内容1111 被包含的内容2222 被包含的内容3333 ``` > 1. " :: "左边的值拼前后缀后必须能够找到要包含的文件。 > 2. " :: " 右边的值是代码片段的名字 ,就是th:fragment的值。 > 3. insert将代码原样引入。 > 4. replace使用被引入的代码和属性替换原有的。 > 5. include使用被引入的代码div内部的代码。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值