Thymeleaf模板引擎相关知识和应用

简介

现如今，进入了Spring boot之后，我们不再使用jsp进行程序的编写了，取而代之的，是模板引擎，当然了，模板引擎也分为了好几种，我们现在最常使用的就是Thymeleaf，它有一个好处就是可以自动进行前缀和后缀的配置

在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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.itany</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--web相关依赖-->
        <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>
        <!--热部署-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

配置热应用部署

spring:
  thymeleaf:
    #关闭模板缓存
    cache: false
server:
  servlet:
    #配置应用的根路径
    context-path: /thymeleaf
  #应用的访问路径
  port: 8909

建立数据模型层

package com.itany.moxing;

import java.util.Date;

public class User {
    public User() {
    }

    public User(Integer userId, String name, Integer gender) {
        this.userId = userId;
        this.name = name;
        this.gender = gender;
        this.createTime = new Date();
    }

    //用户ID
    private Integer userId;
    //用户姓名
    private String name;
    //性别
    private Integer gender;
    //创建时间
    private Date createTime;
    //省略get set方法 。。。。
}

建立数据存储层

package com.itany.cunchu;

import com.itany.moxing.User;
import org.springframework.context.annotation.Configuration;

import java.util.ArrayList;
import java.util.List;
import java.util.Optional;
import java.util.Random;
@Configuration
public class UserRepository {
    //模拟数据库存储
    private List<User> userList = new ArrayList<>();

    //初始化仓储数据,实际应该重数据库中获取
    {
        User user;
        for (int i = 1; i <= 20; i++) {
            user = new User(i, i+1, i % 2);
            userList.add(user);
        }
    }

    public Optional<User> findById(Integer id) {
        return Optional.ofNullable(userList.get(id));
    }
    public List<User> findAll() {
        return userList;
    }

}

建立控制层

package com.itany.Controller;

import com.itany.cunchu.UserRepository;
import com.itany.moxing.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.List;

@Controller
public class UserController {

    @Autowired
    UserRepository userRepository;

    @GetMapping(value = {"/","/index"})
    public ModelAndView index(HttpSession session){
        User user=new User(0,1,0);
        //往session中把当前用户信息放进去
        session.setAttribute("user",user);
        ModelAndView modelAndView=new ModelAndView("index");
        List<User> userList=userRepository.findAll();
        modelAndView.addObject(userList);
        modelAndView.addObject("id",0);
        HashMap map=new HashMap();
        map.put("totalPage",5);
        map.put("totalRecord",50);
        modelAndView.addObject("page",map);
        return modelAndView;
    }

}

然后就是通过html页面来进行显示页面

尾部页面

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<body>
<footer id="footer" th:fragment="footer">
    <div>
        <h2 style="text-align: center">网站的通用底部模板</h2>
    </div>
    <div>
        <a href="https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html">Thymeleaf官方文档</a>
    </div>
</footer>
</body>
</html>

头部页面

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<body>
<header  th:fragment="header">
    <div>
        <h2 >SpringBoot Thymeleaf使用教程</h2>
    </div>
    <div>
        <div>
            欢迎访问我的博客：<a href="https://blog.csdn.net/ming19951224">https://blog.csdn.net/ming19951224</a>
        </div>
        <div >
            欢迎访问我的github地址：<a href="https://github.com/Dominick-Li">https://github.com/Dominick-Li</a>
        </div>
    </div>
</header>
</body>
</html>

总页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>引入网站的头尾片段</title>
</head>
<body>
<!--导入网站通用的头部标签模板-->
<header th:include="common/header :: header"></header>
<div id="body">
    网站的主体内容
</div>
<!--导入网站通用的尾部模板-->
<footer th:include="common/footer :: footer" ></footer>
</body>
</html>

效果如下：