我的 JSP 页面不会加载 CSS 文件答案

【问题标题】：My JSP page won't load CSS file我的 JSP 页面不会加载 CSS 文件
【发布时间】：2018-07-21 23:15:52
【问题描述】：

我有 Spring MVC 应用程序，我使用的是 Java 配置，没有 XML。我的 JSP 无法访问 CSS 文件。我用谷歌搜索了一整天，几乎所有东西都试过了。当我检查我的页面时，在控制台中出现错误 - 加载资源失败：服务器响应状态为 404（未找到）我正在使用 Wildfly 服务器。

SpringConfig：

package com.library.config;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;


@EnableWebMvc
@Configuration
@ComponentScan(basePackages = "com.library")
public class SpringConfig extends WebMvcConfigurerAdapter {

    @Bean
    public ViewResolver viewResolver(){
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/resources/views/");
        resolver.setSuffix(".jsp");
        return resolver;
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**").addResourceLocations("/resources/static/css/");
    }
}

DispatcherInitializer：

package com.library.config;

import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class DispatcherInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {


    @Override
    protected Class<?>[] getRootConfigClasses() {
        return new Class[] {SpringConfig.class};
    }

    @Override
    protected Class<?>[] getServletConfigClasses() {
        return null;
    }

    @Override
    protected String[] getServletMappings() {
        return new String[] {"/"};
    }
}

JSP 页面：

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<c:set var="context" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<head>
    <title>Login Page</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="<c:url value="${pageContext.request.contextPath}/resources/static/css/style.css" />" rel="stylesheet">


</head>
<body>

<h2>${pageContext.request.contextPath}</h2>

<br>
<div class="row">
    <div class="container">
        <div class="login-register-form-section">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#login" data-toggle="tab">Login</a></li>
                <li><a href="#register" data-toggle="tab">Register</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="login">
                    <form class="form-horizontal" method="post" action="">
                        <div class="form-group " >
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-user"></i></div>
                                <input type="text" name="login_email" class="form-control" placeholder="Username or email" required="required" value="">
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-key"></i></div>
                                <input type="password" name="login_password" class="form-control" placeholder="Password" required="required">
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="checkbox" id="rememberMe">
                            <label for="rememberMe">Remember Me</label>
                            <a href="#" class="pull-right">Forgot password?</a>
                        </div>
                        <input type="submit" value="Login" class="btn btn-success btn-custom">

                    </form>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="register">
                    <form class="form-horizontal" id="form">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-user"></i></div>
                                <select type="text" id="sex" name="gender" class="form-control">
                                    <option>Male</option>
                                    <option>Female</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-male"></i></div>
                                <input type="text" id="register_username" class="form-control" placeholder="Username" required="required" value="">
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-envelope"></i></div>
                                <input type="email" id="register_email" class="form-control" placeholder="Email" required="required" value="">
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-skype"></i></div>
                                <input type="text" id="register_skype" class="form-control" placeholder="Skype name" required="required" value="">
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="fa fa-lock"></i></div>
                                <input type="password" id="register_password" class="form-control" placeholder="Password" required="required">
                            </div>
                        </div>
                        <input type="submit" id="submitbtn" value="Register" class="btn btn-success btn-custom">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <center><h5 class="modal-title" id="exampleModalLabel">Your registration was successful! Please login!</h5></center>
            </div>
            <div class="modal-footer">
                <button type="button" id="confirm" class="btn btn-primary">Close</button>
            </div>
        </div>
    </div>
</div>




</body>
</html>

【问题讨论】：

好像webapp 在src 目录下。
webapp 与main 处于同一级别。这个结构是由 maven 生成的。
尝试使用<link href="/resources/static/css/style.css" rel="stylesheet">

标签： css spring spring-mvc jsp

【解决方案1】：

根据您发布的问题信息，我首先对您的项目做出一些假设/猜测：

您的项目设置为Java 项目。
您正在使用Maven 运行您的构建，软件包生产设置为：<packaging>WAR</packaging>。
成功构建后，style.css 的副本最终会位于以下位置：/target/libraryproject/WEB-INF/classes/static/css/style.css。

我认为我在前 2 个方面相当安全，但第 3 个猜测可能不正确，具体取决于您的构建设置方式。例如，目标路径的libraryproject 部分实际上可能类似于：libraryproject-0.0.1-SNAPSHOT。如果是这样，您可能需要对以下内容进行一些调整，因此请记住这一点，但以下是我的建议：

第 1 步：

更改现有的SpringConfig.addResourceHandlers 方法，删除DEVELOPMENT_TIME 透视图，重构resourceLocations 参数以定义RUNTIME 规范，以便在RUNTIME，从根classpath 加载静态资源在WAR 文件中：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**")
                .addResourceLocations("classpath:/static/");
}

第 2 步：

更新login.jsp 中的样式表link 规范，以便从第1 步中定义的WAR 文件resourceLocation 加载style.css：

<link href="<c:url value="css/style.css"/>" rel="stylesheet"/>

注意路径是如何相对于目标构建位置中的/static/ 资源根位置的，这在WAR 中保持不变。

在这 2 项更改之后，我认为您将能够正常运行。但愿如此。如果没有，请告诉我，我会尽力帮助您。我记得有同样的问题，苦苦挣扎了几个小时，还有令人沮丧的 404 错误。这很痛苦 - 希望这可以帮助您解决问题 -

【讨论】：

我检查了这 3 点，它们没问题。我尝试了这两个步骤，但是当我插入 <link href="<c:url value="css/style.css"/>" rel="stylesheet"/> 时，它给了我该值的错误 - 无法解析目录。
如果你能再详细一点，我会帮你弄清楚发生了什么-