SpringBoot学习之应用开发篇（二）1.5 - thymeleaf页面展示

本文链接：https://blog.csdn.net/liyb1078422974/article/details/110492162

一、thymeleaf

1、pom.xml引入依赖包

<!-- Spring用于支持HTML，静态等文件和页面展示；跟父类同版本 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2、关于application-dev.properties配置

在Spring Boot中，默认的html页面地址为src/main/resources/templates，默认的静态资源地址为src/main/resources/static

######################## Thymeleaf配置 ########################
# 开启模板缓存（默认值：true，开发时建议关闭设成false）
spring.thymeleaf.cache=true
# 检查模板是否存在，然后再呈现
spring.thymeleaf.check-template=true
# 检查模板位置是否存在（默认值:true）
spring.thymeleaf.check-template-location=true
# Content-Type的值（默认值：text/html）
spring.thymeleaf.servlet.content-type=text/html
# 开启MVC Thymeleaf视图解析（默认值：true）
spring.thymeleaf.enabled=true
# 模板编码格式
spring.thymeleaf.encoding=UTF-8
# 要被排除在解析之外的视图名称列表，用逗号分隔
spring.thymeleaf.excluded-view-names=
# 要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值：HTML5)
spring.thymeleaf.mode=HTML5
# 在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）
spring.thymeleaf.prefix=classpath:/templates/
# 在构建URL时添加到视图名称后的后缀（默认值：.html）
spring.thymeleaf.suffix=.html
# Thymeleaf模板解析器在解析器链中的顺序。默认情况下，它排第一位。顺序从1开始，只有在定义了额外的TemplateResolver Bean时才需要设置这个属性。
spring.thymeleaf.template-resolver-order=
# 可解析的视图名称列表，用逗号分隔（注释这一行则会解析所有的，如果增加这一行只解析配置了的）
spring.thymeleaf.view-names=user_info

3、简单示例

3-1、在org.springboot.springboot01.bean下，新增实体类：User；在org.springboot.springboot01.controller下，新增控制层类：ThymeleafController

// 用户实体信息
public class User {
    private String id;
    private String userName;
    private String realName;
    private String password;
    private String roleId;
    private String roleName;
    private String phoneNo;

    public User(String userName, String realName, String password, String roleName, String phoneNo) {
        this.userName = userName;
        this.realName = realName;
        this.password = password;
        this.roleName = roleName;
        this.phoneNo = phoneNo;
    }
    // get和set省略了，自己自动生成

// 控制层，用于显示用户信息
@Controller
public class ThymeleafController {

    @RequestMapping("/showUserInfo")
    public String showUserInfo(Model model) {
        List<User> userList = new ArrayList<>();
        userList.add(new User("zhangsan1", "张三1", "1234561", "超级管理员", "17777777777"));
        userList.add(new User("zhangsan2", "张三2", "1234562", "管理员", "17677777777"));
        userList.add(new User("zhangsan3", "张三3", "1234563", "运维", "19999999999"));
        userList.add(new User("zhangsan4", "张三4", "1234564", "技术", "18566666666"));
        userList.add(new User("zhangsan5", "张三5", "1234565", "财务", "18666666666"));
        userList.add(new User("zhangsan6", "张三6", "1234566", "运营", "18766666666"));

        model.addAttribute("userList", userList);
        return "user_info";
    }
}

3-2、在src/main/resources下，新增templates、static/css和static/js路径，并分别在其底下新增*.html、*.css和*.js文件，如下所示

① 在static/css下，新增style.css文件

table {
	margin: 20px 40px 20px 0px;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: automatic;
	word-wrap: break-all
}
table>tbody>tr:nth-of-type(odd) {
	background-color: #F7F7F7
}

th, td {
	padding: 8px;
	text-align: left;
	vertical-align: middle;
	font-weight: normal;
	font-size: 12px;
	border-bottom: 1px solid #fff;
}

th {
	padding-bottom: 10px;
    color: #fff;
    font-weight: 700;
    background: rgba(66, 185, 131, .9)
}

td {
	border-bottom-width: 1px
}

② 在templates下，现在user_info.html页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息显示</title>
    <link rel="stylesheet" th:href="@{/css/style.css}", type="text/css">
</head>
<body>
    <table>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>密码</th>
            <th>角色</th>
            <th>手机号</th>
        </tr>
        <tr th:each="list,stat : ${userList}">
            <td th:text="${stat.count}"></td>
            <td th:text="${list.userName}"></td>
            <td th:text="${list.realName}"></td>
            <td th:text="${list.password}"></td>
            <td th:text="${list.roleName}"></td>
            <td th:text="${list.phoneNo}"></td>
        </tr>
    </table>

</body>
</html>

3-3、项目目录