thymeleaf使用

分手后的思念是犯贱 2022-12-05 05:29 160阅读 0赞

## 一、总结与计划 ##

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自动配置流程图
    
    <table> 
     <thead> 
      <tr> 
       <th>&nbsp;</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><img alt="" height="743" src="https://img-blog.csdnimg.cn/20200909153838936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDg1MDQ=,size_16,color_FFFFFF,t_70" width="840"></td> 
      </tr> 
     </tbody> 
    </table>
 *  自定义starter流程
    
    <table> 
     <thead> 
      <tr> 
       <th>&nbsp;</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><img alt="" height="774" src="https://img-blog.csdnimg.cn/20200909153845651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDg1MDQ=,size_16,color_FFFFFF,t_70" width="1200"></td> 
      </tr> 
     </tbody> 
    </table>

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>
            
            <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 获取变量值

*  简单数据

*  对象数据

3.3.2 运算符

*  算数运算符
 *  关系运算符

3.3.3 \*的使用

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>