CSS 样式在我的 java ee jsp-servlet 应用程序的 jsp 文件中不起作用答案

【问题标题】：CSS styles are not working in my jsp file im my java ee jsp-servlet applicationCSS 样式在我的 java ee jsp-servlet 应用程序的 jsp 文件中不起作用
【发布时间】：2018-08-27 16:09:44
【问题描述】：

我正在使用 JSP/Servlet 构建一个 Web 应用程序，但在我的 JSP 文件中应用我的 CSS 样式时遇到了问题。我所有的 JSP 都在 WEB-INF/ 目录中，我的 CSS 文件是与 WEB-INF 处于同一级别的样式目录。我正在使用 Eclipse Oxygen。

这是我的网络应用程序的目录结构。

这里是我的 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>

这里是 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);

    }
}

这是我的 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>

请注意，我在 jsp 代码中引用了我的 css 文件，如下所示：

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

我有点困惑，因为这段代码上周有效，而今天它不再有效。

谢谢

【问题讨论】：

标签： java css jsp servlets jakarta-ee

【解决方案1】：

静态网络资产的位置在您的项目中配置错误。将样式文件夹移动到 WEB-INF 文件夹中。它会正常工作的。

【讨论】：

【解决方案2】：

首先在webcontent 中创建一个resources 文件夹。然后将css 文件夹移动到resources 文件夹中。现在在您的servlet-context.xml 文件中写入

<resources mapping="/resources/**" location="/resources/"/>

然后在你的jsp页面中写

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

如果你还没有添加jstl添加

<dependency>
    <groupId>jstl</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

在你的pom.xml

并添加此标签<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 在jsp页面的顶部。

【讨论】：