无法在 MVC 项目中加载 CSS

Posted 2023-02-27

【中文标题】无法在 MVC 项目中加载 CSS

【英文标题】：Can't load CSS in MVC project

【发布时间】：2019-01-03 05:40:04

【问题描述】：

我使用 MVC 创建了一个 WebProject，所以首先我添加了带有视图和控制器的 servlet 配置，所有样式都运行良好。但是当我实现 SpringSecurity 来创建登录页面时，所有的 css、js 和 img 都停止工作了......

我的项目结构：

web.xml 代码：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">

  <display-name>gesto</display-name>

  <servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/dispatcher-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
     <servlet-name>dispatcher</servlet-name>
     <url-pattern>/</url-pattern>
  </servlet-mapping>

    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/applicationContext.xml</param-value>
    </context-param>

    <listener>
     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy
          </filter-class>
    </filter>
    <filter-mapping>
        <filter-name>springSecurityFilterChain</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <error-page>
    <error-code>404</error-code>
    <location>/WEB-INF/jsp/error404.jsp</location>
    </error-page>

</web-app>

dispatcher-servlet.xml 代码：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd 
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd 
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd">

    <context:component-scan base-package="com.fihoca.gespro2.controllers" />

    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass"
            value="org.springframework.web.servlet.view.JstlView" />
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <mvc:resources mapping="/resources/**" location="/resources/" />
    <mvc:annotation-driven />

</beans>

如您所见，我像 MVC 教程一样映射了资源。

spring-security.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/security" xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
        http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security-4.0.xsd">
    <http use-expressions="true">
        <intercept-url pattern="/login" access="permitAll" />
        <intercept-url pattern="/**" access="isAuthenticated()" />
        <form-login default-target-url="/home" login-page="/login" authentication-failure-url="/login?error=true" />
        <logout logout-success-url="/index" />
    </http>
    <authentication-manager>
        <authentication-provider>
            <user-service>
                <user name="admin" password="Secret123" authorities="ROLE_USER" />
            </user-service>
        </authentication-provider>
    </authentication-manager>
</beans:beans>

这些是我在 JSP 页面中指向 css 和 js 的链接：

<script src="/resources/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="/resources/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="/resources/css/style.css">

【参考方案1】：

我解决了。解决方案是将href更改为：

<script src="resources/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="resources/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="resources/css/style.css">

基本上，我删除了第一个“/”并且它起作用了。