thymeleaf教程

目录

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

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


    org.springframework.boot
    spring-boot-starter-thymeleaf
    1.5.2.RELEASE


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

  1. 将html网页放在templates文件夹下。
  2. 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无异

name

#服务器端未启动 显示name 启动显示服务器端传来的name值 #字符串拼接

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


引入js文件


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

thymeleaf表达式

controller中添加属性

String htmlContent = "

红色文字

"; m.addAttribute("htmlContent", htmlContent); Product currentProduct =new Product(5,"product e", 200); m.addAttribute("currentProduct", currentProduct);

转义与非转义

效果


image.png

获取对象

方式1

方式2

*{}方式显示属性

效果


image.png

此外还有算数运算

themeleaf包含 footer


All Rights Reserved

使用时按照

themeleaf条件if

如果testBoolean 是 true ,本句话就会显示

取反 ,所以如果testBoolean 是 true ,本句话就不会显示

不只是布尔值的 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 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中

 
id 产品名称 价格

select与thymeleaf遍历结合

遍历 select

image.png

thymeleaf内置工具

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

格式化日期

直接输出日期 ${now}:

默认格式化 ${#dates.format(now)}:

自定义格式化 ${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}:

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


        
            com.github.pagehelper
            pagehelper
            4.1.6
        

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 cs=categoryMapper.findAll();
        PageInfo 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页面

 
id name 编辑 删除
编辑 删除

效果


image.png

你可能感兴趣的:(thymeleaf教程)