thymeleaf使用

一、总结与计划

1.1 总结

• SpringBoot自动配置回顾

• 基于SpringBoot整合SSM开发

  • 一个SpringBoot项目本身就是依赖Spring：spring-boot-starter

  • 整合SpringMVC：spring-boot-starter-web

  • 整合MyBatis

    • Druid：druid-spring-boot-starter

    • MyBatis：mybatis-spring-boot-starter

  • 使用案例

    • 数据表

    • 实体类

    • DAO接口

    • Mapper映射

    • servcie

      • 接口

      • 实现类

    • 控制器

  • 基于SpringBoot的单元测试

    • @RunWith(SpringRunner.class)

    • @SpringBootTest(***Application.class)

  • 全局异常处理

  • SpringBoot基于Maven配置profile

1.2 计划

• 自定义starter

• thymeleaf

• 基于thymeleaf练习

二、自定义starter

学习自定义starter目的：

• 加深对SpringBoot自动配置的理解

• 封装特定业务实现、提高代码的重用

• 对SpringBoot内置starter的扩展

2.1 自定义starter的流程说明

• SpringBoot自动配置流程图

• 自定义starter流程

2.2 自定义starter的实现

2.2.1 创建一个新的maven项目

• 步骤略

• 导入SpringBoot的依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/>
    </parent>
​
    <groupId>com.qfedu</groupId>
    <artifactId>hello-spring-boot-starter</artifactId>
    <version>2.2.1</version>
    <packaging>jar</packaging>
​
    <dependencies>
        <!-- SpringBoot -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
​
</project>

2.2.2 创建starter的业务实现类

public class HelloTemplate {
    
    public void add(){
        System.out.println("HelloTemplate----add");
    }
​
    public void del(){
        System.out.println("HelloTemplate----del");
    }
​
    public void list(){
        System.out.println("HelloTemplate----list");
    }
​
}

2.2.3 创建自动类

@SpringBootConfiguration
@ConditionalOnClass(HelloTemplate.class)
public class HelloAutoConfig {
    @Bean
    public HelloTemplate getHelloTemplate(){
        return new HelloTemplate();
    }
}

2.2.4 创建并配置spring.factories

• 在resources目录下创建META-INF目录

• META-INF目录下创建spring.factories，配置如下

org.springframework.boot.autoconfigure.EnableAutoConfiguration=\
  com.qfedu.hello.HelloAutoConfig

2.2.5 打包

• clean

• install

2.2.6 在SpringBoot项目中使用自定义starter

• 添加自定义starter的依赖

<dependency>
    <groupId>com.qfedu</groupId>
    <artifactId>hello-spring-boot-starter</artifactId>
    <version>2.2.1</version>
</dependency>

• 测试类测试

@RunWith(SpringRunner.class)
@SpringBootTest(classes = SpringbootSsmApplication.class)
public class HelloTemplateTest {
​
    @Resource
    private HelloTemplate helloTemplate;
​
    @Test
    public void testMethod(){
        helloTemplate.add();
    }
​
}

2.3 自定义starter的实现扩展

当我们自定义starter在实现具体的业务时，需要全局属性配置

• 创建属性类：HelloProperties.java

  @ConfigurationProperties(prefix = "spring.hello")
  public class HelloProperties {
  ​
      private String pro1; //spring.hello.pro1
      private String pro2; //spring.hello.pro2
      private String pro3; //...
  ​
      //getter & setter
  }

• 在业务实现类中通过构造器强制要求传递属性类对象

  public class HelloTemplate {
  ​
      private HelloProperties helloProperties;
      
      //有参构造器传递属性类对象
      public HelloTemplate(HelloProperties helloProperties) {
          this.helloProperties = helloProperties;
      }
  ​
      public void add(){
          System.out.println("HelloTemplate----add:"+helloProperties.getPro1());
      }
  ​
      public void del(){
          System.out.println("HelloTemplate----del:"+helloProperties.getPro2());
      }
  ​
      public void list(){
          System.out.println("HelloTemplate----list:"+helloProperties.getPro3());
      }
  ​
  }

• 在自动配置类中加载属性

  @SpringBootConfiguration
  @ConditionalOnClass(HelloTemplate.class)
  @EnableConfigurationProperties(HelloProperties.class)
  @ConditionalOnProperty(prefix = "spring.hello",name = {"pro1","pro2","pro3"},matchIfMissing = false)
  public class HelloAutoConfig {
  
      @Autowired
      private HelloProperties helloProperties;
  
      @Bean
      public HelloTemplate getHelloTemplate(){
          return new HelloTemplate(helloProperties);
      }
  }
  

