SSM之一步一坑:加载静态资源 js/css文件路径问题

在做SSM项目时,加载静态文件一直没有成功,其实问题也不大

问题描述

如下图片中的加载静态文件问题

在这一步问题出现中,我的项目目录如下图

HTML中对静态文件的引用如下

解决方案一,使用绝对路径

在HTML页面中对静态文件采用绝对路径进行引用,前提是SSM项目已经可以加载简单页面,在项目的web.xml,spring-mvc.xml中不需要配置其他东西

将HTML页面中的引用静态文件的标签改为项目绝对路径

以引用css文件为例,

测试结果

绝对路径:http://[ip/localhost]:[端口]/[项目名]/[css路径]

如果仍然出现上述路径错误问题,请在浏览器中直接访问css绝对路径,查看是否能够访问.css文件

如下

如果无法访问,有可能是在web.xml中没有正常拦截.css,需要进行配置.css访问。

web.xml部分配置如下

<!-- SpringMVC配置 -->
	<servlet>
		<servlet-name>springDispatcherServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring-mvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springDispatcherServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
<!-- 正常拦截html,js,cssSpringMVC配置 激活 Tomcat 的 defaultServlet 来处理静态资源 
注意:/ 会匹配所有url,但不包括 * .jsp,* .html,* .js这样的文件这样的文件。也就是*.jsp不会进入Spring的DispatcherServlet 
-->
	<servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
 	<servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.png</url-pattern>
    </servlet-mapping>
 
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpg</url-pattern>
    </servlet-mapping>
 
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.gif</url-pattern>
    </servlet-mapping>
        <servlet-mapping> 
            <servlet-name>default</servlet-name> 
            <url-pattern>*.html</url-pattern> 
    </servlet-mapping>

	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

解决方案二、相对路径

在spring-mvc.xml中加入 ,Spring 3.0.4 以后版本提供了 <mvc:resources /> 

<mvc:resources location="/static/" mapping="/static/**"></mvc:resources>
解释这段xml配置的含义:
location="/static/" 指定静态资源的位置,可以是 web application 根目录下、jar 包里面,这样可以把静态资源压缩到 jar 包中

 mapping="/static/**" 映射到 ResourceHttpRequestHandler 进行处理。

cache-period 可以使得静态资源进行 web cache。 

HTML文件

测试结果

关于静态资源访问可以参考更详细连接

https://my.oschina.net/hnqingping1255/blog/415575

 

注:

写在最后的一点,使用相对路径时,采用的是使用

激活 Tomcat 的 defaultServlet 来处理静态资源 ,即在上文中贴出的web.xml文件中的代码。

但是在进行相对路径访问静态资源时,发现即便不配置spring-mvc.xml的文件,在HTML中直接使用"../static/css/001.css",也能完成对静态资源的访问,很是疑惑,如有参考到本博客的可以讨论下。。。。也有可能是上文写的绝对访问路径"、SongSSM/static/css/001.css"和静态访问路径"../static/css/001.css"意义相同,如有理解错误,希望看到的大佬给出指正。

### SSM框架中CSS文件样式显示不完全解决方案 在Spring MVC项目中,静态资源(如CSS、JavaScript和图片)通常放置于特定目录下以便被正确加载。当遇到CSS文件样式无法完全显示的情况时,可能是因为静态资源配置不当所致。 为了使静态资源能够正常访问,在`web.xml`或者基于Java配置的方式里需要设置相应的映射规则[^1]: 对于采用XML方式配置的应用程序而言,可以在`web.xml`中加入如下片段来允许对静态资源的请求穿透到物理路径: ```xml <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.css</url-pattern> <url-pattern>*.js</url-pattern> <!-- 可继续添加其他类型的静态资源 --> </servlet-mapping> ``` 而在纯注解驱动下的Spring Boot应用,则可以通过重写`addResourceHandlers()`方法实现相同功能[^2]: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); } } ``` 另外一种常见情况是由于浏览器缓存导致旧版本的CSS文件未更新。此时可以尝试清除浏览器缓存或是在URL后面加上时间戳参数以强制刷新资源,例如通过修改HTML模板中的链接形式为`<link rel="stylesheet" href="/path/to/style.css?v=timestamp">`。 最后还需确认服务器端确实存在所引用的静态文件,并且其权限设置允许外部读取;同时也要注意检查是否存在网络传输过程中可能出现的数据丢失等问题。 #### 注意事项 - 配置完成后重启应用程序确保更改生效。 - 如果使用了前端构建工具(如Webpack),则需按照相应文档调整打包后的静态资源位置及引入方式。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值