开发者社区> 华章计算机> 正文

《深入实践Spring Boot》一3.3 使用Thymeleaf模板

简介:
+关注继续查看

####本节书摘来自华章出版社《深入实践Spring Boot》一书中的第3章,第3.3节,作者陈韶健,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.3 使用Thymeleaf模板

完成了模型和控制器的设计之后,接下来的工作就是视图设计了。在视图设计中主要使用Thymeleaf模板来实现。在进行视图设计之前,先了解一下Thymeleaf模板的功能。
Thymeleaf是一个优秀的面向Java的XML/XHTML/HTML 5页面模板,并具有丰富的标签语言和函数。使用Spring Boot框架进行界面设计,一般都会选择Thymeleaf模板。

3.3.1 Thymeleaf配置

要使用Thymeleaf模板,首先,必须在工程的Maven管理中引入它的依赖:“spring-boot-starter-thymeleaf”,如代码清单3-9所示。
代码清单3-9 Thymeleaf依赖配置

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

其次,必须配置使用Thymeleaf模板的一些参数。在一般的Web项目中都会使用如代码清单3-10所示的配置,其中,pref?ix指定了HTML文件存放在webapp的/WEB-INF/views/目录下面,或者也可以指定其他路径,其他一些参数的设置其实是使用了Thymeleaf的默认设置。
在实例中,为了更方便将项目发布成jar文件,我们将使用Thymeleaf自动配置中的默认配置选项,即只要在资源文件夹resoueces中增加一个templates目录即可,这个目录用来存放HTML文件。
代码清单3-10 Thymeleaf配置

spring:
    thymeleaf:
        prefix: /WEB-INF/views/
        suffix: .html
        mode: HTML5
        encoding: UTF-8
        content-type: text/html
        cache: false

如果工程中增加了Thymeleaf的依赖,而没有进行任何配置,或者增加默认目录,启动应用时就会报错。

3.3.2 Thymeleaf功能简介

在HTML页面上使用Thymeleaf标签语言,用一个简单的关键字“th”来标注。使用Thymeleaf标签语言的典型例子如下:

<h3 th:text="${actor.name}"></h3>
<img th:src="@{/images/logo.png}"/>

其中,th:text指定了在标签<中显示的文本,它的值来自于关键字“$”所引用的内存变量,th:src设定了标签的图片文件的链接地址,既可以是绝对路径,也可以是相对路径。下面列出了Thymeleaf的一些主要标签和函数。
th:text,显示文本。
th:utext:和th:text的区别是针对"unescaped text"。
th:attr:设置标签属性。
th:if or th:unless:条件判断语句。
th:switch,th:case:选择语句。
th:each:循环语句。

dates:日期函数。

calendars:日历函数。

numbers:数字函数。

strings:字符串函数。

objects:对象函数。

bools:逻辑函数。

arrays:数组函数。

lists:列表函数。

本章的实例工程将在视图设计中使用Thymeleaf的下列几个主要功能,而有关Thymeleaf的详细说明和介绍可以访问它的官方网站http://www.thymeleaf.org/,以获得更多的帮助。
1.使用功能函数
Thymeleaf有一些日期功能函数、字符串函数、数组函数、列表函数等,代码清单3-11是Thymeleaf使用日期函数的一个例子,#dates.format是一个日期格式化的使用实例,它将电影的创建日期格式化为中文环境的使用格式“'yyyy-MM-dd HH:mm:ss'”。
代码清单3-11 Thymeleaf使用函数

th:value="${movie.createDate} ? ${#dates.format(movie.createDate,'yyyy-MM-dd HH:mm:ss')} :''"

2.使用编程语句
Thymeleaf有条件语句、选择语句、循环语句等。代码清单3-12使用each循环语句来显示一个数据列表,即在下拉列表框中使用循环语句来显示所有的演员列表。
代码清单3-12 th:each循环

<select name="actorid" id="actorid">
<option value="">选择演员</option>
<option th:each="actor:${actors}"
    th:value="${actor.id}"
    th:text="${actor.name}">
</option>
</select>

3.使用页面框架模板
Thymeleaf的页面框架模板是比较优秀的功能。预先定义一个layout,它具有页眉、页脚、提示栏、导航栏和内容显示等区域,如代码清单3-13所示。其中,layout:fragment=
" prompt"是一个提示栏,它可以让引用的视图替换显示的内容;fragments/nav :: nav是一个导航栏并指定了视图文件,也就是说它不能被引用的视图替换内容;layout:fragment="content"是一个主要内容显示区域,它也能由引用的视图替换显示内容;fragments/footer :: footer是一个页脚定义并且也指定了视图文件,即不被引用的视图替换显示内容。这样设计出来的页面模板框架如图3-1所示。
代码清单3-13 layout模板

<div class="headerBox">
    <div class="topBox">
        <div class="topLogo f-left">
            <a href="#"><img th:src="@{/images/logo.png}"/></a>
        </div>
        <div class="new-nav">
            <h3>电影频道</h3>
        </div>
    </div>
</div>
<div class="locationLine" layout:fragment=" prompt ">
    当前位置:首页 &gt; <em>页面</em>
</div>
<table class="globalMainBox" style="position:relative;z-index:1">
    <tr>
        <td class="columnLeftBox" valign="top">
            <div th:replace="fragments/nav :: nav"></div>
        </td>
        <td class="whiteSpace"></td>
        <td class="rightColumnBox" valign="top">
            <div layout:fragment="content"></div>
        </td>
    </tr>
</table>

<div class="footBox" th:replace="fragments/footer :: footer"></div>


7d7d36a93710161900bfc1f0b3e883b0fc04cbd8

有了页面模板之后,就可以在一个主页面视图上引用上面的layout,并替换它的提示栏prompt和主要内容显示区域content,其他页眉、页脚和导航栏却保持同样的内容,如代码清单3-14所示。这样就可以设计出一个使用共用模板的具有统一风格特征的界面。
代码清单3-14 使用layout模板的视图设计

xmlns:th="http://www.thymeleaf.org" layout:decorator="fragments/layout">


当前位置:首页 > 电影管理


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue入门 基本使用 与 事务管理【1】
Vue入门 基本使用 与 事务管理【1】
10 0
比赛-以企业为服务目标的政策大数据应用
比赛-以企业为服务目标的政策大数据应用
5 0
心中有“树”!图文并茂介绍数据结构中常见的树(一)
提到数据结构中的树(Tree) ,大家应该都不陌生,相关书籍中都有大段篇幅的介绍,刷 Leetcode 的时候会遇到很多相关问题。很多人往往会用 “手写红黑树” 来形容面试难度很高。
10 0
这个开源项目绝绝子,一键生成好玩的矢量风格头像!
最近逛 GitHub,发现了一个非常好玩的开源项目——头像生成器,给大家分享一下~
6 0
JSP - 起源、执行过程、运行原理、生命周期
JSP - 起源、执行过程、运行原理、生命周期
5 0
心中有“树”!图文并茂介绍数据结构中常见的树(三)
在前面两篇文章中,我们简要介绍了数据结构中的各种【树】在搜索、数据库等领域的使用场景,希望对大家有所帮助。
11 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载