SpringBoot学习笔记（二）Thymeleaf

最新推荐文章于 2023-02-25 16:01:26 发布

weixin_37717513

最新推荐文章于 2023-02-25 16:01:26 发布

阅读量302

点赞数 1

本文链接：https://blog.csdn.net/weixin_37717513/article/details/90313109

版权

Thymeleaf本身是html文件，这样就有一个好处，不需要依赖Java程序就能直接打开，做到前后端分离。

Thymeleaf的简单例子

添加支持

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

页面控制器

使用的是@Controller注解，返回的是页面文件。
简单的例子：输入localhost:8080/hello打开的时hello.html页面

@Controller
public class HelloController {
  
    @RequestMapping("/hello")
    public String hello(Model m) {
        m.addAttribute("name", "thymeleaf");//将值“thymeleaf”赋给name
        return "hello";//页面为hello.html
    }
}

hello.html

文件放在该目录下在这里插入图片描述
位置信息可以在application.properties进行修改

spring.mvc.view.prefix=/templates/
spring.mvc.view.suffix=.html

hello.html内代码

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	//当程序不运行只打开html文件时显示name,运行程序时，显示name传递的内容
	<p th:text="${name}" >name</p>
	//两种字符串拼接方法
	<p th:text="'Hello！ ' + ${name} + '!'" >hello world</p>
	<p th:text="|Hello！ ${name}!|" >hello world</p>
</body>
</html>

application.properties

这里好像也可以不用配置

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#缓存设置为false, 这样修改之后马上生效，便于调试
spring.thymeleaf.cache=false
#上下文
server.context-path=/thymeleaf

以上，为简单Thymeleaf使用案例。

Thymeleaf语法相关

1、后端传递参数方法
m.addAttribute(String str, Object obj);传递对象的方法，传递时可以时普通对象，也可以是对象集合。

@Controller
public class TestController {
    @RequestMapping("/test")
    public String test(Model m) {
        String htmlContent = "<p style='color:red'> 红色文字</p>";
        Product currentProduct =new Product(5,"product e", 200);
        m.addAttribute("htmlContent", htmlContent);
        m.addAttribute("currentProduct", currentProduct);
        return "test";
    }
}

2、th:text和th:utext区别
th:text="${htmlContent}" 显示的是htmlContent内的文本内容
th:utext="${htmlContent}" 如果htmlContent内的文本内容是html语句的话，还会再进行解析再显示出来。

3、包含其他页面内容
显示类似于网页最底下的版权等相关固定信息
建立include.html文件
其中，footer1是不带参数的，footer2 是带参数的

<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1"> 
   <p >All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)"> 
   <p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>

要嵌入其他页面时，使用以下代码

<div class="showing">
    <div th:replace="include::footer1" ></div>
    <div th:replace="include::footer2(2015,2018)" ></div>
</div>

4、Boolean判断
Hello World：如果布尔值为true，则会显示后面的内容，为false则不显示
：true则不显示，false显示
：同上
三元表达式

<p th:text="${testBoolean}?'true显示这边':'false显示这边'" ></p>

5、遍历
传入的ps为List集合

    <div class="showing">
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>产品名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="p: ${ps}">
                    <td th:text="${p.id}"></td>
                    <td th:text="${p.name}"></td>
                    <td th:text="${p.price}"></td>
                </tr>
           </tbody>
        </table>
    </div>

6、日期输出
Controller类传递Data参数

	Date now = new Date();
	m.addAttribute("now", now);

html代码

<div class="showing date">
	<h2>格式化日期</h2>
	直接输出日期 ${now}:
	<p th:text="${now}"></p>
	默认格式化 ${#dates.format(now)}:
	<p th:text="${#dates.format(now)}"></p>
	自定义格式化 ${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}:
	<p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
</div>

不同格式效果
在这里插入图片描述

weixin_37717513

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot学习笔记（二）Thymeleaf

Thymeleaf本身是html文件，这样就有一个好处，不需要依赖程序Java程序就能打开，做到前后端分离。Thymeleaf的简单例子添加支持<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf&...
复制链接

扫一扫