码迷,mamicode.com
首页 > 编程语言 > 详细

Thymeleaf入门(基于SpringBoot)

时间:2020-07-09 01:00:08      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:autoconf   详细   ati   拼接   new   freemark   row   tco   admin   

1.简介

Thymeleaf是流行的模板引擎,Spring Boot推荐使用。语法简介,功能更加强大。

模板引擎:JSP、FreeMarker、Velocity、Thymeleaf

2.pom.xml中导入依赖

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

3.Thymeleaf的入门

①使用规则:只要把页面放在classpath:/templates/,文件后缀名.html,Thymeleaf就可以自动渲染

具体原理(参考org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties),下面是部分代码
	public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";

②入门

a.导入Thymeleaf名称空间(页面输入就会有提示了)

b.使用Thymeleaf语法

c.后端把数据放到请求域中

<!DOCTYPE html>
a.导入Thymeleaf名称空间(页面输入就会有提示了)
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello Thymeleaf</title>
</head>
<body>
b.使用Thymeleaf语法(此处直接打开页面,显示的是[你好,HTML!])
<div th:text="${aa}">你好,HTML!</div>
</body>
</html>
c.后端把数据放到请求域中
@Controller
public class HelloController {
    @RequestMapping("/hello")
    public String hello(Model model) {
        Map<String, Object> map = new HashMap<>();
        map.put("aa", "你好,Thymeleaf!");
        model.addAllAttributes(map);
        return "hello";
    }
}

d.启动服务,访问localhost:8080/hello,程序运行结果

技术图片

4.Thymeleaf语法规则

①语法规则:th:xx xx代表html对应的属性

个人理解语法规则的形式:在html的标签中使用Thymeleaf的属性,把获取到的值展示到标签体中

例如:
<div th:text="${aa}">[aa对应的值展示位置]</div>

②常见属性

属性 对应中文描述
th:insert
th:replace
片段包含(Fragment inclusion)
th:each 遍历(Fragment iteration)
th:if
th:unless
th:switch
th:case
条件判断(Conditional evaluation)
th:object
th:with
声明变量(Local variable definition)
th:attr
th:attrprepe
th:attrappen
任意属性修改(General attribute modification)
th:value
th:href
th:src
...
修改指定属性默认值(Specific attribute modification th:value)
th:text
th:utext
修改标签体内容(Text (tag body modification))
th:text会原样输出内容; th:utext会对输入的内容进行转义,输出的值有样式的话会展示对应的样式。

③表达式语法

表达式 描述
${...} 获取变量值;符合OGNL表达式语法
1)获取对象的属性、调用方法
2) 获取内置对象(内置对象详细使用方法,见附录中官网文档中第4.2节)
内置对象(部分需要在web环境下才可以获取):#ctx 、#vars: 、#locale 、#request 、#response 、#session :、#servletContext
3)内置的工具对象(见附录中官网文档中第4.2节)
内置工具对象:#execInfo 、#messages、#uris 、#conversions、#dates 、#calendars 、#numbers、#strings 、#objects 、#bools 、#arrays 、#lists、#sets 、#maps 、#aggregates、#ids
*{...} 1)与${...}功能一致
2)配合th:object使用
例:< div th:object="${session.user}">
<p>Name: <span th:text="{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="
{lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>
#{...} 获取国际化内容
@{...} 定义URL
好处:不用进行拼接
例:<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
~{...} 片段表达式

④字面量(Literals ,官方文档4.6节)

1.文本(Text literals)
<p>
Now you are looking at a <span th:text="‘working web application‘">template file</span>.
</p>

2.数字(Number literals)
<p>The year is <span th:text="2013">1492</span>.</p>
<p>In two years, it will be <span th:text="2013 + 2">1494</span>.</p>

3.布尔(Boolean literals)
<div th:if="${user.isAdmin() == false}">

4.null(The null literal)
<div th:if="${variable.something} == null">

5.token

⑤其他操作运算(4.7-4.13节)

1.文本拼接(Appending texts)
使用 + 号进行文本拼接
<span th:text="‘The name of the user is ‘ + ${user.name}">

2.文本替换(Literal substitutions)
|文本内容|,文本内容可以进行替换,下面两个操作的是等同的
<span th:text="|Welcome to our application, ${user.name}!|"></span> <br>
<span th:text="‘Welcome to our application, ‘ + ${user.name} + ‘!‘"></span><br>

3.数学运算(Arithmetic operations)
+ , - , * , / , %
<div th:with="isEven=(${prodStat.count} % 2 == 0)">

4.比较运算(Comparators and Equality)
> , < , >= ,<= , == ,!=
<div th:if="${prodStat.count} &gt; 1">
<span th:text="‘Execution mode is ‘ + ( (${execMode} == ‘dev‘)? ‘Development‘ : ‘Production‘)">

5.三元运算符(Conditional expressions)
<tr th:class="${row.even}? ‘even‘ : ‘odd‘">
...
</tr>

附录

Thymeleaf官方文档

Thymeleaf入门(基于SpringBoot)

标签:autoconf   详细   ati   拼接   new   freemark   row   tco   admin   

原文地址:https://www.cnblogs.com/zuo-shuai/p/13270157.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!