[学习交流] 【深圳校区】thymeleaf模版技术

                  thymeleaf模版技术

什么是thymeleaf模版技术

Thymeleaf是一个Java库。它是一个XML / XHTML / HTML5模板引擎,能够应用于转换模板文件,以显示您的应用程
序产生的数据和文本。
它尤其适合于基于XHTML / HTML5的web服务应用程序,同时它可以处理任何XML文件,作为web或独立的应用程
序。
Thymeleaf的主要目的是提供一个优雅和格式良好的方式创建模板。为了实现这一目标,它把预定义的逻辑放在XML
的标记和属性上,而不是显式放在XML标记的内容上。
依靠智能缓存去解析文件，致使其执行期间的I / O操作达到了最少数量，因此其处理的模板的能力实非常快速的。

引入模版技术

  修改gradle配置文件:
      在buildscript标签中添加如下版本信息
            //指定 thymeleaf 和 thymeleaf Layout Dialect 的版本
            ext['thymeleaf.version'] = '3.0.9.RELEASE'
            ext['thymeleaf-layout-dialect.version'] = '2.2.0'
      在dependencies中添加依赖:
               compile('org.springframework.boot:spring-boot-starter-thymeleaf')
  修改每一个模版页面中html标签为:
      <html xmlns:th="http://www.thymeleaf.org" >

使用thymeleaf
常用修改html的属性

输出内容到标签体: th:text
修改属性 th:属性名称

示例代码


<div th:text="我是模版text">
   这里的文本将要被模版替换
</div>


<div class="c1" th:class="c2">
      演示th:属性名称,最终th:class会覆盖div原本的class属性
</div>

标准表达式

变量表达式: ${变量名}
URL表达式: @{路径}
代码段表达式: ~{...}

变量表达式
@GetMapping("/demo1")
public String demo1(Model model){
      //例如我们在model中添加了一个name值
      model.addAttribute("name","张三");
      return "demo1";
}
咱们可以在thymeleaf模版页面中,这样来获取name对应的值
<div th:text="${name}"></div>

URL表达式

<a href="#" th:href="@{/demo1}" >点击跳转</a>
首先在模版技术中,th:href会覆盖掉原来的href
@{/demo1} 最终向页面上输出的内容为: /lottery/demo1 也就是 /项目名称/访问的资源名称

代表段表达式

主要用于抽取出公用的代码片断,例如通常一个页面分为头部分,内容部分,页脚部分, 多个页面中可能只有内容部分不
相同,头部分和页脚部分是相同的,我们即可将这两部分内容提取出来

在一个独立的head.html文件中编写共有的头部分代码:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
      <meta charset="UTF-8"/>
      <title>Title</title>
</head>
<body>
      <div th:fragment="head_fragment">
            这是页面的头部分
      </div>
</body>
</html>

在一个独立的foot.html文件中编写共有的页脚部分代码:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
         <meta charset="UTF-8"/>
         <title>Title</title>
</head>
<body>
         <div th:fragment="foot_fragment">
这是页面的页脚部分
      </div>
</body>
</html>
在一个新文件中使用共有的代码提高开发效率:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
      <meta charset="UTF-8"/>
      <title>首页网站</title>
</head>
<body>
      <div th:replace="~{fragments/head :: head_fragment}"></div>
      <div>页面的内容部分</div>
      <div th:replace="~{fragments/foot :: foot_fragment}"></div>
</body>
</html>

条件判断
值非 null:

boolean 类型并且值是 true, 返回 true
数值类型并且值不是 0, 返回 true
字符类型(Char)并且值不是 0, 返回 true
String 类型并且值不是 "false", "off", "no", 返回 true
不是 boolean, 数值, 字符, String 的其他类型, 返回 true

值为 null, 返回 false
比较运算符: >, <, >=, <= (gt, lt, ge, le) ,==, != (eq, ne)
逻辑运算符: and,or,not

if语句

<div th:if="${flag}">
   若flag为true,则会显示出来
</div>
<div th:if="${notzero}">
   若为非0数值,则表示的是true,否则为false
</div>
<div th:if="${i gt 3}">
   若i大于3则会显示这句话
</div>
<div th:if="${i} lt 9">
   若i 小于 9则会显示这句话
</div>

<div th:text="${i gt 3}?'大于':'小于'"></div>

switch语句

<div th:switch="${i}">
      <div th:case="4">i等于4</div>
      <div th:case="5">i等于5</div>
      <div th:case="6">i等于6</div>
      <div th:case="*">默认值</div> 
</div>

循环处理

<div th:each="name : ${names}">
   <div th:text="${name}"></div>
</div>

javascript需要注意的问题

调用的前面需要加上javascript:
<button type="button" th:onclick="|javascript:dianji('${name}')|" >点击
</button>

项目的热部署

1. Setting中设置--->Build--->Compiler--->勾选Build project Automatically
2. 按住Ctrl+Alt+Shift+/ ----> 选择Registry ---> 勾选compiler.automake.allow.when.app.running
3. 添加spring-boot-devtools依赖

compile('org.springframework.boot:spring-boot-devtools')

4. 为了让静态页面修改之后也能热部署,需要干两件事情,
在gradle中文件最后修改bootRun任务
bootRun{
addResources=true
}

在application.properties中添加
#热部署静态页面
spring.thymeleaf.cache=false
# 使用HTML5标准
spring.thymeleaf.mode=HTML5
# 设置当前为开发模式
spring.profiles.active=dev

注意:
若想让热部署生效, 咱们需要以调试的模式启动springboot项目,修改完java代码需要Build project或者Ctrl+F9才能重新加载java代码,当项目开发完成之后,建议大家注释掉热部署相关的依赖和配置

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【深圳校区】thymeleaf模版技术

0 个回复