SpringBoot的静态资源与Thymeleaf模板

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>

通过thymeleaf的表达式来取消息名字为msg的值。

 

测试:

 


 

posted @   乌鸦の学习  阅读(290)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示