thymeleaf模板的使用

1，thymeleaf概述

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

1、Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2、Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3、Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

Spring Boot项目Thymeleaf模板页面存放位置

查看ThymeleafAutoConfiguration

查看ThymeleafProperties

thymeleaf前后缀的配置默认前缀为 classpath:/templates/ 后缀是 .html

4，通过Controller跳转到Thymeleaf的页面

http://localhost:8080/index/hello

访问 http://localhost:8080/index/userManager

如何修改Thymeleaf的默认存放地址

Thymeleaf的相关语法

1，简单表达式

1、变量的表达式：${...} 取作域里面的值 Model

2、选择变量表达式：*{...}

3、信息表达式：#{...} #取IOC容器里面的值

4、链接URL表达式：@{...} <a href="user/query.action"> <a th:href="@{user/query.action}" Href Actio Src

2，字面值 th:text

1、文本文字：'one text', 'Another one!',…

2、文字数量：0, 34, 3.0, 12.3,…

3、布尔型常量：true, false

4、空的文字：null

5、文字标记：one, sometext, main,…

3，文本处理

1、字符串并置：+

2、文字替换：|The name is ${name}|

4，表达式基本对象

1、#ctx：上下文对象

2、#vars：上下文变量

3、#locale：上下文语言环境

4、#httpServletRequest：（只有在Web上下文）HttpServletRequest对象

5、#httpSession:（只有在Web上下文）HttpSession对象。

用法：<span th:text="${#locale.country}">CN</span>.

5，实用工具对象　

#dates： java.util的实用方法。对象:日期格式、组件提取等.

~~#calendars：类似于#日期,但对于java.util。日历对象~~

#numbers：格式化数字对象的实用方法。

#strings：字符串对象的实用方法:包含startsWith,将/附加等。

#objects：实用方法的对象。

#bools：布尔评价的实用方法。

#arrays：数组的实用方法。

#lists：list集合。

#sets：set集合。

#maps：map集合。

#aggregates：实用程序方法用于创建聚集在数组或集合.

#messages：实用程序方法获取外部信息内部变量表达式,以同样的方式,因为它们将获得使用# {…}语法

#ids：实用程序方法来处理可能重复的id属性(例如,由于迭代)。

Thymeleaf读取xxx.properties里面的对象【了解】国际化

修改application.properties

创建showStudent.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>学生信息</legend>
</fieldset>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <span>学生编号:</span><span th:text="#{student.id}"></span><br>
                    <span>学生姓名:</span><span th:text="#{student.name}"></span><br>
                    <span>学生年龄:</span><span th:text="#{student.age}"></span><br>
                    <span>学生性别:</span><span th:text="#{student.sex}"></span><br>
                    <span>学生生日:</span><span th:text="#{student.birth}"></span><br>
                    <span>学生电话:</span><span th:text="#{student.phone}"></span><br>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div th:text="#{welcome('小明','WHSXT')}">-->

</div>

<script src="/layui/layui.js" charset="utf-8"></script>
</body>
</html>

出现的问题

解决办法创建I18NConfig

小草dym

发布了529 篇原创文章 · 获赞 115 · 访问量 9万+

私信关注