CSS-стили не работают в моем jsp-файле. - PullRequest
0 голосов
/ 27 августа 2018

Я создаю веб-приложение с использованием JSP / Servlet, и у меня возникают проблемы с применением моих стилей CSS в моих файлах JSP. Все мои JSP находятся в каталоге WEB-INF /, а мой файл CSS - это каталог стилей того же уровня, что и WEB-INF. Я использую Eclipse Oxygen.

Вот структура каталогов моего веб-приложения. project tp1 directory structure

Вот содержимое моего файла 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.

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>

Обратите внимание, что я ссылался на свой файл css и код jsp следующим образом:

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

Я немного запутался, потому что этот код работал на прошлой неделе, а сегодня он больше не работает.

Спасибо

Ответы [ 2 ]

0 голосов
/ 27 августа 2018

Сначала создайте папку resources внутри webcontent. Затем переместите папку 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.

0 голосов
/ 27 августа 2018

Местоположение статических веб-ресурсов неправильно настроено в вашем проекте. Переместите папку стилей в папку WEB-INF. Это будет работать нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...