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

这篇具有很好参考价值的文章主要介绍了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 依赖
39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页,springboot,前端,spring boot,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>

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

在前端页面引入js等文件
39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页,springboot,前端,spring boot,bootstrap

可以看到样式都生效了。
39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页,springboot,前端,spring boot,bootstrap

▲ 版本无关的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>

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

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

▲ 清除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字符串,消除静态资源的缓存
39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页,springboot,前端,spring boot,bootstrap

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

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

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

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

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

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

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

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

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

随便搜索一个在线生成 ico 的工具
39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页,springboot,前端,spring boot,bootstrap

换了几个浏览器都没有生成这个 ico 的项目图标
不知道是不是图片太大了
39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页,springboot,前端,spring boot,bootstrap

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

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

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

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

39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页,springboot,前端,spring boot,bootstrap文章来源地址https://www.toymoban.com/news/detail-675527.html

到了这里,关于39、springboot的前端静态资源的WebJar支持(bootstrap、jquery等)及自定义图标和首页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 补充前端访问静态资源的一个错误

    注意,前端访问时带上本地服务端的host,例如http://localhost:8080, 后端改写的代码如下,注意file后面一定是三个‘/’,不然的化虽然能解析,但访问不到。 错误来源https://mp.csdn.net/mp_blog/creation/editor/135489062 错误内容已改正。 

    2024年01月21日
    浏览(50)
  • SpringBoot——静态资源及原理

    优质博文:IT-BLOG-CN 【1】创建 SpringBoot 应用,选中自己需要的模块。 【2】 SpringBoot 已经默认将这些场景配置好,只需要在配置文件中指定少量配置就可以运行起来。 【3】编写业务逻辑代码。 我们要了解 SpringBoot 帮我们配置了什么?能不能修改?能修改那些配置?能不能扩

    2024年02月04日
    浏览(26)
  • springboot-静态资源目录的配置

    配置节点:spring.web.resources.static-locations 值为要配置的静态资源存放目录 如: 以上配置中,设置静态资源目录为src/main/resources/test/目录。 假如在test目录下存放文件test.txt,程序启动后,便能通过浏览器访问ip:port/test.txt访问文件。 新建WebMvcConfig类,继承WebMvcConfigurationSupport类

    2024年02月16日
    浏览(31)
  • 【仿写tomcat】五、响应静态资源(访问html页面)、路由支持以及多线程改进

    如果我们想访问html页面其实就是将本地的html文件以流的方式响应给前端即可,下面我们对HttpResponseServlet这个类做一些改造 writeHtml这个方法将会读取webApp下面的html文件,注意只读取下面一级文件中的html文件,然后将这个文件以二进制流的形式转换成字符串拼接到上面定义的

    2024年02月12日
    浏览(31)
  • 38、springboot为 spring mvc 提供的静态资源管理,覆盖和添加静态资源目录

    ▲ 默认的四个静态资源目录: /META-INF/resources /resources /static /public ▲ ResourceProperties.java类的源代码,可看到CLASSPATH_RESOURCE_LOCATIONS常量的定义: CLASSPATH_RESOURCE_LOCATIONS = new String[]{“classpath:/META-INF/resources/”, “classpath:/resources/”, “classpath:/static/”, “classpath:/public/”}; 这意味

    2024年02月11日
    浏览(29)
  • 若依框架前端静态资源到后端访问

    修改ruoyi-ui中的.env.production(二选一) 修改ruoyi-ui中的router/index.js,设置mode属性为hash 打包前端静态资源文件。 修改后端resources中的application.yml,添加thymeleaf模板引擎配置 修改后端pom.xml,增加thymeleaf模板引擎依赖 修改后端ResourcesConfig.java中的 addResourceHandlers,添加静态资源映

    2024年02月06日
    浏览(49)
  • vue项目 前端加前缀(包括页面及静态资源)

    具体步骤 (1)更改router模式,添加前缀 位置:router文件夹下面的index.js (2)实现静态文件加前缀 位置:vue.config.js 静态资源css,js之类的的src或href引用位置会加上这个前缀,会体现在打包后的index.html文件内容 例如 (3)nignx配置

    2024年02月04日
    浏览(43)
  • SpringBoot 读取项目中静态资源文件

    PathMatchingResourcePatternResolver是一个 Ant模式通配符 的Resource查找器,可以用来查找类路径下或者文件系统中的资源。 ❗❗❗在SpringBoot中尽量 避免使用 ResourceUtils读取资源文件。 ResourceUtils.getFile() 获取的是资源文件的绝对路径,当项目打包为jar或者war包之后部署,资源文件的绝对

    2024年02月07日
    浏览(40)
  • Springboot设置并访问静态资源目录

    目录 ​​​​​​​ 静态文件 application设置方法 配置详解 编写配置 优缺点 设置配置类方法 配置详解 编写配置 优缺点 总结         静态资源,一般是网页端的: HTML文件、JavaScript文件和图片 。尤其是 设置图片的静态资源 ,尤其重要: 这样的静态资源访问不会被Sp

    2024年02月15日
    浏览(52)
  • SpringBoot代理访问本地静态资源400 404

    问题:访问过程中可能会出现400、404问题 前提:保证有文件,并且文件路径正确 SpringBoot如何配置静态资源代理,大家可以网上找一找,或者也可以参考我的另一篇博客 SpringBoot addResourceHandlers 代理静态资源 1、路径纯英文 此种情况目前没有遇到过问题 2、路径包含中文 此种

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包