其他分享
首页 > 其他分享> > Thymeleaf小记

Thymeleaf小记

作者：互联网

Thymeleft入门

最近学习javaweb 之前将很多的学习时间都用在了jsp 和 JQREY 的学习上，但是最近发现已经过时了，本来想学好后做项目的但是发现过时后很伤心，想做项目的心已经凉了，作为代替jsp 的Thymeleaf 自己还是非常陌生，所以还是非常的迷茫，看教程也是有点吃力....

所以自己决定从基础零开始慢慢过一遍：

Thymeleaf 是用来开发web和独立环境项目的服务端的java模板引擎

Spring 官方支持的服务的渲染模板中，并不包含jsp。 而是Thymeleaf 和Freemarker等，而Thymeleaf与SpringMVC的试图技术，及SpringBoot 的自动化配置集成非常完美，几乎没有任何成本本，你只用关注Thymeleaf的语法即可。

它是动静结合，与SpringBoot 完美整合，SpringBoot提供了Thymeleaf 的默认配置，并且为了Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf 。代码几乎没有任何区别，就是在模板语法上有区别，就是模板语法上有区别；

SpringBoot与之整合

我们创建一个SpringBoot项目，添加相关依赖，下面我们可以入门

自动配置

自动给我们默认分配了模板的前缀和和后缀，我们只要按部就班的将模版丢进去即可

还是没太弄明白，算了我日后还是研究一下

Thymeleaf 常用的语法

主要作用是把model的数据渲染到HTML中，因此其语法主要是如何解析model中的数据。

从以下方面了学习：

语法说明：

通过${ }来获取model中的变量，注意这不是el表达式，而是ognl表达式，但是语法非常像。

<h1>
	你好：<span th:text="${user.name}">请跟我来</span>
</h1>

变量_动静结合

Thymeleaf 崇尚模板是纯正的html代码，脱离模板引擎，在纯静环境也可以直接运行。现在如果我们直接在HTML中编写 ${} 这样的表达式，显然在静态环境下就会出错，这不符合Thymeleaf的理念。

Thymeleaf中的所有的表达式都需要写在"指令"中，指令是HTML5中的自定义属性，在Thymeleaf中所有的指令都是以th: 开头。

另外，th:text指令出于安全的考虑，会把表达式读取到了值进行处理，防止html 注入。

html注入：？？

ognl表达式语法：

获取对象通常是对象名.属性名的方式。但有些情况下，我们的属性名本身可能也是变量，怎么办？

ognl 提供了类似js的语法方式：

例如：${user.name} 可以写作${user['name']}

变量的自定义：

<h2>
    <p>Name: <span th:text="${user.name}">Jack</span>.</p>
    <p>Age: <span th:text="${user.age}">21</span>.</p>
    <p>friend: <span th:text="${user.friend.name}">Rose</span>.</p>
</h2>

例如前面的代码：我们在代码中频繁地需要写： user. 只作为一个程序员，最不喜欢的就是重复干一些事 哈哈，所以我们可以考虑用，thymeleaf 提供的自定义变量来解决：

<h2 th:object="${user}">
    <p>Name: <span th:text="*{name}">Jack</span>.</p>
    <p>Age: <span th:text="*{age}">21</span>.</p>
    <p>friend: <span th:text="*{friend.name}">Rose</span>.</p>
</h2>

注意：需要自己多加练习才能真正成为自己的东西，不只是知识留在笔记中！

方法

ognl 表达式中的方法的调用，例如；

先放着，

内置对象

获取这些对象，需要使用 #对象名 来引用。

先放着

方法_字面值

有时候我们需要在指令中填写基本类型如：字符串，数值， 布尔等，并不希望被Thymeleaf 解析为变量，这个时候称之为字面值。

使用一对 ' 引用的内容就是字符串的字面值了

写什么就是什么没有特殊的写法，而且可以直接进行算术运算，（不太理解重新补一下！！）

拼接

我们在实际的开发中通常会遇到普通的字符串与表达式进行拼接的情况：

<span th:text="'欢迎您:' + ${user.name} + '!'"></span>

