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

最新推荐文章于 2021-07-30 14:26:20 发布

訾博ZiBo

最新推荐文章于 2021-07-30 14:26:20 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/qq_29689343/article/details/108552420

版权

Spring Boot 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

一、自动装配概述

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

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

图示：

测试结果：

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

Thymeleaf 在Github 的主页：

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

一、自动装配概述

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

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

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

二、静态资源导入探究

1、默认策略

说明

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

图示：

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即可

图示：

测试结果：

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

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

四、Thymeleaf模板引擎

1、模板引擎

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

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

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

SpringBoot推荐使用模板引擎！

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

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

2、引入Thymeleaf

Maven依赖坐标：

<!--thymeleaf-->
<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>

测试结果：

五、Thymeleaf语法入门

1、官方文档

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

Thymeleaf 官网：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>
<!--命名空间：xmlns:th="http://www.thymeleaf.org"-->
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>测试Hello页面！</h1>
    <!--所有的html元素都能被thymeleaf接管-->
    <h1 th:text="${name}"></h1>
</body>
</html>

测试结果：

六、Thymeleaf语法再学习

1、语法概览（官方）

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页面：

<!DOCTYPE html>
<!--命名空间：xmlns:th="http://www.thymeleaf.org"-->
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>测试Hello页面！</h1>
    <!--所有的html元素都能被thymeleaf接管-->
    <h1 th:text="${name}"></h1>
    <ul>
        <li th:text="${item}" th:each="item : ${list}">这是内容</li>
    </ul>
</body>
</html>

测试结果：

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

    <ul>
        <li th:each="item : ${list}">[[${item}]]</li>
    </ul>

訾博ZiBo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录