thymeleaf教程

最新推荐文章于 2024-05-05 10:00:00 发布

zhousenshan

最新推荐文章于 2024-05-05 10:00:00 发布

阅读量1.9k

点赞数 1

分类专栏： docker k8s

docker k8s 专栏收录该内容

202 篇文章 4 订阅

订阅专栏

thymeleaf的定义
spring boot整合
thymeleaf语法参考文档
thymeleaf笔记

thymeleaf比jsp好在哪
thymeleaf简单文件
thymeleaf配置 application.properties
thymeleaf url
thymeleaf表达式
themeleaf包含 footer
themeleaf条件 if
themeleaf 遍历
thymeleaf内置工具
thymeleaf分页

thymeleaf的定义

Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。主要目标是将优雅的自然模板带到开发工作流程中，并将HTML在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。Thymeleaf使用Spring框架的模块，与许多常见的工具集成在一起，并且可以插入自己的功能，能够处理HTML，XML，JavaScript，CSS，TEXT,RAW六种模板模式。

spring boot整合

新建spring boot的web项目
添加依赖

<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>1.5.2.RELEASE</version>
</dependency>

在spring boot是1.5.X时，thymeleaf依赖要用1.5.x版本，亲测用2版本会找不到网页。

将html网页放在templates文件夹下。
controller即可跳转到html页面，页面路径为以templates为基础的相对路径。

thymeleaf语法参考文档

官方文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
目前网上教程不太多，https://www.yiibai.com/thymeleaf/standardurlsyntax.html 重点看标准方言。
目前比较浅显易懂的 http://how2j.cn/k/springboot/springboot-thymeleat/1735.html

thymeleaf笔记

thymeleaf比jsp好在哪

jsp要在服务器启动后转化为html页面。不启动服务器无法运行出结果。
thymeleaf服务器不启动他就已经是html。

thymeleaf简单文件

<html xmlns:th="http://www.thymeleaf.org">
<head>#内容与html无异
<p th:text="$name">name</p>
#服务器端未启动 显示name 启动显示服务器端传来的name值
#字符串拼接
<p th:text="|Hello! ${name}|"></p>

thymeleaf配置 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 url

引入css文件

<link rel="stylesheet" type="text/css" media="all" href="../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>

引入js文件

<script type="text/javascript" src="../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>

启动服务器后 th:src会代替src th:href会代替href

thymeleaf表达式

controller中添加属性

String htmlContent = "<p style='color:red'> 红色文字</p>";
m.addAttribute("htmlContent", htmlContent);
Product currentProduct =new Product(5,"product e", 200);
m.addAttribute("currentProduct", currentProduct);

转义与非转义

<p th:text="${htmlContent}" ></p>
<p th:utext="${htmlContent}" ></p>

效果

image.png

获取对象

方式1
<p th:text="${currentProduct}" ></p>
<p th:text="${currentProduct.name}" ></p>
<p th:text="${currentProduct.getName()}" ></p>
方式2
<div class="showing" th:object="${currentProduct}">
<h2>*{}方式显示属性</h2>
<p th:text="*{name}" ></p>
</div>

效果

image.png

此外还有算数运算

<p th:text="${currentProduct.price+999}" ></p>

themeleaf包含 footer

<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 th:replace="include::footer1" ></div>
<div th:replace="include::footer2(2015,2018)" ></div>

themeleaf条件if

<p th:if="${testBoolean}" >如果testBoolean 是 true ，本句话就会显示</p>
<p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句话就不会显示</p>
<p th:text="${testBoolean}?'当testBoolean为真的时候，显示本句话，这是用三相表达式做的':''" ></p>

不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false，规则如下:

boolean 类型并且值是 true, 返回 true
数值类型并且值不是 0, 返回 true
字符类型(Char)并且值不是 0, 返回 true
String 类型并且值不是 "false", "off", "no", 返回 true
不是 boolean, 数值, 字符, String 的其他类型, 返回 true
值是 null, 返回 false

themeleaf 遍历

controller中

 List<Product> ps = new ArrayList<>();
        ps.add(new Product(1,"product a", 50));
        ps.add(new Product(2,"product b", 100));
        ps.add(new Product(3,"product c", 150));   
        m.addAttribute("ps", ps);

html中

 <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>

select与thymeleaf遍历结合

<div class="showing">
    <h2>遍历 select </h2>
    <select size="3">
        <option th:each="p:${ps}" th:value="${p.id}"     th:selected="${p.id==currentProduct.id}"    th:text="${p.name}" ></option>
    </select>
</div>

image.png

thymeleaf内置工具

#dates工具
now变量是controller中声明的Date now = new Date();

<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>

image.png

其他工具如

Execution Info
Messages
URIs/URLs
Conversions
Dates
Calendars
Numbers
Strings
Objects
Booleans
Arrays
Lists
Sets
Maps
Aggregates
IDs

手册见 http://how2j.cn/k/springboot/springboot-tool/1741.html#nowhere

thymeleaf分页

与数据库连接时的分页
pom加入

<!-- pageHelper -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>

controller中示例

 @RequestMapping("/listCategory")
    public String listCategory(Model m,@RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
        PageHelper.startPage(start,size,"id desc");
        List<Category> cs=categoryMapper.findAll();
        PageInfo<Category> page = new PageInfo<>(cs);
        m.addAttribute("page", page);       
        return "listCategory";
    }

配置PageHelper

package com.how2java.springboot.config; 
import java.util.Properties; 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;  
import com.github.pagehelper.PageHelper;  
@Configuration
public class PageHelperConfig {
    @Bean
    public PageHelper pageHelper() {
        PageHelper pageHelper = new PageHelper();
        Properties p = new Properties();
        p.setProperty("offsetAsPageNum", "true");
        p.setProperty("rowBoundsWithCount", "true");
        p.setProperty("reasonable", "true");
        pageHelper.setProperties(p);
        return pageHelper;
    }
}

html页面

 <table align='center' border='1' cellspacing='0'>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
        <tr th:each="c:${page.list}">
            <td th:text="${c.id}"></td>
            <td th:text="${c.name}"></td>
            <td><a th:href="@{/editCategory(id=${c.id})}">编辑</a></td>
            <td><a th:href="@{/deleteCategory(id=${c.id})}">删除</a></td>
        </tr>
    </table>
    <br/>
    <div>
            <a th:href="@{/listCategory(start=0)}">[首  页]</a>
            <a th:href="@{/listCategory(start=${page.pageNum-1})}">[上一页]</a>
            <a th:href="@{/listCategory(start=${page.pageNum+1})}">[下一页]</a>
            <a th:href="@{/listCategory(start=${page.pages})}">[末  页]</a>
    </div>

效果

image.png

小礼物走一走，来简书关注我

作者：cccccttttyyy
链接：https://www.jianshu.com/p/00c7edc2120b
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

zhousenshan

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf教程

目录thymeleaf的定义spring boot整合thymeleaf语法参考文档thymeleaf笔记thymeleaf比jsp好在哪thymeleaf简单文件thymeleaf配置 application.propertiesthymeleaf urlthymeleaf表达式themeleaf包含 footerthemeleaf条件 ifthemeleaf 遍...
复制链接

扫一扫

专栏目录