Thymeleaf介绍及基础语法

thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。

Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。

它的特点便是:开箱即用,Thymeleaf允许您处理六种模板,每种模板称为模板模式:

  • XML

  • 有效的XML

  • XHTML

  • 有效的XHTML

  • HTML5

  • 旧版HTML5

所有这些模式都指的是格式良好的XML文件,但Legacy HTML5模式除外,它允许您处理HTML5文件,其中包含独立(非关闭)标记,没有值的标记属性或不在引号之间写入的标记属性。为了在这种特定模式下处理文件,Thymeleaf将首先执行转换,将您的文件转换为格式良好的XML文件,这些文件仍然是完全有效的HTML5(实际上是创建HTML5代码的推荐方法)1

另请注意,验证仅适用于XML和XHTML模板。

然而,这些并不是Thymeleaf可以处理的唯一模板类型,并且用户始终能够通过指定在此模式下解析模板的方法和编写结果的方式来定义他/她自己的模式。这样,任何可以建模为DOM树(无论是否为XML)的东西都可以被Thymeleaf有效地作为模板处理。

2.Springboot整合thymeleaf

使用springboot 来集成使用Thymeleaf可以大大减少单纯使用thymleaf的代码量,所以我们接下来使用springboot集成使用thymeleaf.

实现的步骤为:

  • 创建一个sprinboot项目

  • 添加thymeleaf的起步依赖

  • 添加spring web的起步依赖

  • 编写html 使用thymleaf的语法获取变量对应后台传递的值

  • 编写controller 设置变量的值到model中

(1)创建工程

创建一个独立的工程springboot-thymeleaf,该工程为案例工程,不需要放到changgou工程中。

pom.xml依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
​
 <groupId>com.itheima</groupId>
 <artifactId>springboot-thymeleaf</artifactId>
 <version>1.0-SNAPSHOT</version>
​
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.1.4.RELEASE</version>
 </parent>
​
 <dependencies>
 <!--web起步依赖
 Tomcat 
 Springmvc  引赖Jar包  一个中心 三大组件
-->
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
​
 <!--thymeleaf配置-->
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 </dependencies>
</project>

(2)创建html

在resources中创建templates目录,在templates目录创建 demo1.html,代码如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <title>Thymeleaf的入门</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!--输出hello数据-->
<p th:text="${hello}"></p>
</body>
</html>

解释:

<html xmlns:th="http://www.thymeleaf.org">:这句声明使用thymeleaf标签

<p th:text="${hello}"></p>:这句使用 th:text="${变量名}" 表示 使用thymeleaf获取文本数据,类似于EL表达式。

(3)修改application.yml配置

创建application.yml,并设置thymeleaf的缓存设置,设置为false。默认加缓存的,用于测试。

spring:
 thymeleaf:
 cache: false

(4)控制层

创建controller用于测试后台 设置数据到model中。

创建com.itheima.controller.TestController,代码如下:

@Controller
@RequestMapping("/test")
public class TestController {
​
 /***
 * 访问/test/hello  跳转到demo1页面
 * @param model
 * @return
 */
 @RequestMapping("/hello")
 public String hello(Model model){
 model.addAttribute("hello","hello welcome");
 return "demo1";
 }
}

(5)测试

启动系统,并在浏览器访问

http://localhost:8080/test/hello

Thymeleaf基本语法

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf的入门</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!--输出hello数据-->
<!--<p th:text="${hello}"></p>-->
//直接输出值
输出在这里:[[${hello}]]   [[${session.name}]]

//提交form表单
<form th:action="@{/test/hello}" th:method="get">
    <input th:type="text"  th:name="id" th:value="1111111">
    <button>提交</button>
</form>

遍历学生list:
<div >
    <ul th:each="user:${users}">
       ID:<li th:text="${user.id}"></li>
       Name:<li th:text="${user.name}"></li>
       地点:<li th:text="${user.address}"></li>
    </ul>
</div>
遍历Map  Map java  java.keys 遍历Key 取Value      java.entrySet 遍历关系  通过关系可以取Key或Value值
<table>
    <tr th:each="map,m:${dataMap}">
        <td th:text="${map}"></td>
        <td th:text="${m.current.key}"></td>
        <td th:text="${m.current.value}"></td>

    </tr>
</table>

//遍历数组 
<table>
    <tr th:each="n,nm:${names}">
        <td th:text="${nm.count}"></td><td th:text="${n}"></td><td th:text="${nm.index}"></td>
    </tr>
</table>
//日期
<div>
    <span th:text="${#dates.format(now,'yyyy-MM-dd HH:ss:mm')}"></span>
</div>
//判断
<div>
    <span th:if="${(age>=18)}">终于长大了!</span>
    <span th:unless="${(age>=18)}">没有长大!</span>
</div>

</body>
th:include

可以直接引入th:fragment,在demo1.html中引入如下代码:

<div id="A" th:include="footer::copy"></div>

</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:fragment="hoho" http-equiv="Content-Type" content="text/html;charset=charset=utf-8">
    <title th:fragment="ttttt">fragment</title>
</head>
<body>
th:fragment 定义一个模块

可以定义一个独立的模块,创建一个footer.html代码如下

<div id="C" th:fragment="copy" >
    关于我们<br/>
</div>
</body>
</html>

后台:

package com.thymeleaf.controller;

import com.thymeleaf.pojo.User;
import javafx.scene.input.DataFormat;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;
import java.util.*;

/****
 * @Author:lx
 * @Description:
 * @Date 2019/8/24 15:17
 *****/
@Controller
public class ThymeleafController {

    //请求
    @RequestMapping("/hello/demo1")
    public String demo1(Model model, HttpSession session){
        model.addAttribute("hello","世界你好");
        session.setAttribute("name","哈哈");
        return "demo1";
    }
    @RequestMapping("/test/hello")
    public String demo2(String id){

        return "demo1";
    }

    /***
     * 访问/test/hello  跳转到demo1页面
     * @param model
     * @return
     */
    @RequestMapping("/hello")
    public String hello(Model model){
        model.addAttribute("hello","hello welcome");

        //集合数据
        List<User> users = new ArrayList<User>();
        users.add(new User(1,"张三","深圳"));
        users.add(new User(2,"李四","北京"));
        users.add(new User(3,"王五","武汉"));
        model.addAttribute("users",users);


        //Map定义
        Map<String,Object> dataMap = new HashMap<String,Object>();
        dataMap.put("No","123");//No=123
        dataMap.put("address","深圳");


        model.addAttribute("dataMap",dataMap);

        //存储一个数组
        String[] names = {"张三","李四","王五"};
        model.addAttribute("names",names);


        //日期
        model.addAttribute("now",new Date());//英国的 格林威志时间   --》String类型


        //if条件
        model.addAttribute("age",18);
        return "demo1";
    }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章