SSM项目前端CSS、JS、Images等效果失效和不显示的问题

在写SSM项目时找的网页模板，但是放在项目里后效果突然失效了，图片也显示不了了，很头疼

在网上找了很多办法，大家都说是过滤器的问题，所以我一开始按照第一种方法，在web.xml中加入

<servlet-mapping>
	<servlet-name>defaultservlet-name>
	<url-pattern>*.jpgurl-pattern>
servlet-mapping>

<servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.eoturl-pattern>
servlet-mapping>

<servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.svgurl-pattern>
servlet-mapping>

<servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.ttfurl-pattern>
servlet-mapping>

<servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.woffurl-pattern>
servlet-mapping>

<servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.lessurl-pattern>
servlet-mapping>

<servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.scssurl-pattern>
servlet-mapping>

<servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.woff2url-pattern>
servlet-mapping>
<servlet-mapping>
    <servlet-name>defaultservlet-name>
    <url-pattern>*.otfurl-pattern>
servlet-mapping>

<servlet-mapping>
    <servlet-name >default servlet-name >
    <url-pattern >*.pngurl-pattern>
servlet-mapping >

<servlet-mapping>
    <servlet-name >default servlet-name >
    <url-pattern >*.gifurl-pattern>
servlet-mapping >

<servlet-mapping>
    <servlet-name >default servlet-name >
    <url-pattern >*.jsurl-pattern>
servlet-mapping >

<servlet-mapping >
    <servlet-name >default servlet-name >
    <url-pattern >*.cssurl-pattern>
servlet-mapping >

<servlet-mapping >
    <servlet-name >default servlet-name >
    <url-pattern >*.htmurl-pattern>
servlet-mapping >

<servlet-mapping >
    <servlet-name >default servlet-name >
    <url-pattern >*.imageurl-pattern>
servlet-mapping >

⛔结果没啥用！！

于是又按照大家说的第二种方法，在spring-mvc.xml中加入⬇

    <mvc:resources mapping="/js/**" location="/js/"/>
    <mvc:resources mapping="/css/**" location="/css/"/>
    <mvc:resources mapping="/fonts/**" location="/fonts/"/>
    <mvc:resources mapping="/font-awesome/**" location="/font-awesome/"/>

结果还是没什么效果 ❗ 后来想了一下别人放在/WEB-INF/中的在location前面加了/WEB-INF/，于是乎我把location中的"/js/"前面的 '/' 去掉试了一下变成 ⬇

    <mvc:resources mapping="/js/**" location="js/"/>
    <mvc:resources mapping="/css/**" location="css/"/>
    <mvc:resources mapping="/fonts/**" location="fonts/"/>
    <mvc:resources mapping="/font-awesome/**" location="font-awesome/"/>

结果！！真的太开心了，弄了几个小时！！！！

所以大家在修改的时候一定要看清楚文件夹的位置，如果您的js、css、images等文件放置在'/WEB-INF/'中，请您一定要在location中加入'/WEB-INF/' ➡ location="/WEB-INF/font-awesome/"

不过两种方法大家都可以试下，因为我一开始使用了第一种方法也有效果，不过后来在另一个项目中第一种方法不起作用 得用到第二种方法 ❕