CSS 样式在我的 jsp 文件中不起作用，即我的 java ee jsp-servlet 应用程序
[英]CSS styles are not working in my jsp file im my java ee jsp-servlet application
问题描述
I am building a web application in using JSP/Servlet and I'm having issues applying my CSS styles in my JSP files.
我正在使用 JSP/Servlet 构建一个 Web 应用程序，但在我的 JSP 文件中应用我的 CSS 样式时遇到了问题。 All my JSP are in WEB-INF/ directory and my CSS file is the styles directory at the same level as the WEB-INF.我所有的 JSP 都在 WEB-INF/ 目录中，我的 CSS 文件是与 WEB-INF 同一级别的样式目录。 I am using Eclipse Oxygen.我正在使用 Eclipse Oxygen。
Here is the directory structure of my web app.这是我的 Web 应用程序的目录结构。
Here the content of my web.xml file这里是我的 web.xml 文件的内容
<servlet>
<servlet-name>home</servlet-name>
<servlet-class>com.skillupsoft.tp.servlets.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>home</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>CreationClient</servlet-name>
<servlet-class>com.skillupsoft.tp.servlets.CreationClient</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CreationClient</servlet-name>
<url-pattern>/creationClient</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>CreationCommande</servlet-name>
<servlet-class>com.skillupsoft.tp.servlets.CreationCommande</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CreationCommande</servlet-name>
<url-pattern>/creationCommande</url-pattern>
</servlet-mapping>
Here is CreationCommande servlet.这是 CreationCommande servlet。
public class CreationCommande extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.getServletContext().getRequestDispatcher("/WEB-INF/creerCommande.jsp").forward(request, response);
}
}
And here is my jsp file : creerCommande.jsp这是我的 jsp 文件：creerCommande.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Création d'une commande</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/styles/style.css"/>
</head>
<body>
<div>
<form action="creationCommande" method="get">
<fieldset>
<legend>Informations client</legend>
<label for="nomClient">Nom<span class="requis">*</span></label>
<input type="text" id="nomClient" name="nomClient"
value="" size="20" maxlength="20"><br>
<label for="prenomClient">Prénom</label>
<input type="text" id="prenomClient" name="prenomClient"
value="" size="20" maxlength="20"><br>
<label for="adresseClient">Adresse de livraison<span class="requis">*</span></label>
<input type="text" id="adresseClient" name="adresseClient"
value="" size="20" maxlength="20"><br>
<label for="telephoneClient">Numéro de téléphone<span class="requis">*</span></label>
<input type="text" id="telephoneClient" name="telephoneClient"
value="" size="20" maxlength="20"><br>
<label for="emailClient">Adresse email</label>
<input type="email" id="emailClient" name="emailClient"
value="" size="20" maxlength="60"><br>
</fieldset>
<fieldset>
<legend>Informations commande</legend>
<label for="dateCommande">Date <span class="requis">*</span></label>
<input type="text" id="dateCommande" name="dateCommande"
value="" size="20" maxlength="20" disabled="disabled"><br>
<label for="montantCommande">Montant<span class="requis">*</span></label>
<input type="text" id="montantCommande" name="montantCommande"
value="" size="20" maxlength="20"><br>
<label for="modePaiementCommande">Mode de paiement<span class="requis">*</span></label>
<input type="text" id="modePaiementCommande" name="modePaiementCommande"
value="" size="20" maxlength="20"><br>
<label for="statutPaiementCommande">Statut de paiement</label>
<input type="text" id="statutPaiementCommande" name="statutPaiementCommande"
value="" size="20" maxlength="20"><br>
<label for="modeLivraisonCommande">Mode de livraison</label>
<input type="text" id="modeLivraisonCommande" name="modeLivraisonCommande"
value="" size="20" maxlength="20"><br>
<label for="statutLivraisonCommande">Statut de la livraison</label>
<input type="text" id="statutLivraisonCommande" name="statutLivraisonCommande"
value="" size="20" maxlength="20"><br>
</fieldset>
<input type="submit" value="Valider">
<input type="reset" value="Remettre à zéro">
</form>
</div>
</body>
</html>
Notice that I've referenced my css file il the jsp code like this:请注意，我在 jsp 代码中引用了我的 css 文件，如下所示：
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/styles/style.css"/>
I am a little bit confuse because this code worked last week and today it does'nt work anymore.我有点困惑，因为这段代码上周有效，今天它不再有效。
Thanks谢谢
2 个解决方案
解决方案1
0 2018-08-27 16:13:30
The location of static web assets are mal-configured in your project.静态 Web 资产的位置在您的项目中配置错误。 Move the styles folder into WEB-INF folder.将样式文件夹移动到 WEB-INF 文件夹中。 It will work fine.它会正常工作。
解决方案2
0 2018-08-27 17:24:39
First make a resources folder inside webcontent .首先在webcontent创建一个resources文件夹。 Then move css folder inside resources folder.然后将css文件夹移动到resources文件夹中。 Now In your servlet-context.xml file write现在在您的servlet-context.xml文件中写入
<resources mapping="/resources/**" location="/resources/"/>
And in your jsp page write在你的jsp页面写
<link rel="stylesheet" type="text/css" href="
<c:url value="/resources/css/style.css"/> "/>
If you haven't add jstl add如果你还没有添加 jstl 添加
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
in your pom.xml在你的pom.xml
And add this tag <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> on the top of jsp page.并在jsp页面的顶部添加这个标签<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.