SpringBoot静态资源CSS等修改后再运行无效的解决

目录
  • SpringBoot静态资源CSS等修改后再运行无效问题
    • 问题背景
    • 下面来设置md5方式
  • SpringBoot开发中的一些小坑—CSS失效

SpringBoot静态资源CSS等修改后再运行无效问题

问题背景

在美化网页过程中,修改好CSS后在本地已经可以显示出我想要的效果了。于是就把修改好后的css加载到springboot中运行,结果问题出现了:我修改后的css样式始终不能加载!打开F12看到css样式成功的被请求,然后再进一步点进去看css文件,发现我修改的部分并没有加载,现在用的css还是我修改以前的css。这里我注意到一个细节,然后才明白是怎么回事

原来spring boot会把静态文件缓存到浏览器本地。但这样就造成了一个问题:如果服务器静态文件修改,浏览器端在未过期之前是不会重新加载文件的。此时需要通过版本号来控制。spring boot版本号支持两种,一种是文件md5,另一种是固定版本号。我采用的是md5方式,spring boot启动时会计算每个静态文件的md5值并缓存,浏览器访问时每个静态文件后缀前加上md5值作为版本号,如果服务器md5值改变则浏览器重新加载。(需要重启应用才会重新生成md5)

下面来设置md5方式

1、先设置文件配置application.properties

# 资源缓存时间,单位秒
spring.resources.cache.period=604800
# 开启gzip压缩
spring.resources.chain.compressed=true
# 启用缓存
spring.resources.chain.cache=true
# 使用MD5版本号
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

2、添加静态资源控制类,使用ResourceUrlProvider

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.servlet.resource.ResourceUrlProvider;

/**
 *  使用ResourceUrlProvider进行版本管理
 *  并避免在版本发生改变时,由于浏览器缓存而产生资源版本未改变的错误
 */
@ControllerAdvice
public class ControllerConfig {

    @Autowired
    private ResourceUrlProvider resourceUrlProvider;

    @ModelAttribute("urls")
    public ResourceUrlProvider urls() {
        return this.resourceUrlProvider;
    }

}

3、在网页中引用静态文件

注意:如果使用的thymeleaf模板引擎的话,那么需要这么进行编写:

<link rel="stylesheet" th:href="${urls.getForLookupPath('/css/font.css')}" rel="external nofollow" >
<link rel="stylesheet" th:href="${urls.getForLookupPath('/css/xadmin.css')}" rel="external nofollow" >
<script th:src="${urls.getForLookupPath('/lib/layui/layui.js')}" charset="utf-8"></script>
<script type="text/javascript" th:src="${urls.getForLookupPath('/js/xadmin.js')}"></script>

SpringBoot开发中的一些小坑—CSS失效

Springboot版本1.5.17

结合thymeleaf,在项目中引用CSS文件的问题

	    <parent>
	        <groupId>org.springframework.boot</groupId>
	        <artifactId>spring-boot-starter-parent</artifactId>
	        <version>1.5.17.RELEASE</version>
	        <relativePath/> <!-- lookup parent from repository -->
	    </parent>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
<!DOCTYPE html >
<html  lang="zh-CN" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8" />
    <title>0.0</title>
    <link  rel="stylesheet" type="text/css"  href="../static/css/index.css" rel="external nofollow"  rel="external nofollow" >
</head>

首先配置的CSS引用是这样,href后面跟上从static文件后的完整路径,打开静态网页就是有css效果了

没有加载成功是这样的

但是问题来了,还有种说法是这样加:

<link  rel="stylesheet" type="text/css"  href="../static/css/index.css" rel="external nofollow"  rel="external nofollow"  th:href="@{/css/index.css}" rel="external nofollow" >

