【Spring Boot】007-Spring Boot Web开发：静态资源导入、Thymeleaf使用

旧城等待， 2023-10-05 09:58 19阅读 0赞

**目录**

一、自动装配概述

Spring Boot导致帮我们配置了什么，我们能否修改，我们如何修改：

二、静态资源导入探究

1、默认策略

说明

图示：

2、自定义策略

在配置文件中定义

在Java中编码定义

三、首页

1、在static（或其他可被识别的文件夹）下创建一个index.html即可

图示：

测试结果：

2、templates目录下的资源文件只能通过Controller来访问

四、Thymeleaf模板引擎

1、模板引擎

2、引入Thymeleaf

Thymeleaf官网：

Thymeleaf 在Github 的主页：

spring官方文档：

Maven依赖坐标：

3、Thymeleaf分析

4、代码演示

HelloController类：

hello.html页面：

测试结果：

五、Thymeleaf语法入门

1、官方文档

2、简单表达式

3、字面值

4、文本操作

5、算术运算

6、布尔运算

7、比较运算符

8、条件运算符

9、特殊标记

10、测试

HelloController类：

hello.html页面：

测试结果：

六、Thymeleaf语法再学习

1、语法概览（官方）

2、测试th:each

HelloController类：

hello.html页面：

测试结果：

html遍历元素也可以这么写（但不推荐这么写）：

--------------------

# 一、自动装配概述 #

### Spring Boot导致帮我们配置了什么，我们能否修改，我们如何修改： ###

XXXAutoConfiguration：像容器中自动配置组件（Spring Boot帮我们配置的内容）；

XXXProperties：自动配置类，装配配置文件中自定义的一些内容（我们自定义的内容）；

# 二、静态资源导入探究 #

## 1、默认策略 ##

### 说明 ###

直接放在resources下的public、resources、static（默认）三个文件夹下可直接识别，优先级见序号：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

### 图示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 2、自定义策略 ##

> 时间：2021年08月16日 15时57分34秒

### 在配置文件中定义 ###