字符串字面值需要用' ' 拼接起来非常麻烦，我们可以用 一对 | 即可

<span th:text="|欢迎您:${user.name}|"></span>

后续也将补上实际练手项目中的Thymleaf的运用，与一些漏掉的知识点！2022/2/12

..........

补充：

${} 使用来去model中的变量;

1.$符号取上下文中的变量：

<input type="text" name="userName"  th:value="${user.name}">

2.#符号取thymeleaf工具中的方法、文字消息表达式：

<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>

3.　*{...}选择表达式一般跟在th:object后，直接选择object中的属性

<div th:object="${session.user}">

<p th:text="*{name}"/><div>

下面为Thymeleaf在我的练手项目中的简单使用，用到了标签 th:if="" (th代表Thymeleaf ，if 为分支条件) th:if="${#lists.isEmpty(session.fruitlist)}" ;在这里用到了${}没有了这个取不到模板中的变量

![](D:\学习记录总结\web 笔记\新技术\img\2.png)

既然这里用到了if 那么关于这个方面的内容也做简单总结：

基本语法分支与迭代

1，分支

①if和unless

让标记了th:if、th:unless的标签根据条件决定是否显示。

public class IndexServlet extends ViewBaseServlet {
    //因为从index页面的请求为get
    public void doGet(HttpServletRequest request , HttpServletResponse response)throws IOException, ServletException {
        FruitDAO fruitDAO = new FruitDAOImpl();
        List<Fruit> fruitList = fruitDAO.getFruitList();
        //保存到session作用域
        HttpSession session = request.getSession() ;
        session.setAttribute("fruitList",fruitList);

        /*Iterator<Fruit> iterator = fruitList.iterator();
        while( iterator.hasNext()){
            System.out.println(iterator.next());
        }*/


        //此处的视图名称是 index
        //那么thymeleaf会将这个 逻辑视图名称 对应到 物理视图 名称上去
        //逻辑视图名称 ：   index
        //物理视图名称 ：   view-prefix + 逻辑视图名称 + view-suffix
        //所以真实的视图名称是：      /       index       .html
//        super.processTemplate("index",request,response);
        super.processTemplate("index",request,response);

    }
}

在下面的HTML中使用Thymeleaf渲染技术动态地将数据库中的内容显示到HTML页面上，再从session域中取数据时用到th:if="${#lists.isEmpty(session.fruitList)}" 来判断，域中的数据是否为空，如果不为空则用 ：

用th:unless="${#lists.isEmpty(session.fruitList)}"来确定不为空的情况unless的作用与我们平时的else差不多， 之后 th:each="fruit: ${session.fruitList}"语句将数据迭代取出！

还有一个细节就是#lists ,它是Thymeleaf内置对象；

 <table id="tb_list">
            <caption>水果库存系统</caption>
            <tr>
                <th>水果名</th>
                <th>单价</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
            <tr th:if="${#lists.isEmpty(session.fruitList)}">
                <td id="nul" colspan="4">对不起，库存为空，无法显示！</td>
            </tr>
            <tr th:unless="${#lists.isEmpty(session.fruitList)}" th:each="fruit: ${session.fruitList}">
                <td th:text="${fruit.fname}">苹果</td>
                <td th:text="${fruit.price}">2</td>
                <td th:text="${fruit.fcount}">12</td>
                <td id="del" ><a href=""><img src="img/del.webp" alt=""></a></td>
            </tr>

        </table>

if配合not关键词和unless配合原表达式效果是一样的，看自己的喜好。

②switch

<h3>测试switch</h3>
<div th:switch="${user.memberLevel}">
    <p th:case="level-1">银牌会员</p>
    <p th:case="level-2">金牌会员</p>
    <p th:case="level-3">白金会员</p>
    <p th:case="level-4">钻石会员</p>
</div>

2，迭代

th:each="变量 ： ${session.list}"/*假设在会话作用域中有叫list的集合*/
th:text="${变量.属性}"

标签：变量,视图,Thymeleaf,session,th,表达式,小记
来源： https://www.cnblogs.com/kobedu/p/16439020.html