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=true
   spring.web.resources.chain.strategy.content.paths=/**
   
  上面配置为/**路径下所有静态资源的URL后添加动态的hash字符串。


B. 在静态资源URL中添加固定的版本号。

  spring.web.resources.chain.strategy.fixed.enabled=true
  spring.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文件会被当成首页

在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

生态经济学领域里的R语言机器学(数据的收集与清洗、综合建模评价、数据的分析与可视化、数据的空间效应、因果推断等)

近年来&#xff0c;人工智能领域已经取得突破性进展&#xff0c;对经济社会各个领域都产生了重大影响&#xff0c;结合了统计学、数据科学和计算机科学的机器学习是人工智能的主流方向之一&#xff0c;目前也在飞快的融入计量经济学研究。表面上机器学习通常使用大数据&#xf…

4.5 TCP优化

TCP 三次握手的性能提升 三次握手的过程在一个 HTTP 请求的平均时间占比 10% 以上&#xff0c;所以要正确使用三次握手的中参数&#xff0c;需要先用netstat命令查看是哪个握手阶段出了问题&#xff0c;主动发起连接的客户端优化相对简单些&#xff0c;而服务端需要监听端口&a…

leetcode 42. 接雨水

2023.8.29 本题可以用双指针做&#xff0c;求出每一列能盛的雨水&#xff0c;再相加即可。不过暴力法会超时&#xff0c;需要优化。 双指针&#xff08;暴力&#xff09;&#xff1a; class Solution { public:int trap(vector<int>& height) {int ans 0;for(int …

MySQL DATE_SUB的实践

函数简介DATE_SUB()函数从DATE或DATETIME值中减去时间值(或间隔)。 下面说明了DATE_SUB()函数的语法&#xff1a; DATE_SUB(start_date,INTERVAL expr unit); DATE_SUB()函数接受两个参数&#xff1a; start_date是DATE或DATETIME的起始值。 expr是一个字符串&#xff0c;用于确…

【计算机视觉】YOLO 入门:训练 COCO128 数据集

一、COCO128 数据集 我们以最近大热的YOLOv8为例&#xff0c;回顾一下之前的安装过程&#xff1a; %pip install ultralytics import ultralytics ultralytics.checks()这里选择训练的数据集为&#xff1a;COCO128 COCO128是一个小型教程数据集&#xff0c;由COCOtrain2017中…

iOS逆向:越狱及相关概念的介绍

在上一篇内容中我们介绍了App脱壳的技术&#xff0c;今天我们来介绍一个和iOS逆向密切相关的知识&#xff1a;越狱。 iOS操作系统的封闭性一直是开发者们关注的焦点之一。为了突破Apple的限制&#xff0c;越狱技术应运而生。本文将深入探讨iOS越狱&#xff0c;包括可越狱的版本…

SaaS多租户系统架构设计

前言&#xff1a;多租户是SaaS&#xff08;Software-as-a-Service&#xff09;下的一个概念&#xff0c;意思为软件即服务&#xff0c;即通过网络提供软件服务。SaaS平台供应商将应用软件统一部署在自己的服务器上&#xff0c;客户可以根据工作的实际需求&#xff0c;通过互联网…

thinkphp6 入门(1)--安装、路由规则、多应用模式

一、安装thinkphp6 具体参考官方文档 安装 ThinkPHP6.0完全开发手册 看云 下面仅列举重要步骤 ThinkPHP6.0的环境要求如下&#xff1a; PHP > 7.2.5 1. 安装Composer 2. 安装稳定版thinkphp 如果你是第一次安装的话&#xff0c;在命令行下面&#xff0c;切换到你的WE…

C++自创题目——第一期

一、题目描述&#xff1a; 在一段时间内&#xff0c;到达港口的船有n艘&#xff0c;其中每艘船的信息包括:到达时间t(表示第t秒)&#xff0c;船上乘客数k&#xff0c;以及k名乘客的国籍。输出前3600s内每艘船上国籍种数&#xff0c;并输出国籍种数最少的船只的到达时间。 二、…

ArcGIS学习总结(19)——要素转点与空间连接(属性表字段映射)

1.在新创建的面矢量数据的属性表中没有对应的字段信息&#xff0c;为了能够和有属性信息的数据进行匹配&#xff0c;使其具有对应字段的信息。 2.需要匹配的矢量文件属性表信息。 3.对新创建的矢量文件执行要素转点&#xff1a;数据管理工具→要素→要素转点。 4.选择分析工…

【leetcode 力扣刷题】字符串翻转合集(全部反转///部分反转)

字符串翻转合集 344. 反转字符串541. 反转字符串Ⅱ151. 反转字符串中的单词剑指 Offer 58 - II. 左旋转字符串反转单词思路循环挪动子串和子串的拼接 344. 反转字符串 题目链接&#xff1a;344. 反转字符串 题目内容&#xff1a; 题目中重点强调了必须原地修改输入数组&#…

应用TortoiseSVN的SubWCRev管理VisualStudio C#项目编译版本号

首先要安装 TortoiseSVN, 并确保TortoiseSVN的bin目录被加入到系统环境变量Path中。 1、拷贝Porperties目录下的文件AssemblyInfo.cs生成副本AssemblyInfo.template, 作为版本管理的模板文件。 2、修改模板文件中的想要管理的版本号信息 // [assembly: AssemblyVersion(&quo…

SSM框架的学习与应用(Spring + Spring MVC + MyBatis)-Java EE企业级应用开发学习记录(第五天)MyBatis的注解开发

SSM框架的学习与应用(Spring Spring MVC MyBatis)-Java EE企业级应用开发学习记录&#xff08;第五天&#xff09;MyBatis的注解开发 ​ 昨天我们深入学习了MyBatis多表之间的关联映射&#xff0c;了解掌握了一对一关联映射&#xff0c;一对多关联映射&#xff0c;嵌套查询方…

【C语言】每日一题(除自身以外数组的乘积)

添加链接描述&#xff0c;链接奉上 方法&#xff1a; 暴力循环:前缀积后缀积&#xff08;分组&#xff09;: 暴力循环: 暴力循换真的是差生法宝&#xff0c;简单好懂&#xff0c;就是不实用&#xff0c;大多数的题目都会超过时间限制&#xff08;无奈&#xff09; 思路&…

postgresql-字符函数

postgresql-字符函数 字符串连接字符与编码字符串长度大小写转换子串查找与替换截断与填充字符串格式化MD5 值字符串拆分字符串反转 字符串连接 concat(str, …)函数用于连接字符串&#xff0c;并且忽略其中的 NULL 参数&#xff1b;concat_ws(sep, str, …) 函数使用指定分隔…

【JS案例】JS实现图片放大镜功能

JS案例图片放大镜 &#x1f31f;效果展示 &#x1f31f;HTML结构 &#x1f31f;CSS样式 &#x1f31f;实现思路 &#x1f31f;具体实现 1.初始化数据图片 2.获取所需DOM元素 3.初始化页面 初始化缩略图 绑定事件 &#x1f31f;完整代码 &#x1f31f;写在最后 &…

Centos7安装ZK-UI管理界面安装|Maven|Git|

一: JDK1.8安装 参考: Centos7卸载|安装JDK1.8|Xshell7批量控制多个终端 二&#xff1a;Maven安装 2.1&#xff1a;下载maven安装包 maven 下载地址&#xff1a;https://mirror.bit.edu.cn/apache/maven/maven-3/ [rootwww ~]# mkdir -p /usr/local/maven [rootwww ~]# …

STM32+RTThread配置以太网无法ping通,无法获取动态ip的问题

记录一个非常蠢的问题&#xff0c;今天在移植rtthread的以太网驱动的时候出现无法获取动态ip的问题&#xff0c;问题如下&#xff1a; 设置为动态ip时不管是连接路由器还是电脑主机都无法ping通&#xff0c;也无法获取dns地址。 设置为静态ip时无法ping通主机。 使用wireshark…

Docker笔记

学习了神光大佬的《Nest 通关秘籍》后&#xff0c;对docker做了个笔记&#xff0c;并实操部署了一下个人项目&#xff0c;在此记录一下 是什么 Docker是一种开源的容器化平台&#xff0c;它可以将应用程序及其依赖项打包到一个可移植的容器中&#xff0c;使得应用程序能够在任…

java八股文面试[JVM]——JVM调优

知识来源&#xff1a; 【2023年面试】JVM性能调优实战_哔哩哔哩_bilibili