springboot学习笔记-thymeleaf

时间 2019-11-13

标签 springboot 学习笔记 thymeleaf 栏目 Spring 繁體版

原文原文链接

Thymeleaf的介绍

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 相似的模板引擎，它能够彻底替代 JSP 。相较与其余的模板引擎，它有以下三个极吸引人的特色：css

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可让美工在浏览器查看页面的静态效果，也可让程序员在服务器查看带数据的动态页面效果。这是因为它支持 html 原型，而后在 html 标签里增长额外的属性来达到模板+数据的展现方式。浏览器解释 html 时会忽略未定义的标签属性，因此 thymeleaf 的模板能够静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。html
Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，能够直接套用模板实现JSTL、 OGNL表达式效果，避免天天套模板、该jstl、改标签的困扰。同时开发人员也能够扩展和建立自定义的方言。前端
Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，能够快速的实现表单绑定、属性编辑器、国际化等功能。java

与springboot的整合

项目构建

先贴出pom文件程序员

<properties>
        <java.version>1.8</java.version>
        <!-- 替换成3.0版本-->
        <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
    </properties>
    <packaging>jar</packaging>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.1.RELEASE</version>
        <relativePath/>
    </parent>

    <dependencies>
        <!-- spring boot 配置 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- spring boot 热部署-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <fork>true</fork><!-- fork:若是没有该配置，这个devtools不会起做用，即应用不会restart -->
                </configuration>
            </plugin>
        </plugins>
    </build>

几个注意点：web

这里使用thymeleaf3.0版本，springboot自带的是2.x版本的，灰常很差用，特别是标签的校验，必须是严格的xml格式，标签必需要求闭合，3.0就不会再有校验的烦恼了
热部署，springboot是支持热部署的，主要是靠devtools的依赖，省去每次修改页面再重启的烦恼

application.properties配置spring

server.port=80

spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5

几个注意点：bootstrap

html文件都放在resource目录下的templates文件下
静态资源，好比css，js，都是放在resource目录下的static文件夹下

整合

先先一个实体类，user，有姓名 username，地址 address两个属性
在resource/templates目录下新建一个，index.html，内容以下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span th:text="${user.address}"></span>
<p th:text="${user.username}"></p>
</body>
</html>

编写controller类，内容以下：

package com.controller;

import com.domain.UserVo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class IndexController {

    @GetMapping(value = "")
    public static String index(HttpServletRequest request){
        UserVo userVo = new UserVo();
        userVo.setAddress("上海");
        userVo.setUsername("小明");
        request.setAttribute("user",userVo);
        return "index";
    }
}

最后启动服务，访问: http://127.0.0.1 查看结果。thymeleaf整个完毕

基础语法

获取变量值

<p th:text="'Hello！, ' + ${name} + '!'" >3333</p>

能够看出获取变量值用$符号,对于javaBean的话使用变量名.属性名方式获取,这点和EL表达式同样.后端

另外$表达式只能写在th标签内部,否则不会生效,上面例子就是使用th:text标签的值替换p标签里面的值,至于p里面的原有的值只是为了给前端开发时作展现用的.这样的话很好的作到了先后端分离.浏览器

引入URL

Thymeleaf对于URL的处理是经过语法@{…}来处理的

<a th:href="@{http://blog.csdn.net/u012706811}">绝对路径</a>
<a th:href="@{/}">相对路径</a>
<a th:href="@{css/bootstrap.min.css}">Content路径,默认访问static下的css文件夹</a>

相似的标签有:th:href和th:src

字符串替换

不少时候可能咱们只须要对一大段文字中的某一处地方进行替换，能够经过字符串拼接操做完成：

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

一种更简洁的方式：

<span th:text="|Welcome to our application, ${user.name}!|">

固然这种形式限制比较多，|…|中只能包含变量表达式${…}，不能包含其余常量、条件表达式等。

元素符

在表达式中可使用各种算术运算符，例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符>, <, <=,>=，==,!=均可以使用，惟一须要注意的是使用<,>时须要用它的HTML转义符：

th:if="${prodStat.count} > 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

条件

if/unless
Thymeleaf中使用th:if和th:unless属性进行条件判断，下面的例子中，标签只有在th:if中条件成立时才显示：

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:unless于th:if刚好相反，只有表达式中的条件不成立，才会显示其内容。

Switch
Thymeleaf一样支持多路选择Switch结构：

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
</div>

默认属性default能够用*表示：

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

循环

渲染列表数据是一种很是常见的场景，例如如今有n条记录须要渲染成一个表格，该数据集合必须是能够遍历的，使用th:each标签：

<body>
  <h1>Product list</h1>

  <table>
    <tr>
      <th>NAME</th>
      <th>PRICE</th>
      <th>IN STOCK</th>
    </tr>
    <tr th:each="prod : ${prods}">
      <td th:text="${prod.name}">Onions</td>
      <td th:text="${prod.price}">2.41</td>
      <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>
  </table>

  <p>
    <a href="../home.html" th:href="@{/}">Return to home</a>
  </p>
</body>

能够看到，须要在被循环渲染的元素（这里是）中加入th:each标签，其中th:each=”prod : ${prods}”意味着对集合变量prods进行遍历，循环变量是prod在循环体中能够经过表达式访问。

thymeleaf热部署问题　　很简单: 1.配置文件中加上 spring.thymeleaf.cache=false 2.若是你用的是idea,那么编辑完html后使用ctrl + shift + F9 rebuild module一下就好了,其余的编辑器我就不知道了,仍是推荐用IDEA