zoukankan      html  css  js  c++  java
  • Thymeleaf学习

    是什么?

    Thymeleaf 是一个服务器端 Java 模板引擎,主要用来开发 Java 服务器端的 H5 。

    怎么用?

    1.创建模板文件,引入命名空间,以HTML模板为例

    1 <html xmlns:th="http://www.thymeleaf.org">
    2   
    3 </html>

    通过 <html xmlns:th="http://www.thymeleaf.org"> 引入其命名空间。这是前提条件,引入这个命名空间之后才能编写模板,为什么这是用于服务端的技术?主要是因为,其模板主要是搭建页面框架,其中的数据是动态从后台获取,所以需要在服务端渲染后,才能返回到前端给用户看见。

    基础知识-简单表达式

      

    语法 描述 作用
    ${...} 变量表达式 获取上下文变量的值
    *{...} 选择变量表达式 获取选择的对象的属性值
    #{...} 消息表达式 使文字消息国际化,也就是所说的I18N
    @{...} 链接表达式 用于各种链接地址(包括资源、超链接等)
    ~{...} 片段表达式 引用一段已定义的公共代码片段

    1.  ${...}

    当你在服务器端编写如下代码:

    1 @GetMapping("/data/get")
    2 public String getData(ModelMap model,HttpSession session){
    3     model.put("name","nacy");
    4     ....
    5 }

    在模板中通过 ${} 获取上下文环境中的 name 变量:

    <p th:text="${name}"></p>
        <!-- nacy -->

    可以理解为将name的值放到 p 标签中,即 <p>nacy</p>

    2.*{...}

    变量表达式取值范围是整个上下文,而选择变量表达式上下文基于其父级标签(th:object)所获取对象,基本形式如下:

    <div th:object="${session.student}">
            <p th:text="*{name}"></p>
            <p th:text="*{age}"></p>
            <p th:text="*{address}"></p>
    </div>

    等价于:

        <div>
            <p th:text="${session.student.name}"></p>
            <p th:text="${session.student.age}"></p>
            <p th:text="${session.student.address}"></p>
        </div>

    然而,在没有对象被选择的情况下,这两种表达式最后形成的效果是完全相同的,如下面这样:

        <p th:text="${session.student.name}"></p>
        <p th:text="*{session.student.name}"></p>

    3.#{...}

    消息表达式用于国际化信息。i18n 的相关介绍网上有很多,这里不再讲解。

    假设我们在Java项目的 resources 文件夹下创建了一个名叫 content.properties 的文件,

    hello.content = 你好,世界!

    还有一个名叫 content_en_US.properties 的文件,

    hello.content = Hello,World !

    文件名为content,非必须取这个名字,且非必须放在resources目录下,可以通过spring.messages.basename 属性做自定义配置。例如,我的资源文件 cities.properties 和 cities_en_US.properties 在 resources/i18n_files 下。

    application.properties 配置示例:

    spring.messages.basename:i18n_files/cities

    yaml 版的配置文件类似。

    在模板中就可以这么使用了

        <p th:text="#{hello.content}"></p>
        <!-- 你好,世界! -->

    4.@{...}

    链接表达式是专门处理 URL 链接地址的。

    可以是绝对地址:

    <!-- 绝对地址 -->
    <p th:text="@{http://cnblog.com/tizer}"></p>
    
    <!-- 相对地址 -->
    <p th:text="@{home/main.html}"></p>
    <!-- home/main.html -->
    
    <!-- 上下文相对地址 -->
    <p th:text="@{/css/main.css}"></p>

    5.~{...}

    片段表达式,为了减少冗余的代码,发挥着重大的作用

    它有三种语法:

    语法 描述
    ~{templatename} 引用整个模板文件代码
    ~{temp :: selector} selector 可以是 th:fragment 所指定的名称或着是其他的选择器(id、class选择器)
    ~{::selector} 等同于 ~{this :: selector} 表示引用当前模板定义的的代码片段

    在Thymeleaf 模板文件中,你可以使用 th:fragment 属性来定义一段可重用的代码拍那段,然后你可以通过使用th:insert、th:replace、th:include 属性来将这些代码片段引入到模板文件中。

    路径 src/main/resources/templates/base.html ,通过 th:fragment 属性定义一段公共的代码片段:

    <div id="footer" th:fragment="footerFragment">&copy; 2020 tizerdev</div>

    路径src/main/resources/templates/index.html,通过 th:insert 属性引用此段公共的代码片段:

    <div th:insert="~{base :: footerFragment}"></div>

     ~{ } 是可选的,我们可以去掉这层的包裹:

    <div th:insert="base :: footerFragment"></div>

    如果 index.html 和 base.html 不在同一级目录,如 base.html 在templates/commons下,则可以这样引用:

    <div th:insert="~{commons/base :: footerFragment}"></div>

    除了使用 insert 。replace 也可以实现相同的效果,不同点在于,insert 是插入到当前标签中,replace 为 替换当前标签,为什么不用include ,因为这个属性在 Thymeleaf 3.0 开始不再推荐使用。

     

  • 相关阅读:
    在ubuntu下安装phpmyadmin 出现404错误
    Jquery插件收藏
    PHP 时区设置
    Jquery动态进行图片缩略
    CSS设置图片垂直居中的方法
    解决CI框架的Disallowed Key Characters错误提示
    @Component默认是单例还是多例?
    ehcache的heap、off-heap、desk浅谈
    nginx负载均衡分配策略有哪些?
    HashSet的实现原理,简单易懂
  • 原文地址:https://www.cnblogs.com/tizer/p/12553913.html
Copyright © 2011-2022 走看看