千峰商城-springboot项目实战06-Thymeleaf

Thymeleaf是一种类似于JSP的动态网页技术。

1.Thymeleaf简介

JSP必须依赖于Tomcat运行，不能直接运行在浏览器中。

HTML可以直接运行在浏览器中，但不能接收控制器传递的数据。

Thymeleaf是一种既保留了HTML的后缀，能够直接在浏览器运行的能力，又实现了JSP显示动态数据的功能——静能查看页面效果，动则可以显示数据。

2.Thymeleaf动态技术的使用：

springboot应用对Thymeleaf提供了良好的支持。

1.添加Thymeleaf的starter依赖

在pom.xml中添加依赖：spring-boot-starter-thymeleaf

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

2.创建Thymeleaf模板。

Thymeleaf模板就是HTML文件。

springboot应用中，在 resource\templates 目录就是用来存放页面模板的。

在 resource\templates 目录下新建一个HTML文件 test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
test
</body>
</html>

在 resource\static 目录下新建一个HTML文件 test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
test2
</body>
</html>

3.测试

在浏览器中访问：http://localhost:8081/test2.html

因为test2.html在tatic静态资源里，所以可以访问。

而访问 http://localhost:8081/test.html 时：

访问不到。因为除了static文件夹可以放行外，其余文件夹都不能放行。

说明：static目录下的资源被定义为静态资源，springboot应用默认放行。如果将HTML页面创建在static目录下，是可以直接访问的。

　　　templates目录下的文件会被定义为动态网页模板，springboot应用会拦截templates中定义的资源，如果将HTML文件定义在templates目录，则必须通过控制器跳转访问。

4.在com.qfedu.springboot.ssm文件下新建一个包controller,然后在controller包中新建一个类PageController，用于转发允许“直接访问”的页面请求。

PageController.java:

package com.qfedu.springboot.ssm.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
//@RequestMapping("/page")
public class PageController {
    
    @RequestMapping("/test.html")
    public String test(){
        return "test";
    }
    
}

5.启动

访问 http://localhost:8081/test.html

实际情况：请求“test.html”被spring mvc拦截了，转发到了PageController中，PageController又将请求跳转到了test.html中。

所以 templates目录下的文件都必须被controller转发。

6.Thymeleaf 服务器可以不启动，直接查看页面样式。

7.模拟传输数据到test.html

在controller包中创建BookController类

package com.qfedu.springboot.ssm.controller;

import com.qfedu.springboot.ssm.beans.Book;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/book")
public class BookController {

    @RequestMapping("/query")
    public String queryBook(int bookId, Model model){
        Book book = new Book(bookId,"java","author");
        model.addAttribute("book",book);
        return "test";
    }

}

在Beans包中创建Book实体类

package com.qfedu.springboot.ssm.beans;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Book {
    private int bookId;
    private String bookName;
    private String bookAuthor;
}

在test.html中：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
test
<hr/>
<label th:text="${book.bookName}">图书名称</label>
</body>
</html>

8.观看静态界面：