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.rhkb.cn/news/112205.html

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

相关文章

【LeetCode-中等题】2. 两数相加

文章目录 题目方法一&#xff1a;借助一个进制位&#xff0c;以及更新尾结点方法一改进&#xff1a;相比较第一种&#xff0c;给head一个临时头节点&#xff08;开始节点&#xff09;&#xff0c;最后返回的时候返回head.next&#xff0c;这样可以省去第一次的判断 题目 方法一…

北大C++课后记录:自增、自减运算符重载的小Demo

前言 自增、自减运算符有前置&#xff08;x&#xff09;和后置&#xff08;x&#xff09;之分&#xff0c;为了对其进行区分&#xff0c;C规定&#xff1a; 前置运算符作为一元运算符进行重载&#xff1a;&#xff08;注意T1对象和T2对象是有差异的&#xff09; 后置运算符作…

打造抖音小店的用户黏性:六大策略助你脱颖而出

要提高抖音小店的用户黏性&#xff0c;即增加用户对店铺的依赖和留存&#xff0c;不若与众科技为你介绍可以从以下几个方面入手&#xff1a; 1. 提供个性化推荐&#xff1a;抖音小店可以通过算法分析用户的兴趣和行为&#xff0c;为用户提供个性化的商品推荐。通过了解用户的购…

Git 中的 HEAD

1、Git HEAD 存放位置 HEAD 指的就是 .git/HEAD 文件&#xff0c;它存储着当前分支的名字&#xff0c;我们可以打这个文件看一看&#xff1a; ref: refs/heads/master由此&#xff0c;我们可以得知当前所处于 master 分支。 如果我们继续往下走&#xff1a;打开 refs/heads/…

SpringBoot与前端交互遇到的一些问题

一、XXX.jar中没有主清单属性 场景&#xff1a; SpringBoot打的jar包在Linux运行报错 解决方案&#xff1a; 百度找了很多都是一样的答案&#xff0c;但是解决不了我的问题&#xff0c;于是我新建了一个springboot项目发现打的jar包可以在Linux上运行。检查了下只要把下面这2个…

对称二叉树判断

目录 题目题目要求示例 解答方法一、实现思路时间复杂度和空间复杂度代码 方法二、实现思路时间复杂度和空间复杂度代码 题目 对称二叉树判断 题目要求 题目链接 示例 解答 方法一、 递归法 实现思路 使用到了判断两棵二叉树是否相等的方法&#xff0c;只不过对称二叉树…

SpringBoot实现简单的登录验证码

参考了一些资料&#xff0c;完成了这个验证码的功能&#xff0c;下面记录一下功能的实现过程。 一、效果图 二、实现原理 后台生成验证码图片&#xff0c;将图片传到前台。后台在session中保存验证码内容。前台输入验证码后传到后台在后台取出session中保存的验证码进行校验。…

Scikit-learn降维与度量学习代码批注及相关练习

一、代码批注 代码来自&#xff1a;https://scikit-learn.org/stable/auto_examples/decomposition/plot_pca_iris.html#sphx-glr-auto-examples-decomposition-plot-pca-iris-py import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes…

回归预测 | MATLAB实现GWO-ELM灰狼算法优化极限学习机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GWO-ELM灰狼算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GWO-ELM灰狼算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程…

scikit-learn中OneHotEncoder用法

One-Hot编码&#xff0c;又称为一位有效编码&#xff0c;是分类变量作为二进制向量的表示。这首先要求将分类值映射到整数值&#xff0c;然后&#xff0c;每个整数值被表示为二进制向量&#xff0c;将整数索引标记为1&#xff0c;其余都标为0。 OneHotEncoder()常用参数解释 …

让大数据平台数据安全可见-行云管家

数字化经济在快速发展&#xff0c;大数据时代已经到来&#xff0c;大数据已经成为企业和政府决策的重要依据。然而大数据行业快速发展所带来的一系列安全问题也继续解决&#xff0c;例如数据安全更难保障&#xff0c;例如认证体系不完善等等。为此行云管家推出了大数据平台数据…

算法:模拟思想算法

文章目录 实现原理算法思路典型例题替换所有问号提莫攻击N字型变换外观序列 总结 本篇总结的是模拟算法 实现原理 模拟算法的实现原理很简单&#xff0c;就是依据题意实现题意的目的即可&#xff0c;考察的是你能不能实现题目题意的代码能力 算法思路 没有很明显的算法思路…

数组(个人学习笔记黑马学习)

一维数组 1、定义方式 #include <iostream> using namespace std;int main() {//三种定义方式//1.int arr[5];arr[0] 10;arr[1] 20;arr[2] 30;arr[3] 40;arr[4] 50;//访问数据元素/*cout << arr[0] << endl;cout << arr[1] << endl;cout &l…

Unity 之 GameObject.Find()在场景中查找指定名称的游戏对象

文章目录 GameObject.Find 是 Unity 中的一个函数&#xff0c;用于在场景中查找指定名称的游戏对象。这个函数的主要作用是根据游戏对象的名称来查找并返回一个引用&#xff0c;使您能够在代码中操作该对象。以下是有关 GameObject.Find 的详细介绍&#xff1a; 函数签名&…

自动化运维:Ansible基础与命令行模块操作

目录 一、理论 1. Ansible 2.部署Ansible自动化运维工具 3.Ansible常用模块 4.hostsinverntory主机清单 二、实验 1.部署Ansible自动化运维工具 2.ansible 命令行模块 3.hostsinverntory主机清单 三、问题 1. ansible远程shell失败 2.组变量查看webservers内主机ip报…

【03期】说说Object类下面有几种方法呢?

今天说一道基础题型&#xff0c;不过很多人会忽略或者至少说不完整&#xff0c;但是面试时被问到的几率还是很大的。 面试题 Object有几种方法呢&#xff1f; Java语言是一种单继承结构语言&#xff0c;Java中所有的类都有一个共同的祖先。这个祖先就是Object类。 如果一个类没…

百亿数据查询秒级响应,观测体系之日志中心该如何玩转?

日志是处理生产故障、性能优化、业务分析的重要参考依据&#xff0c;是系统稳定运行不可或缺的一部分。随着业务系统规模急剧膨胀增大&#xff0c;尤其是是微服务架构逐渐普及&#xff0c;一个系统可能涉及多个应用模块与服务实例&#xff0c;传统模式下运维人员去定位问题显得…

ThinkPHP 资源路由的简单使用,restfull风格API

ThinkPHP 资源路由的简单使用&#xff0c;restfull风格API 一、资源控制器二、资源控制器简单使用 一、资源控制器 资源控制器可以轻松的创建RESTFul资源控制器&#xff0c;可以通过命令行生成需要的资源控制器&#xff0c;例如生成index应用的TestR资源控制器使用&#xff1a…

【安全】原型链污染 - Code-Breaking 2018 Thejs

目录 准备工作 环境搭建 加载项目 复现 代码审计 payload 总结 准备工作 环境搭建 Nodejs BurpSuite 加载项目 项目链接 ① 下载好了cmd切进去 ② 安装这个项目 可以检查一下 ③运行并监听 可以看到已经在3000端口启动了 复现 代码审计 const fs require(fs) cons…

Vue入门学习(一)

一、Vue环境搭建及第一个Demo 1.1编程工具&#xff1a; 下载Vscode,并安装插件 在Extensions 选项中搜索插件&#xff1a; 1&#xff1a;Live Server&#xff1a;将当前项目作为根路径&#xff0c;启动一个服务端&#xff0c;这样右键就会有如下选项 2&#xff1a;Eclipse …