我的 Web 应用程序中的 css 和 js 导入存在一些问题。 我正在使用 Servlet/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 import:
<%@include file="/resources/stylesheet/login.css" %>
等等
它有帮助,但是,在这种情况下,我的 jsp 页面中将会有很多代码,因为我的 .css 和 .js 文件很大。
我应该怎么做才能终止该问题以及在这种情况下如何进行静态导入?
感谢所有能回答的人,你的朋友,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>
对于 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>
注:
../../ 取决于文件夹级别结构。
将你的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' />"/>
希望这会起作用。 我想你可以通过添加下面给出的这些行来做到这一点
<link rel="stylesheet" type="text/css" href="/resources/stylesheets/indx.css" />
<script type="text/javascript" src="resources/js/validators/loginValidator.js"></script>
如果 ccs 样式是静态的(未由服务器端代码预处理),为什么不使用普通的非 JSP (HTML) 表示法?
<link rel="stylesheet" type="text/css" href="./styles/bla bla panel.css" />
减少一级调试
检查服务器/web.xml中的CSS关联来自谷歌的基本“静态”示例就可以了。
我相信你可以通过进行两个结构性改变来解决你的问题。
首先,将
pages/
文件夹移至 WEB-INF
外部、webapp/resources
下方。 所以你的项目结构应该是这样的:
webapp
\__ resources
\__ images
\__ js
\__ pages
其次,使用这种新结构改变您在网页中引用内容的方式。 例如,
<script>
标签现在应如下所示:
<script type="text/javascript" src="js/validators/loginValidator.js"></script>
Bhuvan 的解决方案仅在 servlet 使用 RequestDispatcher(而不是 sendRedirect)访问 JSP 页面时才有效。
为了让CSS正确加载,在这两种情况下,sendRedirect和RequestDispatcher,请使用绝对路径:
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS_files/MyCSS.css">
<jsp:include page="${request.getContextPath()}/All_CSS_files.jsp"></jsp:include>
当您写下
${pageContext.request.contextPath}
或 ${request.getContextPath()}
时,它表示根文件夹 - 又名 webapp 文件夹。
在此之后,无论使用RequestDispatcher还是sendRedirect,您的CSS都将正确加载。
在您的 web.xml 中添加该行
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/assets/*</url-pattern>
</servlet-mapping>
现在您可以链接资产文件夹中的任何内容,因为它是 js 或 css