而在静态网页中,你看到的,始终是带上了CSS样式的结果,但Springboot项目运行起来后,你会发现CSS加载失效了,所以如果是Springboot项目,一定要加上后面的路径th:href=""。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • SpringBoot静态资源CSS等修改后再运行无效的解决

    目录 SpringBoot静态资源CSS等修改后再运行无效问题 问题背景 下面来设置md5方式 SpringBoot开发中的一些小坑-CSS失效 SpringBoot静态资源CSS等修改后再运行无效问题 问题背景 在美化网页过程中,修改好CSS后在本地已经可以显示出我想要的效果了.于是就把修改好后的css加载到springboot中运行,结果问题出现了:我修改后的css样式始终不能加载!打开F12看到css样式成功的被请求,然后再进一步点进去看css文件,发现我修改的部分并没有加载,现在用的cs

  • SpringBoot静态资源css,js,img配置方案

    一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/main/resources目录文件中,这样可以达到在项目启动时候可以自动加载为项目静态地址目录到classpath下 ,静态访问地址其实是使用 ResourceHttpRequestHandler 核心处理器加载到WebMvcConfigurerAdapter进行对addResourceHandlers

  • Spring Boot访问静态资源css/js,你真的懂了吗

    一.前言 我们用 Spring Boot 搭建 Web 应用时(如搭建一个博客),经常需要在 Html 中访问一些静态资源,比如: css 样式: js 脚本: favicon.ico 图标等: 而在 Spring Boot 中如果没有做任何配置,是无法直接访问静态资源的,通常会报 404 错误: 二.Spring Boot 访问静态资源的默认目录 Spring Boot 访问静态资源,默认有两个默认目录: classpath/static 目录:src/mian/resource Servle

  • Springboot静态资源的访问方法介绍

    目录 1.官方文档 2.基本介绍 3.快速入门 4.静态资源访问注意事项和细节 1.官方文档 在线文档 2.基本介绍 只要静态资源放在类路径下: /static . /public . /resources . /META-INF/resources 可以被直接访问- 对应文件 WebProperties.java 直接放到resources目录下是访问不到的,这里的 /resources是指在resource目录的创建resources目录 private static final Strin

  • SpringBoot 静态资源导入及首页设置问题

    本节了解一下 SpringBoot 中 Web 开发的静态资源导入和首页设置,对应 SpringBoot-03-Web 项目. 1. 静态资源导入 在 Web 开发过程中,我们需要接触许多的静态资源,如 CSS.JS.图片等:在之前的开发过程中,这些资源都放在 Web 的目录下,用到的时候按照对应路径访问即可.不过在 SpringBoot 项目中,没有了 Web 的目录,那这些静态资源该放到哪里去,又要如何访问呢? 由于是 Web 应用中的配置,所以查看对应的自动配置类 WebMvcAutoCo

  • SpringBoot静态资源的访问方法详细介绍

    目录 一. 静态资源 二. 静态资源访问目标 三. 静态资源访问前缀 1. 默认访问路径为 / 2. 配置访问前缀 3. 配置静态资源默认访问位置 四. 欢迎页及网页图标设置 1. 欢迎页的设置 2. 网页图标的设置 分析源码 一. 静态资源 在web场景中的静态图片.html网页等 二. 静态资源访问目标 在SpringBoot中,静态资源访问目标有 resources文件下的 public.resources.static 以及 META-INF 文件夹下的 recources 如下图所示:

  • Springboot静态资源访问实现代码解析

    springboot静态资源加载默认是从/static(或/public或/resources或/META-INF/resources) 目录下加载静态资源. 加载的优选级别:/META-INF/resources>/resources>/public>/static 静态资源的加载源码分析(WebMvcAutoConfiguration类) 首先从WebMvcAutoConfiguration.class自动配置类部分代码来看: //添加静态资源规则 public void addRe

  • 关于SpringBoot静态资源路径管理问题

    目录 一.默认静态资源路径 二.增加静态资源路径前缀 一.默认静态资源路径 类路径下: static public resources 这几个目录为默认静态资源访问的目录 二.增加静态资源路径前缀 动态资源和静态资源路径重复时会优先访问动态资源,为了避免路径重复,可以为静态资源路径增加前缀 1.目录结构 2.配置文件 spring: mvc: static-path-pattern: /static_path/** 3.访问结果 到此这篇关于SpringBoot静态资源路径管理的文章就介绍到这了

  • springboot druid数据库连接池连接失败后一直重连的解决方法

    目录 druid 重连原因 errorCount 错误次数 总结 在使用个人阿里云测试机,在查询实时输出日志时,看到数据库连接失败后,服务器一直在重连服务器.开始以为是遭受重复攻击,后面把服务重启后,就没有出现一直重连的情况.看以下输出日志: 2022-02-09 11:04:58.896 ERROR 16876 --- [eate-1550991149] com.alibaba.druid.pool.DruidDataSource   : create connection SQLExcept

  • 聊聊springboot静态资源加载的规则

    目录 静态资源映射规则 1.webjars 2.springboot内置默认访问路径 3.首页处理 4.网站图标 我们经常会使用springboot创建web应用,在springboot中金静态资源是如何存放的呢? 静态资源映射规则 我们先创建一个springboot项目.使用https://start.spring.io/idea内置创建一个项目,不多说了. 我们要引入我们前端资源,我们项目中有许多的静态资源,比如css,js等文件,我们以前写 项目与都是自己建立文件夹,自己设计访问路径,但是

随机推荐