详解静态资源处理、Thymeleaf 模板

最新推荐文章于 2023-12-25 16:03:22 发布

Kc635908933

最新推荐文章于 2023-12-25 16:03:22 发布

阅读量884

点赞数

分类专栏： Java 文章标签： spring boot

本文链接：https://blog.csdn.net/Kc635908933/article/details/115311369

版权

Java 专栏收录该内容

58 篇文章

订阅专栏

本文详细讲解了如何在SpringBoot项目中管理静态资源，包括静态资源映射规则、自定义映射和首页处理。重点介绍了Thymeleaf模板引擎的引入、配置及基本语法，帮助开发者轻松处理前后端分离的页面渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 静态资源处理

1.1 简介

写请求非常简单，那我们要引入我们前端资源，我们项目中有许多的静态资源，比如css，js 等文件，这个 SpringBoot 怎么处理呢？
如果我们是一个 web 应用，我们的 main下会有一个 webapp，我们以前都是将所有的页面导在这里面的，对吧！但是我们现在的 pom 呢，打包方式是为 jar 的方式，那么这种方式 SpringBoot 能不能来给我们写页面呢？当然是可以的，但是 SpringBoot 对于静态资源放置的位置，是有规定的！

我们先来聊聊这个静态资源映射规则：

SpringBoot中，SpringMVC的web配置都在 WebMvcAutoConfiguration 这个配置类里面；
我们可以去看看 WebMvcAutoConfigurationAdapter 中有很多配置方法；
有一个方法：addResourceHandlers 添加资源处理;
读一下源代码：比如所有的/webjars/** ，都需要去 classpath:/META-INF/resources/webjars/ 找对应的资源；

1.2 静态资源映射规则

1、看一下源码：

2、得出结论，以下四个目录存放的静态资源可以被我们识别：

"classpath:/META-INF/resources/"
"classpath:/resources/"
"classpath:/static/"
"classpath:/public/"

3、我们可以在 resources 根目录下新建对应的文件夹，都可以存放我们的静态文件；

1.3 自定义静态资源映射规则

我们也可以自己通过配置文件来指定一下，哪些文件夹是需要我们放静态资源文件的，在application.properties中配置；

spring.resources.static-locations=
                        classpath:/coding/,classpath:/ss/

1.3 总结

在springboot，我们可以使用一下方式处理静态资源
- webjars localhost:8080/webjars/
- public，static，/**，resources localhost:8080/
优先级：resources > static（默认） > public

二. 首页处理

2.1 index.html

解析源码

private Optional<Resource> getWelcomePage() {
    String[] locations = getResourceLocations(this.resourceProperties.getStaticLocations());
    // ::是java8 中新引入的运算符
    // Class::function的时候function是属于Class的，应该是静态方法。
    // this::function的funtion是属于这个对象的。
    // 简而言之，就是一种语法糖而已，是一种简写
    return Arrays.stream(locations).map(this::getIndexHtml).filter(this::isReadable).findFirst();
}
// 欢迎页就是一个location下的的 index.html 而已
private Resource getIndexHtml(String location) {
    return this.resourceLoader.getResource(location + "index.html");
}

截图说明

欢迎页，静态资源文件夹下的所有 index.html 页面；被 /** 映射。
比如我访问 http://localhost:8080/ ，就会找静态资源文件夹下的 index.html

2.2 图标

在配置文件中，关闭 SpringBoot 默认图标

#关闭默认图标
spring.mvc.favicon.enabled=false

自己放一个图标在静态资源目录下，我放在 public 目录下
清除浏览器缓存Ctrl + F5！刷新网页，发现图标已经变成自己的了！

三. Thymeleaf [ 重要 ]

3.1 模板引擎

前端交给我们的页面，是 html 页面。如果是我们以前开发，我们需要把他们转成 jsp 页面，jsp 好处就是当我们查出一些数据转发到 JSP 页面以后，我们可以用 jsp 轻松实现数据的显示，及交互等。
jsp 支持非常强大的功能，包括能写 Java 代码，但是呢，我们现在的这种情况，SpringBoot 这个项目首先是以jar的方式，不是 war，像第二，我们用的还是嵌入式的 Tomcat，所以呢，他现在默认是不支持 jsp 的。
那不支持 jsp，如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦，那怎么办呢？

SpringBoot推荐你可以来使用模板引擎：

模板引擎，我们其实大家听到很多，其实 jsp 就是一个模板引擎，还有用的比较多的 freemarker，包括 SpringBoot 给我们推荐的 Thymeleaf，模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的。

3.2 引入 Thymeleaf

推荐三个网址：

Thymeleaf 官网：https://www.thymeleaf.org/
Thymeleaf 在Github 的主页：https://github.com/thymeleaf/thymeleaf
Spring官方文档：找到我们对应的版本https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

找到对应的pom依赖：可以适当点进源码看下本来的包！

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

Maven 会自动下载 jar 包，我们可以去看下下载的东西；

3.3 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 什么都不需要配置，只需要将他放在指定的文件夹下即可！

测试：
1、编写一个 TestController

@Controller
public class TestController {
    
    @RequestMapping("/test")
    public String test1(){
        //classpath:/templates/test.html
        return "test";
    }
    
}

2、编写一个测试页面 test.html 放在 templates 目录下

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

3、结果

3.4 Thymeleaf 语法学习

要学习语法，还是参考官网文档最为准确，我们找到对应的版本看一下；
Thymeleaf 官网：https://www.thymeleaf.org/
简单看一下官网！我们去下载 Thymeleaf 的官方文档！在线文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

3.4.1 Thymeleaf 入门

我们做个最简单的练习：我们需要查出一些数据，在页面中展示

修改测试请求，增加数据传输；

@RequestMapping("/t1")
public String test1(Model model){
    //存入数据
    model.addAttribute("msg","Hello,Thymeleaf");
    //classpath:/templates/test.html
    return "test";
}

我们要使用 thymeleaf，需要在html文件中导入命名空间的约束，方便提示。

 xmlns:th="http://www.thymeleaf.org"

写一下前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>狂神说</title>
</head>
<body>
<h1>测试页面</h1>

<!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

启动测试

OK，入门搞定，我们来认真研习一下Thymeleaf的使用语法！

3.4.2 Thymeleaf 语法

1、我们可以使用任意的 th:attr 来替换Html中原生属性的值！

2、我们能写哪些表达式呢

  Selection Variable Expressions: *{...}：选择表达式：和${}在功能上是一样；
  Message Expressions: #{...}：获取国际化内容
  Link URL Expressions: @{...}：定义URL；
  Fragment Expressions: ~{...}：片段引用表达式

Literals（字面量）
      Text literals: 'one text' , 'Another one!' ,…
      Number literals: 0 , 34 , 3.0 , 12.3 ,…
      Boolean literals: true , false
      Null literal: null
      Literal tokens: one , sometext , main ,…
      
Text operations:（文本操作）
    String concatenation: +
    Literal substitutions: |The name is ${name}|
    
Arithmetic operations:（数学运算）
    Binary operators: + , - , * , / , %
    Minus sign (unary operator): -
    
Boolean operations:（布尔运算）
    Binary operators: and , or
    Boolean negation (unary operator): ! , not
    
Comparisons and equality:（比较运算）
    Comparators: > , < , >= , <= ( gt , lt , ge , le )
    Equality operators: == , != ( eq , ne )
    
Conditional operators:条件运算（三元运算符）
    If-then: (if) ? (then)
    If-then-else: (if) ? (then) : (else)
    Default: (value) ?: (defaultvalue)
    
Special tokens:
    No-Operation: _

测试：
1、我们编写一个 Controller，放一些数据

@RequestMapping("/test2")
public String test2(Map<String,Object> map){
    //存入数据
    map.put("msg","<h1>Hello</h1>");
    map.put("users", Arrays.asList("qinjiang","kuangshen"));
    //classpath:/templates/test.html
    return "test";
}

2、测试页面取出数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>Test页面</h1>
    <!--不转义-->
    <div th:text="${msg}"></div>
    <!--转义-->
    <div th:utext="${msg}"></div>

    <hr>
	<!--遍历数据-->
	<!--th:each每次遍历都会生成当前这个标签：官网#9-->
    <h3 th:each="user:${users}" th:text="${user}"></h3>
    <hr>
     <!--行内写法：官网#12-->
    <h3 th:each="user:${users}">[[ ${user} ]]</h3>
</div>
</body>
</html>