39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页

★ WebJar支持

Spring Boot支持加载WebJar包中的静态资源(图片、JS、CSS),
WebJar包中的静态资源都会映射到/webjars/**路径。——这种方式下,完全不需要将静态资源复制到应用的静态资源目录下。只要添加webjar即可。假如在应用的某个JAR包中包含js/abc.js,那它实际的映射路径就是/webjars/js/abc.js 【底层秘密】:为何Spring Boot能支持加载Web Jar中的静态资源?
是因为Spring Boot包含了一个静态资源的加载目录: /MEAT-INF/resources
而所有的Web Jar其实就是一个包含了META-INF/resources目录的打包,而Java本身就能支持自动解压JAR包中的内容。1. Java本身就能读取jar包中的资源。
2. Spring Boot将META-INF/resources目录添加了静态资源加载目录。

代码演示:
需求:之前的前端页面比如要使用到一些jquery框架,都是需要把该框架的js资源拷贝到 resources 静态资源路径下面,然后在每个前端页面进行引入。
现在就是通过 Web Jar 的方式,通过在 pom文件今天添加依赖来引入就可以了,不用拷贝js、css那些资源到项目中。

到 maven 官网上下载jquery的web jar 包 依赖,同理下载 bootstrap 依赖
在这里插入图片描述

        <!-- jquery 的 web jar 包 --><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.6.0</version></dependency><!-- bootstrap 的 web jar 包 --><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>4.6.0</version></dependency>

在这里插入图片描述

在前端页面引入js等文件
在这里插入图片描述

可以看到样式都生效了。
在这里插入图片描述

▲ 版本无关的WebJar静态资源

原来的情况下,页面引用Webjar中的静态资源时,还需要书写版本号,这是很烦的。为了使用版本无关的静态资源,还需添加 webjars-locator-core.jar 依赖包即可。- 引用静态资源时无需书写版本号:/webjars/bootstrap/css/bootstrap.min.css  /webjars/jquery/jquery.js 上面写法会自动根据pom.xml文件所管理WarJar包的版本来为静态资源添加版本号。

代码演示:
添加这个依赖就可以了

        <!--支持版本无关的 Web Jar ,前端引入 Web Jar 相关的依赖可以不用写版本号--><dependency><groupId>org.webjars</groupId><artifactId>webjars-locator-core</artifactId><version>0.47</version></dependency>

即使没加版本号,样式也能生效。

在这里插入图片描述

▲ 清除WebJar静态资源(上面的那些 jquery、bootstrap)的缓存

为了清除静态资源的缓存,Spring Boot有两种做法:
——这两种做法,都只需要修改配置文件即可,无需改变页面源代码。A. 在静态资源URL后添加动态的hash字符串。spring.web.resources.chain.strategy.content.enabled=truespring.web.resources.chain.strategy.content.paths=/**上面配置为/**路径下所有静态资源的URL后添加动态的hash字符串。B. 在静态资源URL中添加固定的版本号。spring.web.resources.chain.strategy.fixed.enabled=truespring.web.resources.chain.strategy.fixed.paths=/**spring.web.resources.chain.strategy.fixed.version=v12345上面配置为/js/lib路径下所有静态资源的URL中添加静态V12版本号。

代码演示:
推荐方法1:因为是动态的字符串,每次生成的都不一样,浏览器就没法为这些静态资源生成缓存。

方法1: 在静态资源URL后添加动态的hash字符串。

只需要在配置文件上添加配置就可以,为 Web Jar 中的静态资源URL后添加动态的hash字符串,消除静态资源的缓存
在这里插入图片描述

在这里插入图片描述

方法2: 在静态资源URL中添加固定的版本号。

为 Web Jar 中的静态资源URL中添加固定的版本号来消除静态资源的缓存

在这里插入图片描述

在这里插入图片描述

★ 自定义项目的图标和主页

▲ 静态资源路径下的 favicon.ico 文件将被当成自定义图标

——  *.ico文件是图标文件,你可以通过网络在线工具来为任何图片(图片不要太大)生成图标

只要把这个文件放在静态资源路径下即可
比如 :static 、 public 等路径。

随便搜索一个在线生成 ico 的工具
在这里插入图片描述

换了几个浏览器都没有生成这个 ico 的项目图标
不知道是不是图片太大了
在这里插入图片描述

原因:
这个图片必须叫 favicon.ico ,自定义的名字不可以。

好像只有IE浏览器可以看出来,但是我试的时候没显示出来

▲ resource/templates目录的index.html文件会被当成首页

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60764.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十四、组合模式

一、什么是组合模式 组合&#xff08;Composite Pattern&#xff09;模式的定义&#xff1a;有时又叫作整体-部分&#xff08;Part-Whole&#xff09;模式&#xff0c;它是一种将对象组合成树状的层次结构的模式&#xff0c;用来表示“整体-部分”的关系&#xff0c;使用户对单…

从零开始搭建并运行mmsegmentation

安装&#xff1a; Step 1:创建Conda 环境并激活之 conda create --name openmmlab python3.8 -y conda activate openmmlab Step 2&#xff1a;CUDA版本选择&#xff0c;及安装Pytorch 关于设备GPU的cuda版本&#xff0c;根据如下的选择原则&#xff1a; 对于Ampere架构的…

无感刷新:Vue前端实现Token的无缝刷新机制

在现代Web应用程序中&#xff0c;用户身份验证和授权通常使用令牌&#xff08;Token&#xff09;机制来实现。然而&#xff0c;由于Token的过期时间限制&#xff0c;用户在长时间使用应用程序时可能需要重新登录。为了提供更好的用户体验&#xff0c;我们可以通过实现Token的无…

Python 和 C++ 使用细节差别

1. 循环中的可迭代对象长度 1. 循环中的可迭代对象长度 C 中&#xff0c;for循环中写明a.size()&#xff0c;每次循环这个值是重新计算的&#xff1b; # include “iostream” # include <vector> using namespace std;int main() {vector<int> a(10);int cnt 0…

7.Redis-list

list list常用命令lpushlrangelpushxrpushrpushxlpop / rpoplindexlinsertllenlremltrimlset 阻塞版本命令blpop/brpop 总结内部编码应用场景使用redis作为消息队列 redis中的 list 是一个双端队列, list 相当于是数组或者顺序表。list 并非是一个简单的数组&#xff0c;而是更…

拓世科技集团 | “书剑人生”李步云学术思想研讨会暨李步云先生九十华诞志庆

2023年&#xff0c;中国改革开放迎来了45周年&#xff0c;改革春风浩荡&#xff0c;席卷神州大地&#xff0c;45年间&#xff0c;中国特色社会主义伟大事业大步迈入崭新境界&#xff0c;一路上结出了饶为丰硕的果实。中华民族在这45年间的砥砺前行&#xff0c;不仅使中国的经济…

学会电子商务个性化这一招,让你的客户源源不断

在增加销售额和创建客户喜爱的品牌时&#xff0c;电子商务个性化是您成功的关键。但是&#xff0c;个性化您的在线购物体验的各个方面似乎都不是那么简单。 幸运的是&#xff0c;您看到了这一篇文章。在本文中&#xff0c;我们将探讨为什么电子商务个性化如此重要。在此过程中…

NTP服务器时间配置

简介 ntp服务器是一个同步时间都服务器。 开启ntpd 1.查看状态&#xff08;可以看到状态为&#xff1a;inactive&#xff0c;也就是没有启动ntp服务&#xff09; [rootlocalhost]$ systemctl status ntpd ● ntpd.service - Network Time ServiceLoaded: loaded (/usr/lib/…

C# Timer定时器

C# Timer定时器 Timer定时器定时器主要用到的就是Timer的Tick事件&#xff0c;另外还要设置时间间隔&#xff1a; 下面这个实力演示了每隔一秒&#xff0c;picturebox中的图片来回切换&#xff0c;每隔一秒&#xff0c;文本框中显示当前时间。 using System; using System.Co…

5. 线性层及其他层

5.1 神经网络结构 5.2 线性拉平 import torch import torchvision from torch import nn from torch.nn import ReLU from torch.nn import Sigmoid from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriterdataset torchvision.datase…

【核心复现】基于合作博弈的综合能源系统电-热-气协同优化运行策略(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

信看课堂笔记—LDO和DC-DC电路打PK

LDO&#xff08;low dropout voltage regulator&#xff0c;低压差线性稳压器&#xff09;和DC-DC(Direct current-Direct current converter&#xff0c;直流电压转直流电压转换器)电源是非常常见的电源电路&#xff0c;LDO 出来的比较早&#xff0c;像老戏骨一样&#xff0c;…

kotlin实现java的单例模式

代码 package com.flannery.interviewdemo.singleinstance//https://blog.csdn.net/Jason_Lee155/article/details/128796742 Java实现 //public class SingletonDemo { // private static SingletonDemo instancenew SingletonDemo(); // private SingletonDemo() // …

1.00001git源码clone后进行编译(带调试)

– 新建用户 useradd postgres passwd postgres – 用户加入sude组 先cd到/etc/sudoers目录下 由于sudoers文件为只读权限&#xff0c;所以需要添加写入权限&#xff0c;chmod uw sudoers vim sudoers 找到root ALL (ALL) ALL这一行&#xff0c;在下一行加入username ALL (A…

LeetCode每日一题:1654. 到家的最少跳跃次数(2023.8.30 C++)

目录 1654. 到家的最少跳跃次数 题目描述&#xff1a; 实现代码与解析&#xff1a; bfs 1654. 到家的最少跳跃次数 题目描述&#xff1a; 有一只跳蚤的家在数轴上的位置 x 处。请你帮助它从位置 0 出发&#xff0c;到达它的家。 跳蚤跳跃的规则如下&#xff1a; 它可以 …

Kubernetes技术--k8s核心技术yaml资源编排

(1).引入 我们可以使用kubectl实现单行指令的操作,但是这样做的坏处是不复用,所以为了更好的实现对一系列资源的编排工作。kuberntes中使用一种叫做资源清单文件(yaml)来实现对资源管理和资源对象编排部署。 (2).概述 yaml是一种标记语言。为了强调这种语言以数据做为中心,而…

2023年高教社杯数学建模思路 - 案例:ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模…

QQ邮件营销

邮件营销效果好的莫过于QQ邮件营销&#xff0c;QQ邮件收件会自动弹窗提示&#xff0c;邮件的阅读率是所有目前邮箱中最高的&#xff0c;而QQ邮件规则使用的叶贝思反垃圾邮件算法会有效防止一般的群发邮件&#xff0c;一米智能QQ邮件营销系统针对性的解决了这个难题。另外我们对…

分布式集群——jdk配置与zookeeper环境搭建

系列文章目录 分布式集群——jdk配置与zookeeper环境搭建 分布式集群——搭建Hadoop环境以及相关的Hadoop介绍 文章目录 系列文章目录 前言 一 zookeeper介绍与环境配置 1.1 zookeeper的学习 1.2 Zookeeper的主要功能 1.2.1 znode的节点类型 1.2.2 zookeeper的实现 …

【实战】十一、看板页面及任务组页面开发(六) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(二十八)

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…