Java-Spring入门指南（二十四）SSM整合HTML：解决CSS/JS静态资源被过滤问题

Java-Spring入门指南（二十四）SSM整合HTML：解决CSS/JS静态资源被过滤问题

• 前言
• 一、前置准备
  • 1.1 项目结构
  • 1.2 问题场景复现
• 二、解决方案
  • 方法一：使用mvc:default-servlet-handler
    • 2.1.1 原理
    • 2.1.2 配置步骤（仅需1步）
    • 2.1.3 注意事项
  • 方法二：使用mvc:resources标签
    • 2.2.1 原理
    • 2.2.2 配置步骤（按资源类型逐一配置）
    • 2.2.3 核心参数说明（避免踩坑）
    • 2.2.4 注意事项

前言

• 在上一篇博客中，我们成功搭建了SSM基础系统，实现了“后端查询数据库→前端HTML展示数据”的核心流程。但实际开发中，我们大概率会遇到一个棘手问题：HTML页面能正常访问，但CSS样式加载失败、JS交互完全失效——打开浏览器F12查看，会发现静态资源（CSS/JS/图片）返回404错误，这就是SpringMVC的“静态资源过滤”导致的。
• 为什么会出现这种情况？因为我们在web.xml中配置DispatcherServlet时，URL映射设为了<url-pattern>/</url-pattern>，这意味着所有请求（包括动态请求如/index和静态请求如/css/style.css）都会被SpringMVC拦截。而SpringMVC默认只处理动态请求（Controller映射的接口），对静态资源会直接“过滤掉”，导致前端无法加载样式和脚本。
• 本文将基于Maven+IDEA+Tomcat 11+SSM环境，详细讲解两种解决静态资源被过滤的方案。

我的个人主页，欢迎来阅读我的其他文章
https://blog.ZEEKLOG.net/2402_83322742?spm=1011.2415.3001.5343
我的Java-Spring入门指南知识文章专栏
欢迎来阅读指出不足
https://blog.ZEEKLOG.net/2402_83322742/category_13040333.html?spm=1001.2014.3001.5482

一、前置准备

在配置前，先确认项目的静态资源位置，确保后续配置的路径与实际文件位置完全匹配，这是解决问题的关键前提。

1.1 项目结构

ssm ├── src │ ├── main │ │ ├── java（后端代码，与之前一致） │ │ ├── resources（配置文件，与之前一致） │ │ └── web │ │ └── WEB-INF │ │ └── templates │ │ └── html <!-- 静态资源根目录 --> │ │ ├── css <!-- CSS样式文件 --> │ │ ├── js <!-- JS脚本文件 --> │ │ ├── images <!-- 图片资源 --> │ │ ├── font-awesome <!-- 图标资源 --> │ │ ├── fonts <!-- 字体资源 --> │ │ ├── index.html <!-- 前端页面 --> │ │ └── 其他HTML文件... │ └── test └── target 

1.2 问题场景复现

当我们在index.html中引用CSS和JS时，若未配置静态资源放行，浏览器会拦截这些请求：

<!-- index.html中引用CSS（路径看似正确，但会被SpringMVC拦截） --><linkrel="stylesheet"href="css/style.css"><!-- index.html中引用JS --><scriptsrc="js/script.js"></script>

• 访问页面后，F12打开“开发者工具→Network”，会发现style.css和script.js的请求状态为404 Not Found，原因是DispatcherServlet拦截了/css/style.css这类请求，且SpringMVC未配置如何处理，导致资源无法加载。

二、解决方案

针对上述问题，SpringMVC提供了两种主流解决方案，分别适用于不同场景，你可根据项目复杂度选择。

方法一：使用mvc:default-servlet-handler

该方法通过“委托默认Servlet处理静态资源”实现放行，配置简单，适合静态资源目录少、需求简单的项目。

2.1.1 原理

• SpringMVC的<mvc:default-servlet-handler>标签会注册一个DefaultServletHttpRequestHandler，当SpringMVC收到请求时：
  1. 先判断该请求是否为“动态请求”（如/index、/findStudent），若是则由DispatcherServlet处理；
  2. 若为“静态资源请求”（如/css/style.css、/js/script.js），则将请求委托给Tomcat的默认Servlet（DefaultServlet）处理，从而绕过SpringMVC的过滤。

2.1.2 配置步骤（仅需1步）

