springboot+thymeleaf模板

springboot+thymeleaf模板
1.创建springboot项目
1.1pom依赖

<?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.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zhsh</groupId>
    <artifactId>thymeleaftest</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>thymeleaftest</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

1.2配置application.properties

server.port=8080
server.servlet.context-path=/
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=utf-8
spring.thymeleaf.mode=HTML5
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.web.resources.static-locations=classpath:/static/,classpath:/templates/

2.控制层
2.1controller层

package com.zhsh.thymeleaftest.controller;
import com.zhsh.thymeleaftest.bean.UserVo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

/**
 * @description:
 * @author:cyz
 * @time:2021/8/29 0029
 */
@Controller
public class testController {
    /**
      *@Description:访问首页
      *@params:
      *@return:
      *@Author:cyz
      *@Date:2021/8/29 0029
      */
    @RequestMapping(value="/index")
    public String  index(Model model){
        List<String> list=new ArrayList<>();
        UserVo user=new UserVo();
        user.setUsername("cyz");
        user.setSex("1");
        user.setAge("25");
        user.setCurrose("语文");
        user.setIsVip("1");
        list.add("java");
        list.add("php");
        list.add(".net");
        user.setTag(list);
        model.addAttribute("user",user);
        return "index";
    }
}

2.2实体层

package com.zhsh.thymeleaftest.bean;

import lombok.Data;

import java.util.List;

/**
 * @description:
 * @author:cyz
 * @time:2021/8/29 0029
 */
@Data
public class UserVo {
    private String username;
    private String age;
    private String sex;
    private String currose;
    private String isVip;
    private List<String> tag;
}

3.前端static目录下样式
3.1app.css

.app{
    width:500px;
    height: 500px;
    background:#000000;
}

3.2主页面index.html

<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>这是一个thymeleaf页面</title>
    <link rel="stylesheet" th:href="@{app.css}"/>
</head>
<body>
这是一个thymeleaf页面
<div class="app"></div>
<h2 th:text="${user.username}"></h2>
<p th:text="${user.age}">
<div th:object="${user}">
    <h2 th:text="*{username}"></h2>
     <p th:text="*{age}"></p>
</div>
<!--th:if-->
<p th:if="${user.isVip=='0'}">会员</p>
<!--th:each-->
<ul>
    <li th:each="tag:${user.tag}" th:text="${tag}"></li>
</ul>
<!--th:switch-->
<div th:switch="${user.sex}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">默认</p>
</div>
<!--replace com1-->
<div th:replace="~{component::com1}"></div>
<div th:insert="~{component::com1}"></div>
<!--id com-->
<div th:insert="~{component::#com2}"></div>
<div th:insert="~{component::com3('传递参数')}"></div>
<div th:insert="~{component::com4(~{::#message})}">
    <p id="message">替换的模板</p>
</div>
<script th:inline="javascript">
    const user=/*[[${user}]]*/{};
    console.log(user)

</script></body>
</html>

3.3块级元素（组件间的调用）

<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>内嵌块元素</title>
</head>
<body>
<div th:fragment="com1">
    com1
<!--/*@thymesVar id="user" type="com.zhsh.thymeleaftest.bean.UserVo"*/-->
    <h2 th:text="${user.username}"></h2>
</div>
<div id="com2">
    com2
</div>
<div th:fragment="com3(message)">
    <p th:text="${message}"></p>
</div>
<div th:fragment="com4(message)">
    <p th:replace="${message}"></p>
</div>
</body>
</html>

4>springboot快速构建thymeleaf模板引擎

<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
          <title>$Title</title>
    </head>
    <body>
    </body>
</html>