SpringBoot的静态资源与Thymeleaf模板

静态资源

通过webjars访问

webjars资源网：https://www.webjars.org/

通过该网站导入的meven依赖会呈现固定结构。

以jQuery为例：

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>jquery</artifactId>
    <version>3.6.0</version>
</dependency>

导入的依赖为如下结构：

浏览器页面可以通过/webjars路径替代该文件路径可以访问路径下的资源：

通过资源路径访问

SpringBoot有默认的资源路径，在该文件夹目录下的所有资源可以直接访问：

访问测试：

扫描优先级

在SpringBoot中扫描静态资源目录扫描优先级为：

resources > static > public

也就是说当相同名字的资源在多个目录下存在时，会优先访问扫描优先级高的资源。

自定义资源路径

通过配置文件自定义资源路径：

spring:
  mvc:
    static-path-pattern:

注意，自定义资源路径设置后，默认的资源路径将会失效。

Thymeleaf模板引擎

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

拓展

通过Ctrl+N快捷键查找类：ThymeleafPropertise

所有在SpringBoot框架集合中导入的模块都会有一个Propertise文件为配置文件！

可以看到如下视图解析器代码：

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;
    private boolean cache;
    private Integer templateResolverOrder;
    private String[] viewNames;
    private String[] excludedViewNames;
    private boolean enableSpringElCompiler;
    private boolean renderHiddenMarkersBeforeCheckboxes;
    private boolean enabled;
    private final ThymeleafProperties.Servlet servlet;
    private final ThymeleafProperties.Reactive reactive;

    public ThymeleafProperties() {
        this.encoding = DEFAULT_ENCODING;
        this.cache = true;
        this.renderHiddenMarkersBeforeCheckboxes = false;
        this.enabled = true;
        this.servlet = new ThymeleafProperties.Servlet();
        this.reactive = new ThymeleafProperties.Reactive();
    }

可以发现，该引擎解析了templates目录下的文件。

置顶首页

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

将首页放到templates目录下：

创建首页类：

package com.rsp2012.www.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class Index {
    //使用根路径来指代首页
    @RequestMapping("/")
    public String index(){
        //返回的index通过Thymeleaf加上后缀html，在templates目录中被找到
        return "index";
    }
}

测试访问：

后端传值给前端

后端传递消息：

package com.rsp2012.www.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class Index {
    //使用根路径来指代首页
    @RequestMapping("/")
    //传一个Model对象进方法，Model是一个数据模型类
    public String index(Model model){
        //使用model的方法给前端传递一个“消息”，该消息的名字为msg，值为hello,springboot
        model.addAttribute("msg","hello,springboot");
        //返回的index通过Thymeleaf加上后缀html，在templates目录中被找到
        return "index";
    }
}

前端主页设置：

<!DOCTYPE html>
<html lang="en">
<head>
<!--    导入中间件-->
    <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
    <title>Title</title>
</head>
<body>
<h1>这是首页</h1>
<!--使用th标签接管html的元素，使其可以使用thymeleaf的表达式-->
<div th:text="${msg}"></div>
</body>
</html>