zoukankan      html  css  js  c++  java
  • springboot学习笔记-thymeleaf

    Thymeleaf的介绍

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

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

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

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

    与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>
    

    几个注意点:

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

    application.properties配置

    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
    

    几个注意点:

    • 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:hrefth: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

  • 相关阅读:
    2019-2020-1学期 20192419 《网络空间安全专业导论》第一周学习总结 (读书心得)
    2019-2020-1学期 20192419 《网络空间安全专业导论》第一周学习总结 (读书笔记)
    DFA最小化,语法分析初步
    作业8非确定的自动机NFA确定化为DFA
    作业7 正规式、正规文法与自动机
    作业6 正规文法与正规式
    作业5 词法分析程序的设计与实现
    作业4 文法和语言总结与梳理
    作业3 语法树,短语,直接短语,句柄
    作业2理解文法和语文
  • 原文地址:https://www.cnblogs.com/superfj/p/8961996.html
Copyright © 2011-2022 走看看