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

前言
一、前置准备
- [1.1 项目结构](#1.1 项目结构)
- [1.2 问题场景复现](#1.2 问题场景复现)
二、解决方案
- 方法一：使用mvc:default-servlet-handler
- - [2.1.1 原理](#2.1.1 原理)
  - [2.1.2 配置步骤（仅需1步）](#2.1.2 配置步骤（仅需1步）)
  - [2.1.3 注意事项](#2.1.3 注意事项)
- 方法二：使用mvc:resources标签
- - [2.2.1 原理](#2.2.1 原理)
  - [2.2.2 配置步骤（按资源类型逐一配置）](#2.2.2 配置步骤（按资源类型逐一配置）)
  - [2.2.3 核心参数说明（避免踩坑）](#2.2.3 核心参数说明（避免踩坑）)
  - [2.2.4 注意事项](#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.csdn.net/2402_83322742?spm=1011.2415.3001.5343

我的Java-Spring入门指南知识文章专栏
欢迎来阅读指出不足
https://blog.csdn.net/2402_83322742/category_13040333.html?spm=1001.2014.3001.5482

一、前置准备

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

1.1 项目结构

clike 复制代码

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时，若未配置静态资源放行，浏览器会拦截这些请求：

html 复制代码

<!-- index.html中引用CSS（路径看似正确，但会被SpringMVC拦截） -->
<link rel="stylesheet" href="css/style.css">
<!-- index.html中引用JS -->
<script src="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>之后（确保动态请求优先处理）：

xml 复制代码

<!-- springmvc.xml -->
<beans xmlns="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-scan base-package="com.niit"></context:component-scan>
    
    <!-- 2. MVC注解驱动（原有配置，动态请求核心） -->
    <mvc:annotation-driven/>
    
    <!-- 3. 新增：静态资源快速放行（关键配置） -->
    <mvc:default-servlet-handler></mvc:default-servlet-handler>
    
    <!-- 其他配置（视图解析器、数据源等，原有配置不变） -->
</beans>

2.1.3 注意事项

必须配合<mvc:annotation-driven>：若只加<mvc:default-servlet-handler>而不加<mvc:annotation-driven>，SpringMVC会无法处理动态请求（如Controller的@RequestMapping接口），导致后端接口失效。
适用场景：适合静态资源目录少、无需精确控制资源访问权限的项目，如小型管理系统。
不适用场景：若静态资源放在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>之后，添加以下配置，确保覆盖所有静态资源类型：

xml 复制代码

<!-- springmvc.xml -->
<!-- 2. MVC注解驱动（原有配置，必须保留） -->
<mvc:annotation-driven/>

<!-- 3. 新增：静态资源精确映射（关键配置，按资源类型放行） -->
<!-- 1. 放行CSS资源：URL以/css/开头 → 映射到WEB-INF/templates/html/css/目录 -->
<mvc:resources mapping="/css/**" location="/WEB-INF/templates/html/css/"/>
<!-- 2. 放行JS资源：URL以/js/开头 → 映射到WEB-INF/templates/html/js/目录 -->
<mvc:resources mapping="/js/**" location="/WEB-INF/templates/html/js/"/>
<!-- 3. 放行图片资源：URL以/images/开头 → 映射到WEB-INF/templates/html/images/目录 -->
<mvc:resources mapping="/images/**" location="/WEB-INF/templates/html/images/"/>
<!-- 4. 放行图标资源（font-awesome）：URL以/font-awesome/开头 → 映射到对应目录 -->
<mvc:resources mapping="/font-awesome/**" location="/WEB-INF/templates/html/font-awesome/"/>
<!-- 5. 放行字体资源：URL以/fonts/开头 → 映射到对应目录 -->
<mvc:resources mapping="/fonts/**" location="/WEB-INF/templates/html/fonts/"/>

<!-- 其他配置（视图解析器、数据源等，原有配置不变） -->

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

参数名	示例配置	作用与注意事项
`mapping`	`/css/**`	1. ``表示"匹配该路径下所有子目录和文件"，如`/css/`可匹配`/css/style.css`、`/css/common/base.css`； 2. 必须以`/`开头，且末尾需加`/**`，否则无法匹配子目录资源。
`location`	`/WEB-INF/templates/html/css/`	1. 必须指向项目中静态资源的实际物理路径，末尾必须加`/`，否则会少一层目录； 2. 路径需与项目结构完全一致（参考本文"1.1 项目结构"），错一个字符都会导致404。

2.2.4 注意事项

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

我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343

我的Java-Spring入门指南知识文章专栏
欢迎来阅读指出不足
https://blog.csdn.net/2402_83322742/category_13040333.html?spm=1001.2014.3001.5482

|--------------------|
| 非常感谢您的阅读，喜欢的话记得三连哦 |