天天看点

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

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

完成了模型和控制器的设计之后,接下来的工作就是视图设计了。在视图设计中主要使用thymeleaf模板来实现。在进行视图设计之前,先了解一下thymeleaf模板的功能。

thymeleaf是一个优秀的面向java的xml/xhtml/html 5页面模板,并具有丰富的标签语言和函数。使用spring boot框架进行界面设计,一般都会选择thymeleaf模板。

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

代码清单3-9 thymeleaf依赖配置

其次,必须配置使用thymeleaf模板的一些参数。在一般的web项目中都会使用如代码清单3-10所示的配置,其中,pref?ix指定了html文件存放在webapp的/web-inf/views/目录下面,或者也可以指定其他路径,其他一些参数的设置其实是使用了thymeleaf的默认设置。

在实例中,为了更方便将项目发布成jar文件,我们将使用thymeleaf自动配置中的默认配置选项,即只要在资源文件夹resoueces中增加一个templates目录即可,这个目录用来存放html文件。

代码清单3-10 thymeleaf配置

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

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

其中,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:循环语句。

1.使用功能函数

thymeleaf有一些日期功能函数、字符串函数、数组函数、列表函数等,代码清单3-11是thymeleaf使用日期函数的一个例子,#dates.format是一个日期格式化的使用实例,它将电影的创建日期格式化为中文环境的使用格式“'yyyy-mm-dd hh:mm:ss'”。

代码清单3-11 thymeleaf使用函数

2.使用编程语句

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

代码清单3-12 th:each循环

3.使用页面框架模板

thymeleaf的页面框架模板是比较优秀的功能。预先定义一个layout,它具有页眉、页脚、提示栏、导航栏和内容显示等区域,如代码清单3-13所示。其中,layout:fragment=

" prompt"是一个提示栏,它可以让引用的视图替换显示的内容;fragments/nav :: nav是一个导航栏并指定了视图文件,也就是说它不能被引用的视图替换内容;layout:fragment="content"是一个主要内容显示区域,它也能由引用的视图替换显示内容;fragments/footer :: footer是一个页脚定义并且也指定了视图文件,即不被引用的视图替换显示内容。这样设计出来的页面模板框架如图3-1所示。

代码清单3-13 layout模板

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

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

代码清单3-14 使用layout模板的视图设计

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

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