spring boot模板引擎thymleaf用法详解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a772304419/article/details/79742366

spring boot模板引擎thymleaf用法详解

Spring-boot支持FreeMarker、Thymeleaf、jsp、veocity
但是对freemarker和thymeleaf的支持最好,不推荐使用jsp

使用jsp的弊端

1:项目目录结构繁琐

2:页面不简洁

3:jsp内置错误页面不能覆盖springboot默认的错误页面

4: 只能打成war不能打成jar

5:内置的jetty服务器不支持jsp

thymeleaf(新一代模版引擎)

优点:

1:有网无网的情况下模版页面都可以执行,美工的页面拿来就可以用.

2:相对jsp减少了额外的标签,页面也更加简洁

jar包依赖

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

在application.properties中配置thymleaf

spring.thymeleaf.mode = LEGACYHTML5

spring.thymeleaf.mode的默认值是HTML5,其实是一个很严格的检查,改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。

自定义视图解析

spring.thymeleaf.prefix=classpath:/templates/html/ 不要漏写
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

访问静态资源

<img src=”/images/….”>
<script src=”/js/….”>
<link href=”/css/….”>

访问map中的数据

@RequestMapping("/index")
public  String hello(Model map){

    //map
    Map<String, Object> student= new HashMap<>();
    student.put("name", "张三丰");
    map.addAttribute("student",student);

    return "index";
}

在HTML页面取数据

<span th:text="${student.name}"></span>    
字符串拼接:<h2 th:text="'姓名:'+${student.name}"></h2>
三元表达式:<input th:value="${age gt 30 ? '中年':'年轻'}"/>
gt:great than(大于)
ge:great equal(大于等于)
eq:equal(等于)
lt:less than(小于)
le:less equal(小于等于)
ne:not equal(不等于)

访问pojo中的属性

Book book = new Book("辟邪剑谱",199.99f,"http://img3m6.ddimg.cn/15/16/23326296-1_w_2.jpg");
map.addAttribute("book",book);

在HTML页面取值

<img th:src="${book.bookUrl}"/>
 <span th:text="${book.bookName}"/>

取list中的数据

List<Book> books = new ArrayList<Book>();
for (int i = 0; i < 10; i++) {
    Book b = new Book("book"+i, 100f, "http://www.wendaoxueyuan.com/images/"+i+".jpg");
    books.add(b);
}
map.addAttribute("books",books);

HTML页面取值

<table border="1px" cellspacing="0px" cellspadding="0px" width="100%">
    <tr>
        <td>编号</td><td>书名</td><td>书价格</td><td>图片地址</td>
    </tr>
    <tr th:each="book:${books}">
        <td>编号</td>
        <td th:text="${book.bookName}">书名</td>
        <td th:text="${book.bookPrice}">书价格</td>
        <td th:text="${book.bookUrl}">图片地址</td>
    </tr>
</table>

取循环中的下标

<tr  th:each="user,userStat : ${list}">   
    <th th:text="${userStat.index}">状态变量:index</th>  
    <th th:text="${userStat.count}">状态变量:count</th>  
    <th th:text="${userStat.size}">状态变量:size</th>  
    <th th:text="${userStat.current.userName}">状态变量:current</th>  
    <th th:text="${userStat.even}">状态变量:even****</th>  
    <th th:text="${userStat.odd}">状态变量:odd</th>  
    <th th:text="${userStat.first}">状态变量:first</th>  
    <th th:text="${userStat.last}">状态变量:last</th>  
</tr> 

说明:
index:列表状态的序号,从0开始;
count:列表状态的序号,从1开始;
size:列表状态,列表数据条数;
current:列表状态,当前数据对象
even:列表状态,是否为奇数,boolean类型
odd:列表状态,是否为偶数,boolean类型
first:列表状态,是否为第一条,boolean类型
last:列表状态,是否为最后一条,boolean类型

利用下标实现表格变色

<tr th:class="${pcStatus.even?'red':'blue'}">

if判断

<h1>
    <b th:text="${name}"></b>:
    <span th:if="${age gt 30}">中年</span>
    <span th:unless="${age gt 30}">年轻</span>
</h1>

将pojo中的Date类型数据渲染成String

<span th:text="${#dates.format(post.postCreate,'yyyy-MM-dd')}">2017年11月8日</span>

定义和引用片段

定义

<div th:fragment="copy">
  &copy; 2014 The Good Thymes Virtual Grocery
 </div>

引用

<body>
  ...
  <div th:include="footer :: copy"></div>
</body>

没有更多推荐了,返回首页