• 再次测试

  • 添加自定义starter的依赖

    <dependency>
        <groupId>com.qfedu</groupId>
        <artifactId>hello-spring-boot-starter</artifactId>
        <version>2.2.1</version>
    </dependency>
    

  • 在全局配置文件apllication.yml配置属性

    spring:
      hello:
        pro1: aaa
        pro2: bbb
        pro3: ccc
    

三、Thymeleaf

3.1 概述

• 前端技术

• JSP

  • JSP优点

    • 动态显示数据

    • 支持逻辑控制(条件、循环)

    • 写Java代码

  • JSP不足

    • JSP必须依赖web容器(Tomcat)才能运行

    • JSP中可以包含java\jstl\el\html\js\css组合，页面的可读性比较差

问题：有没有一种页面显示技术，技能保留JSP的动态显示数据的优点又能避免JSP存在的不足呢？

• Thymeleaf

  • 是一个用于前端数据显示的模版引擎，他完全可以替代JSP，同时弥补了JSP的不足。

  • 特点：

    • 基于HTML的动态网页（一个thymeleaf页面其实就是一个HTML页面）

    • 基于浏览器运行可以看到静态效果，同时基于服务器运行能够动态显示数据

    • 开发便捷、效率高

3.2 Thymeleaf的基本使用

• 导入依赖

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

• 配置thymeleaf模版属性(SpringBoot中包了thymeleaf的相关配置，如果我们需要对默认配置进行修改，则可以在application.yml中进行)

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

• 创建控制器

  @Controller
  public class TestController {
  
      @RequestMapping("/test")
      public String test(Model model){
          System.out.println("------->>>>>>>>>>test");
          model.addAttribute("str","从控制器传递到页面的数据");
          return "index";
      }
  
  }
  

• 创建对应的HTML

  • HTML文件放在templates

  • 在HTML文件的html标签中引入th命名空间

  • 通过th标签可以获取动态数据(从控制器传递到HTML数据)

  <!DOCTYPE html>
  <html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      ---test  ---- index
      <label th:text="${str}"></label>
  </body>
  </html>
  

   

3.3 Thymeleaf常用语法

3.3.1 获取变量值

• 简单数据

<tag th:text="${key}"></tag>

• 对象数据

<p th:text="${book.bookName}"></p>

3.3.2 运算符

• 算数运算符

• 关系运算符

<p th:text="${book.bookName} == 'Java'?'我买':'我不买'"></p>
<p th:text="${book.bookPrice + 3 }"></p>
<p th:text="${book.bookPrice} * 0.8"></p>
<p th:text="'作者:'+${book.bookAuthor}"></p>

3.3.3 *的使用

<div th:object="${book}">
    <p th:text="*{bookId}"></p>
    <p th:text="*{bookName}"></p>
    <p th:text="*{bookAuthor}"></p>
    <p th:text="*{bookPrice}"></p>
    <p th:text="*{bookDesc}"></p>
</div>

3.3.4 内联使用

• HTML标签内部（innerHTML）取值 th:inline="text"

  <label th:inline="text">[[${str}]]</label>
  

• 在Javascript标签内部( JS代码)取值

  <script type="text/javascript" th:inline="javascript">
      var s = [[${str}]];
      alert(s);
  </script>
  

• 在style标签内部取值

  <style type="text/css" th:inline="css">
      div{color: [[${color}]]}
  </style>
  

3.3.5 流程控制

分支语句(条件)

• if 如果条件成立就显示

  <label th:if="${book.bookPrice} >= 30">太贵了</label>
  

• unless 如果条件不成立就显示

  <label th:unless="${book.bookPrice} >= 30">-太贵了-</label>
  

• switch

  <div th:switch="${user.gender}">
      <p th:case="M">男</p>
      <p th:case="F">女</p>
      <p th:case="*">性别不详</p>
  </div>
  

循环语句

• th:each

  <table>
      <caption>图书信息列表</caption>
      <tr>
          <th>编号</th>
          <th>名称</th>
          <th>作者</th>
          <th>价格</th>
          <th>描述</th>
      </tr>
      <tr th:each="b:${books}">
          <td th:text="${b.bookId}"></td>
          <td th:text="${b.bookName}"></td>
          <td th:text="${b.bookAuthor}"></td>
          <td th:text="${b.bookPrice}"></td>
          <td th:text="${b.bookDesc}"></td>
      </tr>
  </table>