SpringBoot整合Thymeleaf

原创

qq62a994c5163f0 2022-06-17 22:54:19 ©著作权

文章标签 spring html 相对路径 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者qq62a994c5163f0的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、先创建项目

SpringBoot整合Thymeleaf_html

SpringBoot整合Thymeleaf_相对路径_02

SpringBoot整合Thymeleaf_相对路径_03

SpringBoot整合Thymeleaf_spring_04

在pom文件里添加依赖

SpringBoot整合Thymeleaf_相对路径_05

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 http://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.1.7.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com</groupId>
    <artifactId>gongspringthymeleaf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>gongspringthymeleaf</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-web</artifactId>
        </dependency>

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

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

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

</project>

目录位置： src/main/resources/templates
templates：该目录是安全的。意味着该目录下的内容是不允许外界直接访问的。

SpringBoot整合Thymeleaf_相对路径_06

2. Thymeleaf 的基本使用
2.1Thymeleaf 特点：
Thymelaef 是通过他特定语法对 html 的标记做渲染。

2.2 编写 Controller

新建DomeController类

SpringBoot整合Thymeleaf_相对路径_07

package com.gongspringthymeleaf.controller;

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

@Controller
public class DemoController {
    @RequestMapping("/show")
    public String showInfo(Model model){
         model.addAttribute("msg","Thymeleaf 第一个案例");
         return "index";
    }
}

2.3 创建视图 .html

templates创建index.html

SpringBoot整合Thymeleaf_spring_08

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thymeleaf入门</title>
</head>
<body>
    <span th:text="Hello"></span>
    <hr/>
    <span th:text="${msg}"></span>
</body>
</html>

2.4编写启动器

SpringBoot整合Thymeleaf_html_09

package com.gongspringthymeleaf;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * 
 *Thymeleaf入门案例
 *
 */
