springboot+thymeleaf template
1. Create springboot project
1.1pom dependencies
<?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 Configure 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. Control layer
2.1 controller layer
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 Entity layer
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. Style 3.1app.css in the front-end static directory
.app{
width:500px;
height: 500px;
background:#000000;
}
3.2 Main page 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 Block-level elements (calls between components)
<!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 quickly builds the thymeleaf template engine
<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>$Title</title>
</head>
<body>
</body>
</html>