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

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

在网上找了很多办法，大家都说是过滤器的问题，所以我一开始按照第一种方法，在web.xml中加入<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>*.eot</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.svg</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.less</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.scss</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff2</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.otf</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 >*.gif</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 >*.css</url-pattern>
</servlet-mapping >

<servlet-mapping >
    <servlet-name >default </servlet-name >
    <url-pattern >*.htm</url-pattern>
</servlet-mapping >

<servlet-mapping >
    <servlet-name >default </servlet-name >
    <url-pattern >*.image</url-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/"

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