@SpringBootApplication
public class App {

    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

运行启动类

SpringBoot整合Thymeleaf_spring_10

SpringBoot整合Thymeleaf_spring_11

在浏览器中打开

SpringBoot整合Thymeleaf_html_12

3. Thymeleaf 语法详解
3.1 变量输出与字符串操作

3.1.1 th:text
th:text
在页面中输出值

3.1.2 th:value
th:value
可以将一个值放入到 input 标签的 value 中

在index.html插入以下语句

SpringBoot整合Thymeleaf_spring_13

<hr/>
 <input type="text" name="username" th:value="${msg}"/>

运行启动类

SpringBoot整合Thymeleaf_html_14

SpringBoot整合Thymeleaf_html_15

在浏览器打开

SpringBoot整合Thymeleaf_html_16

3.1.3 判断字符串是否为空
Thymeleaf 内置对象

注意语法：
1，调用内置对象一定要用#
2，大部分的内置对象都以 s 结尾 strings、 numbers、 dates

${#strings.isEmpty(key)}
判断字符串是否为空，如果为空返回 true，否则返回 false

添加语句

SpringBoot整合Thymeleaf_html_17

<hr/>
<span th:text="${#strings.isEmpty(msg)}"></span>

运行启动类

SpringBoot整合Thymeleaf_spring_18

SpringBoot整合Thymeleaf_spring_19

在浏览器中可以看到

SpringBoot整合Thymeleaf_html_20

${#strings.contains(msg,'T')}
判断字符串是否包含指定的子串，如果包含返回 true，否则返回 false

SpringBoot整合Thymeleaf_spring_21

<hr/>
<span th:text="${#strings.contains(msg,'9')}"></span>
<span th:text="${#strings.contains(msg,'T')}"></span>

运行启动类

SpringBoot整合Thymeleaf_html_22

SpringBoot整合Thymeleaf_html_23

在浏览器中我们能看到

SpringBoot整合Thymeleaf_相对路径_24

${#strings.startsWith(msg,'a')}

判断当前字符串是否以子串开头，如果是返回 true，否则返回 false

SpringBoot整合Thymeleaf_相对路径_25

<hr/>
    <span th:text="${#strings.startsWith(msg,'a')}"></span>
    <span th:text="${#strings.startsWith(msg,'T')}"></span>

运行启动类

SpringBoot整合Thymeleaf_spring_26

SpringBoot整合Thymeleaf_相对路径_27

在浏览器中打开

SpringBoot整合Thymeleaf_html_28

${#strings.endsWith(msg,'a')}

判断当前字符串是否以子串结尾，如果是返回 true，否则返回 false

SpringBoot整合Thymeleaf_html_29

<hr/>
    <span th:text="${#strings.endsWith(msg,'a')}"></span>
    <span th:text="${#strings.endsWith(msg,'案例')}"></span>

运行启动类

SpringBoot整合Thymeleaf_html_30

SpringBoot整合Thymeleaf_相对路径_31

SpringBoot整合Thymeleaf_相对路径_32

${#strings.length(msg)}

返回字符串的长度

SpringBoot整合Thymeleaf_spring_33

<hr/>
    <span th:text="${#strings.length(msg)}"></span>

运行启动类

SpringBoot整合Thymeleaf_spring_34

SpringBoot整合Thymeleaf_html_35

SpringBoot整合Thymeleaf_相对路径_36

${#strings.indexOf(msg,'h')}

查找子串的位置，并返回该子串的下标，如果没找到则返回-1

SpringBoot整合Thymeleaf_spring_37

<hr/>
    <span th:text="${#strings.indexOf(msg,'h')}"></span>

运行启动类

SpringBoot整合Thymeleaf_html_38

SpringBoot整合Thymeleaf_相对路径_39

SpringBoot整合Thymeleaf_spring_40

${#strings.substring(msg,13)}
${#strings.substring(msg,13,15)}

截取子串，用户与 jdk String 类下 SubString 方法相同

SpringBoot整合Thymeleaf_html_41

<hr/>
    <span th:text="${#strings.substring(msg,13)}"></span>
    <span th:text="${#strings.substring(msg,13,14)}"></span>

运行启动类

SpringBoot整合Thymeleaf_spring_42

SpringBoot整合Thymeleaf_html_43

SpringBoot整合Thymeleaf_相对路径_44

${#strings.toUpperCase(msg)}
${#strings.toLowerCase(msg)}
字符串转大小写。
SpringBoot整合Thymeleaf_html_45

<hr/>
    <span th:text="${#strings.toUpperCase(msg)}"></span>
    <span th:text="${#strings.toLowerCase(msg)}"></span>

运行启动类

SpringBoot整合Thymeleaf_相对路径_46

SpringBoot整合Thymeleaf_html_47

SpringBoot整合Thymeleaf_html_48

3.2 日期格式化处理

在controller类里添加以下语句

SpringBoot整合Thymeleaf_html_49

${#dates.format(key)}
格式化日期，默认的以浏览器默认语言为格式化标准

SpringBoot整合Thymeleaf_相对路径_50

<hr/>
    <span th:text="${#dates.format(key)}"></span>

运行启动类

SpringBoot整合Thymeleaf_相对路径_51

SpringBoot整合Thymeleaf_html_52

SpringBoot整合Thymeleaf_html_53

${#dates.format(key,'yyy/MM/dd')}
按照自定义的格式做日期转换

SpringBoot整合Thymeleaf_相对路径_54

<hr/>
    <span th:text="${#dates.format(key,'yyy/MM/dd')}"></span>

运行启动类

SpringBoot整合Thymeleaf_spring_55

SpringBoot整合Thymeleaf_html_56

SpringBoot整合Thymeleaf_相对路径_57

${#dates.year(key)}
${#dates.month(key)}
${#dates.day(key)}
year：取年
Month：取月
Day：取日

SpringBoot整合Thymeleaf_相对路径_58

<hr/>
    <span th:text="${#dates.year(key)}"></span>-
    <hr/>
    <span th:text="${#dates.month(key)}"></span>-
    <hr/>
    <span th:text="${#dates.day(key)}"></span>

运行启动类

SpringBoot整合Thymeleaf_spring_59

SpringBoot整合Thymeleaf_spring_60

SpringBoot整合Thymeleaf_html_61

3.3 条件判断

3.3.1th:if

性别：男


性别：女


新建index2.html

SpringBoot整合Thymeleaf_spring_62

在DomeCotroller类加入以下内容

SpringBoot整合Thymeleaf_相对路径_63

@RequestMapping("/show2")
    public String showInfo2(Model model){
        model.addAttribute("sex","男");
        return "index2";
    }

在index2.html加入

SpringBoot整合Thymeleaf_html_64

<span th:if="${sex} == '男'">
        性别：男
    </span>
<span th:if="${sex} == '女'">
        性别：女
    </span>

运行启动类

SpringBoot整合Thymeleaf_html_65

SpringBoot整合Thymeleaf_spring_66

SpringBoot整合Thymeleaf_spring_67

3.3.2 th:switch

添加以下语句

SpringBoot整合Thymeleaf_spring_68

SpringBoot整合Thymeleaf_spring_69

<hr/>
    <div th:switch="${id}">
        <span th:case="1">ID为1</span>
        <span th:case="2">ID为2</span>
        <span th:case="3">ID为3</span>
    </div>

运行启动类

SpringBoot整合Thymeleaf_spring_70

SpringBoot整合Thymeleaf_spring_71

SpringBoot整合Thymeleaf_html_72

3.4 迭代遍历
3.4.1 th:each

创建index3.html

SpringBoot整合Thymeleaf_html_73

新建Users.java类

SpringBoot整合Thymeleaf_相对路径_74

package com.gongspringthymeleaf.pojo;

public class Users {
    private Integer userid;
    private String username;
    private Integer userage;
    public Integer getUserid() {
        return userid;
    }
    public void setUserid(Integer userid) {
        this.userid = userid;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public Integer getUserage() {
        return userage;
    }
    public void setUserage(Integer userage) {
        this.userage = userage;
    }
    public Users(Integer userid, String username, Integer userage) {
        super();
        this.userid = userid;
        this.username = username;
        this.userage = userage;
    }
    public Users() {
        super();
        // TODO Auto-generated constructor stub
    }
    
}

在DomeCotroller类添加以下代码

SpringBoot整合Thymeleaf_html_75

@RequestMapping("/show3")
    public String showInfo3(Model model){
        List<Users> list = new ArrayList<>();
        list.add(new Users(1,"张三",20));
        list.add(new Users(2,"李四",22));
        list.add(new Users(3,"王五",24));
        model.addAttribute("list", list);
        return "index3";
    }

在index3.html添加以下内容

SpringBoot整合Thymeleaf_相对路径_76

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="u : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></td>
    </tr>
</table>

运行启动类

SpringBoot整合Thymeleaf_相对路径_77

SpringBoot整合Thymeleaf_相对路径_78

SpringBoot整合Thymeleaf_html_79

状态变量属性
1,index:当前迭代器的索引从 0 开始
2,count:当前迭代对象的计数从 1 开始
3,size:被迭代对象的长度
4,even/odd:布尔值，当前循环是否是偶数/奇数从 0 开始
5,first:布尔值，当前循环的是否是第一条，如果是返回 true 否则返回 false
6,last:布尔值，当前循环的是否是最后一条，如果是则返回 true 否则返回 false

修改index3,html

SpringBoot整合Thymeleaf_相对路径_80

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Index</th>
        <th>Count</th>
        <th>Size</th>
        <th>Even</th>
        <th>Odd</th>
        <th>First</th>
        <th>lase</th>
    </tr>
    <tr th:each="u,var : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></td>
        <td th:text="${var.index}"></td>
        <td th:text="${var.count}"></td>
        <td th:text="${var.size}"></td>
        <td th:text="${var.even}"></td>
        <td th:text="${var.odd}"></td>
        <td th:text="${var.first}"></td>
        <td th:text="${var.last}"></td>
    </tr>
</table>

运行启动类

SpringBoot整合Thymeleaf_spring_81

SpringBoot整合Thymeleaf_相对路径_82

SpringBoot整合Thymeleaf_spring_83

3.4.3 th:each 迭代 Map

在controller类添加以下内容

SpringBoot整合Thymeleaf_html_84

@RequestMapping("/show4")
    public String showInfo4(Model model){
        Map<String, Users> map = new HashMap<>();
        map.put("u1", new Users(1,"张三",20));
        map.put("u2", new Users(2,"李四",22));
        map.put("u3", new Users(3,"王五",24));
        model.addAttribute("map", map);
        return "index4";
    }

新建index4.html文件

SpringBoot整合Thymeleaf_html_85

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr th:each="maps : ${map}">
            <td th:text="${maps}"></td>
        </tr>
    </table>
    <th/>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr th:each="maps : ${map}">
            <td th:each="entry:${maps}" th:text="${entry.value.userid}" ></td>
            <td th:each="entry:${maps}" th:text="${entry.value.username}"></td>
            <td th:each="entry:${maps}" th:text="${entry.value.userage}"></td>
        </tr>
    </table>
</body>
</html>

运行启动类

SpringBoot整合Thymeleaf_html_86

SpringBoot整合Thymeleaf_spring_87

SpringBoot整合Thymeleaf_html_88

3.5 域对象操作

3.5.1HttpServletRequest

新建index5.html

SpringBoot整合Thymeleaf_相对路径_89

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
    Session:<span th:text="${session.sess}"></span><br/>
    Application:<span th:text="${application.app}"></span>
</body>
</html>

在controller类里面添加以下内容

SpringBoot整合Thymeleaf_html_90

@RequestMapping("/show5")
    public String showInfo5(HttpServletRequest request, Model model){
        request.setAttribute("req", "HttpServletRequest");
        request.getSession().setAttribute("sess", "HttpSession");
        request.getSession().getServletContext().setAttribute("app", "Application");
        return "index5";
    }

SpringBoot整合Thymeleaf_相对路径_91

SpringBoot整合Thymeleaf_spring_92

SpringBoot整合Thymeleaf_相对路径_93

3.6 URL 表达式
th:href
th:src
3.6.1url 表达式语法
基本语法： @{}

重新新建项目

SpringBoot整合Thymeleaf_html_94

SpringBoot整合Thymeleaf_html_95

SpringBoot整合Thymeleaf_spring_96

SpringBoot整合Thymeleaf_html_97

在pom文件添加以下依赖

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

3.6.2 URL 类型
3.6.2.1 绝对路径
<a th:href="@{http://www.baidu.com}">绝对路径</a><br/

然后创建controller类

SpringBoot整合Thymeleaf_html_98

package com.gongspringurl.controller;



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


/**
 * Thymeleaf入门案例
 *
 *
 */
@Controller
public class DemoController {
    
    @RequestMapping("/{page}")
    public String showInfo(@PathVariable String page){
        return page;
    }
    
}

新建index.html页面

SpringBoot整合Thymeleaf_spring_99

新建App.java启动类

SpringBoot整合Thymeleaf_相对路径_100

package com.gongspringurl;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * 
 *Thymeleaf入门案例
 *
 */
@SpringBootApplication
public class App {

    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

运行启动类

SpringBoot整合Thymeleaf_相对路径_101

SpringBoot整合Thymeleaf_html_102

SpringBoot整合Thymeleaf_相对路径_103

在index.html文件添加以下语句

SpringBoot整合Thymeleaf_相对路径_104

<a th:href="@{http://www.baidu.com}">绝对路径</a><br/>
    <a href="http://www.baidu.com">绝对路径2</a>

再运行启动类，并打开浏览器

SpringBoot整合Thymeleaf_html_105

3.6.2.2 相对路径
1)相对于当前项目的根
相对于项目的上下文的相对路径
<a th:href="@{/show}">相对路径</a>
2) 相对于服务器路径的根
<a th:href="@{~/project2/resourcename}">相对于服务器的根</a>

新建show.html页面

SpringBoot整合Thymeleaf_html_106

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page...Show</title>
</head>
<body>
Show Page
</body>
</html>

在index.html里面添加以下内容

SpringBoot整合Thymeleaf_spring_107

<hr/>
<a th:href="@{/show}">相对路径</a>

运行启动类，在浏览器中打开

SpringBoot整合Thymeleaf_相对路径_108

点击相对路径

就会跳转到show页面了

SpringBoot整合Thymeleaf_相对路径_109

3.6.3 在 url 中实现参数传递
<a th:href="@{/show(id=1,name=zhagnsan)}">相对路径-传参</a>

修改controller类

SpringBoot整合Thymeleaf_html_110

在index.html添加以下内容

SpringBoot整合Thymeleaf_相对路径_111

<hr/>
    <a th:href="@{/show(id=1,name=zhagnsan)}">相对路径-传参</a>

运行起来类并打开浏览器

SpringBoot整合Thymeleaf_相对路径_112

点击相对路径传参

SpringBoot整合Thymeleaf_html_113

SpringBoot整合Thymeleaf_相对路径_114

3.6.4 在 url 中通过 restful 风格进行参数传递

<a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}"> 相对路径 - 传参

-restful</a>

SpringBoot整合Thymeleaf_相对路径_115

<hr/>
    <a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}">相对路径-传参-restful</a>

上一篇：IDEA安装Git

下一篇：SVN的安装

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