在resources/springmvc.xml中添加标签，位置需在<mvc:annotation-driven>之后（确保动态请求优先处理）：

<!-- springmvc.xml --><beansxmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"><!-- 1. 组件扫描（原有配置，无需修改） --><context:component-scanbase-package="com.niit"></context:component-scan><!-- 2. MVC注解驱动（原有配置，动态请求核心） --><mvc:annotation-driven/><!-- 3. 新增：静态资源快速放行（关键配置） --><mvc:default-servlet-handler></mvc:default-servlet-handler><!-- 其他配置（视图解析器、数据源等，原有配置不变） --></beans>

2.1.3 注意事项

1. 必须配合<mvc:annotation-driven>：若只加<mvc:default-servlet-handler>而不加<mvc:annotation-driven>，SpringMVC会无法处理动态请求（如Controller的@RequestMapping接口），导致后端接口失效。
2. 适用场景：适合静态资源目录少、无需精确控制资源访问权限的项目，如小型管理系统。
3. 不适用场景：若静态资源放在WEB-INF下的深层目录（如本次项目的WEB-INF/templates/html/css），默认Servlet可能无法识别路径，此时推荐用方法二。

方法二：使用mvc:resources标签

该方法通过“手动映射资源URL与实际目录”实现放行，可精确控制每个类型的静态资源（如CSS、JS、图片），适合静态资源目录多、路径复杂的项目（如本次项目结构）。

2.2.1 原理

• <mvc:resources>标签的核心是建立“URL路径映射”与“项目内资源目录”的对应关系：
  • mapping：定义浏览器访问静态资源的URL规则（如/css/**表示匹配所有以/css开头的请求）；
  • location：定义静态资源在项目中的实际存储目录（如/WEB-INF/templates/html/css/）；
• 配置后，当浏览器发起/css/style.css请求时，SpringMVC会自动映射到WEB-INF/templates/html/css/style.css，从而加载资源。

2.2.2 配置步骤（按资源类型逐一配置）

在springmvc.xml的<mvc:annotation-driven>之后，添加以下配置，确保覆盖所有静态资源类型：

<!-- springmvc.xml --><!-- 2. MVC注解驱动（原有配置，必须保留） --><mvc:annotation-driven/><!-- 3. 新增：静态资源精确映射（关键配置，按资源类型放行） --><!-- 1. 放行CSS资源：URL以/css/开头 → 映射到WEB-INF/templates/html/css/目录 --><mvc:resourcesmapping="/css/**"location="/WEB-INF/templates/html/css/"/><!-- 2. 放行JS资源：URL以/js/开头 → 映射到WEB-INF/templates/html/js/目录 --><mvc:resourcesmapping="/js/**"location="/WEB-INF/templates/html/js/"/><!-- 3. 放行图片资源：URL以/images/开头 → 映射到WEB-INF/templates/html/images/目录 --><mvc:resourcesmapping="/images/**"location="/WEB-INF/templates/html/images/"/><!-- 4. 放行图标资源（font-awesome）：URL以/font-awesome/开头 → 映射到对应目录 --><mvc:resourcesmapping="/font-awesome/**"location="/WEB-INF/templates/html/font-awesome/"/><!-- 5. 放行字体资源：URL以/fonts/开头 → 映射到对应目录 --><mvc:resourcesmapping="/fonts/**"location="/WEB-INF/templates/html/fonts/"/><!-- 其他配置（视图解析器、数据源等，原有配置不变） -->

2.2.3 核心参数说明（避免踩坑）

2.2.4 注意事项

1. 配置顺序不影响效果：多个<mvc:resources>标签的顺序无需严格区分，SpringMVC会自动匹配对应的mapping规则。
2. 与方法一互斥：若同时配置<mvc:default-servlet-handler>和<mvc:resources>，<mvc:resources>的优先级更高，会优先处理匹配的静态资源，未匹配的资源才会由default-servlet-handler处理。
3. 适用场景：推荐用于本次项目这类“静态资源放在WEB-INF深层目录”的场景，或需要精确控制资源访问的项目（如只允许特定角色访问某类资源）。

我的个人主页，欢迎来阅读我的其他文章
https://blog.ZEEKLOG.net/2402_83322742?spm=1011.2415.3001.5343
我的Java-Spring入门指南知识文章专栏
欢迎来阅读指出不足
https://blog.ZEEKLOG.net/2402_83322742/category_13040333.html?spm=1001.2014.3001.5482