JSP 没有看到资源文件夹中的 CSS 和 JS 文件

Question

我的 css 和 web 应用程序中的 js 导入有问题。 我正在使用 Servlets/JSP/CSS/JS。

对于这个问题，我很抱歉，我看到了很多关于这个主题和情况的问题和答案，但没有任何帮助。

我正在尝试添加 css 和 js 文件，如下所示：

<link rel="stylesheet" href="<c:url value='/resources/stylesheet/common.css' />"/>
<link rel="stylesheet" href="<c:url value='/resources/stylesheet/index.css' />"/>
<script type="text/javascript" src="resources/js/validators/loginValidator.js"></script>

但是发生了一些事情，我的所有 css 和 js 文件都不起作用。 我的文件夹/文件在项目中的位置：

我尝试了很多不同的方法来终止这个问题。 我试过这个： https://stackoverflow.com/a/23687360/5331196和https://stackoverflow.com/a/29012643/5331196

没有任何帮助我。 但唯一有效的是 dinamyc 导入： <%@include file="/resources/stylesheet/login.css" %> etc。

它有帮助，但是，在那种情况下，我的 jsp 页面中会有很多代码，因为 my.css 和 .js 文件很大。

我应该怎么做才能终止该问题，在这种情况下我该如何导入 static？

感谢所有能回答的人，你的朋友，davakin111。

我的 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>Jean taxi-service</display-name>

    <listener>
        <listener-class>com.taxi.service.utils.ApplicationContext</listener-class>
    </listener>

    <filter>
        <filter-name>ClientFilter</filter-name>
        <filter-class>com.taxi.service.filter.ClientFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>ClientFilter</filter-name>
        <url-pattern>/someUrl1</url-pattern>
    </filter-mapping>

    <filter>
        <filter-name>OrderFilter</filter-name>
        <filter-class>com.taxi.service.filter.OrderFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>OrderFilter</filter-name>
        <url-pattern>/someUrl2</url-pattern>
    </filter-mapping>

    <servlet>
        <servlet-name>InitController</servlet-name>
        <servlet-class>com.taxi.service.controller.InitController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>LoginController</servlet-name>
        <servlet-class>com.taxi.service.controller.LoginController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>RegistrationController</servlet-name>
        <servlet-class>com.taxi.service.controller.RegistrationController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>UserController</servlet-name>
        <servlet-class>com.taxi.service.controller.UserController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>OrderController</servlet-name>
        <servlet-class>com.taxi.service.controller.OrderController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>PrivateAreaController</servlet-name>
        <servlet-class>com.taxi.service.controller.PrivateAreaController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>ReviewController</servlet-name>
        <servlet-class>com.taxi.service.controller.OrderController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>AdminController</servlet-name>
        <servlet-class>com.taxi.service.controller.AdminController</servlet-class>
    </servlet>

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

    <servlet-mapping>
        <servlet-name>LoginController</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>UserController</servlet-name>
        <url-pattern>/savePersonData</url-pattern>
        <url-pattern>/changePassword</url-pattern>
        <url-pattern>/madeModerator</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>OrderController</servlet-name>
        <url-pattern>/orderCreation</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>RegistrationController</servlet-name>
        <url-pattern>/registration</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>ReviewController</servlet-name>
        <url-pattern>/review</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>PrivateAreaController</servlet-name>
        <url-pattern>/privateArea</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>AdminController</servlet-name>
        <url-pattern>/adminPanel</url-pattern>
    </servlet-mapping>

    <!-- <error-page>
        <location>/WEB-INF/pages/error.jsp</location>
    </error-page>
    -->

    <session-config>
        <session-timeout>45</session-timeout>
    </session-config>

    <resource-ref>
        <description>DB Connection</description>
        <res-ref-name>jdbc/order_board</res-ref-name>
        <res-type>javax.sql.DataSource</res-type>
        <res-auth>Container</res-auth>
    </resource-ref>

    <welcome-file-list>
        <welcome-file>/index.jsp</welcome-file>
    </welcome-file-list>

    <login-config>
        <auth-method>BASIC</auth-method>
    </login-config>

</web-app>

Answer 1

对于JSP项目：

在文件夹webapp创建cssLoader.jsp页面，如下所示：

webapp
   -cssLoader.jsp

cssLoader.jsp

<link rel="stylesheet" href="resources/stylesheet/common.css"/>
<link rel="stylesheet" href="resources/stylesheet/index.css"/>
<script type="text/javascript" src="resources/js/validators/loginValidator.js"></script>

然后使用<jsp:include page="../../cssLoader.jsp"></jsp:include>加载要在页面中导入css / js文件的cssLoader页面。 例如：就我而言，目录：

WEB-INF
   -pages
      -page.jsp

page.jsp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>WEB-INF INSIDE PAGE</title>

        <jsp:include page="../../cssLoader.jsp"></jsp:include>
    </head>
    <body>
        <h1>WEB-INF INSIDE PAGE</h1>
    </body>
</html>

注意：

../../取决于文件夹级别的结构。

Answer 2

将您的css路径更改为

    <link rel="stylesheet" href="<c:url value='/resources/stylesheet/slider/common.css' />"/>
    <link rel="stylesheet" href="<c:url value='/resources/stylesheet/slider/index.css' />"/>

Answer 3

我相信您可以通过进行两次结构更改来纠正您的问题。

首先，将pages/文件夹移至WEB-INF外部，并移至webapp/resources下方。 因此，您的项目结构应如下所示：

webapp
\__ resources
    \__ images
    \__ js
    \__ pages

其次，使用此新结构更改在网页中引用内容的方式。 例如， <script>标记现在应如下所示：

<script type="text/javascript" src="js/validators/loginValidator.js"></script>

Answer 4

希望这会起作用。 我想您可以通过添加以下行来做到这一点

<link rel="stylesheet" type="text/css" href="/resources/stylesheets/indx.css" />
<script type="text/javascript" src="resources/js/validators/loginValidator.js"></script>

Answer 5

如果ccs样式是静态的（未通过服务器端代码进行预处理），为什么不使用常规的非JSP（HTML）表示法？

<link rel="stylesheet" type="text/css" href="./styles/bla bla panel.css" />

一级调试少

检查server / web.xml中的CSS关联，可以使用来自Google的基本“静态”示例。

Answer 6

Bhuvan 的解决方案仅在 servlet 使用 RequestDispatcher（而不是 sendRedirect）到达 JSP 页面时才有效。

为了让 CSS 正确加载，在这两种情况下，sendRedirect 和 RequestDispatcher，都使用绝对路径：

直接链接CSS时：

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS_files/MyCSS.css">

使用包含所有 CSS 引用的 JSP 文件时：

<jsp:include page="${request.getContextPath()}/All_CSS_files.jsp"></jsp:include>

当您编写${pageContext.request.contextPath}或${request.getContextPath()}时，它表示根文件夹 - 又名webapp文件夹。

此后，无论使用 RequestDispatcher 还是 sendRedirect，您的 CSS 都将正确加载。

也可以看看：

1. 必读：关于绝对路径和相对路径的详细信息
2. 这是在单个 JSP 文件中列出所有 CSS 配置的方法。