服务器之家

服务器之家 > 正文

SpringBoot引入Thymeleaf的实现方法

时间:2021-07-28 12:12     来源/作者:Bobby

1.thymeleaf简介

thymeleaf是个xml/xhtml/html5模板引擎,可以用于web与非web应用 

thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模,thymeleaf的可扩展性也非常棒。你可以使用它定义自己的模板属性集合,这样就可以计算自定义表达式并使用自定义逻辑,thymeleaf还可以作为模板引擎框架。

2.引入thymeleaf

引入依赖

在maven(pom.xml)中直接引入:

?
1
2
3
4
5
6
7
8
<dependency>
 <groupid>org.springframework.boot</groupid>
 <artifactid>spring-boot-starter-thymeleaf</artifactid>
</dependency>
<dependency>
 <groupid>org.springframework.boot</groupid>
 <artifactid>spring-boot-starter-web</artifactid>
</dependency>

配置thymeleaf

在application.yml配置thymeleaf

?
1
2
3
4
5
6
7
8
9
10
11
12
server:
 port: 8000
spring:
 thymeleaf:
 cache: false # 关闭页面缓存
 encoding: utf-8 # 模板编码
 prefix: classpath:/templates/ # 页面映射路径
 suffix: .html # 试图后的后缀
 mode: html5 # 模板模式
 
# 其他具体配置可参考org.springframework.boot.autoconfigure.thymeleaf.thymeleafproperties
# 上面的配置实际上就是注入该类的属性值

demo示例

创建indexcontroller

?
1
2
3
4
5
6
7
8
9
@controller
public class indexcontroller {
 // 返回视图页面
 @requestmapping("index")
 public string index(){
  return "index";
 }
 
}

创建index.html

?
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>
</head>
<body>
 hello thymeleaf!
</body>
</html>

创建testcontroller

?
1
2
3
4
5
6
7
8
9
@restcontroller
public class testcontroller {
 
 // 返回整个页面
 @requestmapping("/test")
 public modelandview test(){
  return new modelandview("test");
 }
}

创建test.html

?
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>
</head>
<body>
hello thymeleaf! </br>
by: modelandview
</body>
</html>

3.测试结果

SpringBoot引入Thymeleaf的实现方法
SpringBoot引入Thymeleaf的实现方法

4.thymeleaf基础语法及使用

1.引入标签 

html标签里引入xmlns:th="http://www.thymeleaf.org"才能使用th:*这样的语法

2.引入url 

@{...} 

例如:

<a th:href="@{http://www.baidu.com}" rel="external nofollow" >绝对路径</a> 是访问绝对路径下的url, <a th:href="@{/}" rel="external nofollow" >相对路径</a> 是访问相对路径下的url。

<a th:href="@{css/bootstrap.min.css}" rel="external nofollow" >是引入默认的static下的css文件夹下的bootstrap文件,类似的标签有: th:href 和 th:src

3.获取变量 

通过${}取值,对于javabean的话,使用变量名.属性名获取

4.字符串替换

<span th:text="'welcome to our application, ' + ${user.name} + '!'"></span>
或者
<span th:text="|welcome to our application, ${user.name}!|"></span>

注意:|…|中只能包含变量表达式${…},不能包含其他常量、条件表达式等

5.运算符 

   在表达式中可以使用各类算术运算符
   例如 (+, -, *, /, %)
   例如:th:with="iseven=(${stat.number} % 1 == 0)"
   逻辑运算符 (>, <, <=,>=,==,!=)
   需要注意的是使用<,>的时候需要转义

?
1
2
th:if="${stat.number} > 1"
th:text="'execution mode is ' + ( (${execmode} == 'dev')? 'development' : 'production')"

6.条件 

if/unless th:if是该标签在满足条件的时候才会显示,unless是不成立时候才显示

?
1
<a th:href="@{/login}" rel="external nofollow" th:unless=${user.number != null}>login</a>

switch  thymeleaf支持switch结构,默认属性(default)用*表示

?
1
2
3
4
5
<div th:switch="${user.role}">
  <p th:case="'admin'">user is an administrator</p>
  <p th:case="#{roles.manager}">user is a manager</p>
  <p th:case="*">user is some other thing</p>
</div>

7.循环

?
1
2
3
4
5
<tr th:each="prod : ${prods}">
 <td th:text="${prod.name}">onions</td>
 <td th:text="${prod.price}">2.41</td>
 <td th:text="${prod.instock}? #{true} : #{false}">yes</td>
</tr>

8.utilities

内置在context中,可以直接通过#访问
#dates
#calendars
#numbers
#strings
arrays
lists
sets
maps

5.小结

本文讲述了如何在spring boot中引入模板引擎thymeleaf以及thymeleaf基础语法和实际使用

本文github地址:https://github.com/ishuibo/springall

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部