spring.mvc.static-path-pattern=/static/**
    spring.resource.static-locations=classpath:/static/

### 在Java中编码定义 ###

package com.zibo.api.config;
    
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    public class MyWebMvcConfig implements WebMvcConfigurer {
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/static/**")
                    .addResourceLocations("classpath:/static/");
        }
    }

# 三、首页 #

## 1、在static（或其他可被识别的文件夹）下创建一个index.html即可 ##

### 图示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

### 测试结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 2、templates目录下的资源文件只能通过Controller来访问 ##

（需要用到模板引擎暂不演示）

# 四、Thymeleaf模板引擎 #

## 1、模板引擎 ##

前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。

jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，SpringBoot这个项目首先是以jar的方式，不是war，像第二，我们用的还是嵌入式的Tomcat，所以呢，**他现在默认是不支持jsp的**。

那不支持jsp，如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦，那怎么办呢？

**SpringBoot推荐使用模板引擎！**

模板引擎，我们其实大家听到很多，其实jsp就是一个模板引擎，还有用的比较多的freemarker，包括SpringBoot给我们推荐的Thymeleaf，模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的，什么样一个思想呢我们来看一下这张图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是jsp还是其他模板引擎，都是这个思想。只不过呢，就是说不同模板引擎之间，他们可能这个语法有点不一样。其他的我就不介绍了，我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这模板引擎呢，是一个高级语言的模板引擎，他的这个语法更简单。而且功能更强大。

## 2、引入Thymeleaf ##

### Thymeleaf官网： ###

[https://www.thymeleaf.org/][https_www.thymeleaf.org]

### Thymeleaf 在Github 的主页： ###

[https://github.com/thymeleaf/thymeleaf][https_github.com_thymeleaf_thymeleaf]

### spring官方文档： ###

[https://docs.spring.io/spring-boot/docs/2.3.3.RELEASE/reference/htmlsingle/\#using-boot-starter][https_docs.spring.io_spring-boot_docs_2.3.3.RELEASE_reference_htmlsingle_using-boot-starter]

### Maven依赖坐标： ###

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

## 3、Thymeleaf分析 ##

前面呢，我们已经引入了Thymeleaf，那这个要怎么使用呢？

我们首先得按照SpringBoot的自动配置原理看一下我们这个Thymeleaf的自动配置规则，在按照那个规则，我们进行使用。

我们去找一下Thymeleaf的自动配置类：ThymeleafProperties

@ConfigurationProperties(
        prefix = "spring.thymeleaf"
    )
    public class ThymeleafProperties {
        private static final Charset DEFAULT_ENCODING;
        public static final String DEFAULT_PREFIX = "classpath:/templates/";
        public static final String DEFAULT_SUFFIX = ".html";
        private boolean checkTemplate = true;
        private boolean checkTemplateLocation = true;
        private String prefix = "classpath:/templates/";
        private String suffix = ".html";
        private String mode = "HTML";
        private Charset encoding;
    }

我们可以在其中看到默认的前缀和后缀！

我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。

**使用thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可！**

## 4、代码演示 ##

### HelloController类： ###

package com.zibo.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class HelloController {
        //http://localhost:8080/hello
        @RequestMapping("/hello")
        public String hello(){
            return "hello";
        }
    }

### hello.html页面： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>测试Hello页面！</h1>
    </body>
    </html>

### 测试结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

# 五、Thymeleaf语法入门 #

## 1、官方文档 ##

要学习语法，还是参考官网文档最为准确，我们找到对应的版本看一下；

Thymeleaf 官网：[https://www.thymeleaf.org/][https_www.thymeleaf.org]

## 2、简单表达式 ##

**变量表达式：**$\{…\}

**选择变量表达式：**\*\{…\}

**消息表达式：**\#\{…\}

**链接URL表达式：**@\{…\}

**分段表达式：**~\{…\}

## 3、字面值 ##

**文本：** 'one Text '， 'Another one!”,……

**数字：**0，34，3.0，12.3，…

**布尔值：**true , false

**空值：**null

**字面记号：**一个，sometext, main，…

## 4、文本操作 ##

**字符串连接：**\+

**文字替换：**The name is $\{name\}

## 5、算术运算 ##

**二元运算符：**\+、-、\*、/、%

**负号(一元运算符)：**\-

## 6、布尔运算 ##

**二元运算符：**and , or

**否：**!，not

## 7、比较运算符 ##

**比较：**> , < , >= , <= ( gt , lt , ge , le )  
**等于：**== , != ( eq , ne )

## 8、条件运算符 ##

**If-then：**(if) ? (then)  
**If-then-else：**(if) ? (then) : (else)  
**Default：**(value) ?: (defaultvalue)

## 9、特殊标记 ##

**无操作：**\_

## 10、测试 ##

### HelloController类： ###

package com.zibo.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class HelloController {
        //http://localhost:8080/hello
        @RequestMapping("/hello")
        public String hello(Model model){
            model.addAttribute("name","訾博");
            return "hello";
        }
    }

### hello.html页面： ###

<!DOCTYPE html>
    
    <html lang="en"  xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>测试Hello页面！</h1>
        
        <h1 th:text="${name}"></h1>
    </body>
    </html>

### 测试结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6][]

# 六、Thymeleaf语法再学习 #

## 1、语法概览（官方） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7][]

## 2、测试th:each ##

### HelloController类： ###

package com.zibo.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import java.util.ArrayList;
    import java.util.List;
    
    @Controller
    public class HelloController {
        //http://localhost:8080/hello
        @RequestMapping("/hello")
        public String hello(Model model){
            List<String> list = new ArrayList<>();
            list.add("大哥");
            list.add("二哥");
            list.add("三哥");
            list.add("四哥");
            model.addAttribute("list",list);
            model.addAttribute("name","訾博");
            return "hello";
        }
    }

### hello.html页面： ###

### 测试结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8][]

### html遍历元素也可以这么写（但不推荐这么写）： ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200912175331681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200912175406145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200912180053856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200912180120703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200913084212423.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_www.thymeleaf.org]: https://www.thymeleaf.org/
[https_github.com_thymeleaf_thymeleaf]: https://github.com/thymeleaf/thymeleaf
[https_docs.spring.io_spring-boot_docs_2.3.3.RELEASE_reference_htmlsingle_using-boot-starter]: https://docs.spring.io/spring-boot/docs/2.3.3.RELEASE/reference/htmlsingle/#using-boot-starter
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200913085357490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200913113310523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200913113629805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200913114156663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70