Tarayıcı, bir JSP'ye ileten bir Servlet çağırırken CSS, resimler ve bağlantılar gibi ilgili kaynaklara erişemez / bulamaz

83

Bir JSP'ye yönlendiren bir sunucu uygulamam varken, CSS ve görüntüleri yüklemede ve diğer sayfalara bağlantılar oluşturmada sorun yaşıyorum. Benim ayarladığınızda Özellikle, <welcome-file>To index.jsp, CSS yükleniyor ve benim görüntüleri görüntüleniyor. Kızkardeşimi set Ancak, <welcome-file>hiç HomeServletyönlendirme yaptığı kontrol eden index.jspCSS uygulanmıyor ve benim resim gösterilmiyor değildir.

CSS dosyam içinde web/styles/default.css.
Resimlerim geldi web/images/.

CSS'me şu şekilde bağlanıyorum:

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

Resimlerimi aşağıdaki gibi gösteriyorum:

<img src="images/image1.png" alt="Image1" />

Bu sorun nasıl ortaya çıkıyor ve nasıl çözebilirim?

Güncelleme 1 : Uygulamanın yapısını ve yardımcı olabilecek diğer bazı bilgileri ekledim.

alternatif metin

header.jspDosya CSS bağlantı etiketi içeren dosyadır. HomeServletBenim olarak ayarlanmıştır welcome-filein web.xml:

<welcome-file-list>
    <welcome-file>HomeServlet</welcome-file>
</welcome-file-list>

Sunucu uygulaması aşağıdaki gibi bildirilir ve eşlenir web.xml:

<servlet>
    <servlet-name>HomeServlet</servlet-name>
    <servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

Güncelleme 2 : Sonunda sorunu buldum - sunucu uygulamam yanlış eşlendi. Görünüşe göre bir Servlet'i sizin <welcome-file>için bir URL kalıbına sahip olamayacağı için ayarlarken, bunu /biraz garip buluyorum, çünkü bu sitenin kök dizini anlamına gelmez mi?

Yeni eşleme aşağıdaki gibidir:

<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>
css  image  jsp  servlets 
— Brian DiCasa
kaynak
Güncelleme 2 için teşekkür ederim, birkaç saattir kafamı duvara dayayarak css'imin neden yüklenmediğini anlamaya çalışıyorum. (ek açıklama olarak / vardı).
— kiwicomb123

Yanıtlar:

101

JSP dosyası tarafından oluşturulan HTML sayfasındaki tüm göreli URL'ler, beklediğiniz gibi sunucu tarafındaki JSP dosyasının konumuna değil , geçerli istek URL'sine (tarayıcı adres çubuğunda gördüğünüz URL) bağlıdır . Bu kaynakları bir şekilde diskten eklemek zorunda olan web sunucusu değil, bu kaynakları URL'ye göre tek tek indirmesi gereken web tarayıcısıdır.

İlgili URL'leri JSP dosyasının konumu yerine sunucu uygulamasının URL'sine göre yapmak için değiştirmenin yanı sıra, bu sorunu çözmenin başka bir yolu da onları etki alanı köküne göre yapmaktır (yani a ile başlamak /). Bu şekilde, sunucu uygulamasının URL'sini değiştirdiğinizde ilgili yolları bir kez daha değiştirme konusunda endişelenmenize gerek yoktur.

<head>
    <link rel="stylesheet" href="/context/css/default.css" />
    <script src="/context/js/default.js"></script>
</head>
<body>
    <img src="/context/img/logo.png" />
    <a href="/context/page.jsp">link</a>
    <form action="/context/servlet"><input type="submit" /></form>
</body>

Ancak, muhtemelen bağlam yolunu sabit kodlamak istemezsiniz. Çok makul. EL'deki bağlam yolunu şu yolla elde edebilirsiniz ${pageContext.request.contextPath}.

<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
    <script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
    <img src="${pageContext.request.contextPath}/img/logo.png" />
    <a href="${pageContext.request.contextPath}/page.jsp">link</a>
    <form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>

(kolayca kısaltılabilir <c:set var="root" value="${pageContext.request.contextPath}" />ve ${root}başka yerlerde olduğu gibi kullanılabilir )

Veya okunamayan XML ve bozuk XML sözdizimi vurgulamasından korkmuyorsanız, JSTL'yi kullanın <c:url>:

<head>
    <link rel="stylesheet" href="<c:url value="/css/default.css" />" />
    <script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
    <img src="<c:url value="/img/logo.png" />" />
    <a href="<c:url value="/page.jsp" />">link</a>
    <form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>

Her iki durumda da, çok sayıda göreli URL'niz varsa, bu oldukça külfetli olur. Bunun için <base>etiketini kullanabilirsiniz . Tüm ilgili URL'ler anında ona göre olacaktır. Bu şema (başlamak ancak sahiptir http://, https://vs.). Düz EL'de temel bağlam yolunu elde etmenin düzgün bir yolu yoktur, bu yüzden burada biraz JSTL yardımına ihtiyacımız var.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
    <link rel="stylesheet" href="css/default.css" />
    <script src="js/default.js"></script>
</head>
<body>
    <img src="img/logo.png" />
    <a href="page.jsp">link</a>
    <form action="servlet"><input type="submit" /></form>
</body>

Bunun da (yine) bazı uyarıları var. Bağlantılar ( #identifierURL'ler) de temel yola göre olacaktır! Bunun yerine bunu istek URL'sine (URI) göre yapmak istersiniz. Öyleyse değiştir

<a href="#identifier">jump</a>

-e

<a href="${uri}#identifier">jump</a>

Her yolun kendi artıları ve eksileri vardır. Hangisini seçeceğiniz size kalmış. En azından şimdi bu sorunun nasıl ortaya çıktığını ve nasıl çözüleceğini anlamalısınız :)

Ayrıca bakınız:

— BalusC
kaynak
Gerçekten bunun mantıklı bir şekilde çalışacağını umuyordum, ancak tarayıcı hala dosyaları bulamıyor. Soruma biraz daha bilgi ekledim (uygulama yapısı ve diğer bazı genel bilgiler). Yardım için teşekkürler!
— Brian DiCasa
3
Sunucu uygulamasını /(koku, koku;)) eşlediniz . Dolayısıyla, CSS dosyalarına da müdahale eder (aslında her HTTP isteği). Onları doğru şekilde ele alıyor mu? Yani CSS dosyasına localhost: 8080 / context / styles / default.css ile doğrudan web tarayıcısında erişebilirsiniz ?
— BalusC
"/" İle eşlendiğinde değil. Yine de "/ HomeServlet" olarak eşlendiğinde yapabilirim.
— Brian DiCasa
Başlangıçta neden eşleştirdiğinizden emin değilim /*, ancak bir tür ön denetleyici oluşturmaya çalışıyorsanız, bu yanıtı ve belki de bu yanıtı kendinize almanızı öneririm .
— BalusC
@BalusC - İlk paragrafınızda, "Bu kaynakları bir şekilde diskten eklemek zorunda olan web sunucusu değil, bu kaynakları URL'ye göre ayrı ayrı indirmek zorunda olan web tarayıcısıdır." Kaynakları getirmenin web sunucusunun değil tarayıcının sorumluluğunda olduğunu pratik olarak kontrol edebilir miyiz? Beni pratik bir örneğe veya öğreticiye yönlendirebilirseniz, bu harika olacak!
— Abhishek Aggarwal
2

İpucu için gerçek HTML çıktısını analiz etmelisiniz.

Yolu bu şekilde vermek, "mevcut konumdan" anlamına gelir, öte yandan, /"bağlamdan" anlamına gelen bir ile başlarsanız .

— Adeel Ansari
kaynak
Ne demek istediğinden emin değilim. CSS bağlantısını buna değiştirirsem:
— Brian DiCasa
Demek istediğim, yolun doğru olup olmadığını anlamak için HTML kaynağını tarayıcınızdan görüntüleyebilirsiniz. Değilse, düzeltmek için ne yapmanız gerekir?
— Adeel Ansari
Kaynağı görüntülüyordum ve bağlantı etiketlerim için gelen şey sorumda gönderdiklerim. Sanırım neden doğrudan jsp'ime bağlanırsam, dosyaların bulunabileceğinden ve iletirsem bulunamayacaklarından emin değilim? Web uygulamasında herhangi bir konumdan bulunabilmeleri için resimlerimi nerede saklayabilirim?
— Brian DiCasa
Tamam, çünkü index.jspsizin stylesve imagesdizinlerinizle aynı yerde / seviyede bulunuyor. Bu nedenle, doğrudan index.jspbir karşılama dosyası olarak kullandığınızda , her şey cazibe gibi görünür. Öte yandan, aynı kaynağı sunucu uygulaması aracılığıyla ilettiğinizde, konu artık aynı değildir. [devam edecek ...]
— Adeel Ansari
@Brian D .: ... İsteği belirli bir sunucu uygulamasına yönlendirmek için yolu dikkate almıyoruz, servlet eşlemesi kullanıyoruz. Şimdi context pathburayı anlamalıyız . Dokümanlarda gördüğünüz /gibi, yolda kullanıldığında belirli bir anlamı olan isteği iletmek veya isteği yeniden yönlendirmek istiyoruz. Eğik çizgi olmadan, bağlam yolundan değil, geçerli konumdan alınacaktır. Umarım beni şimdi anlıyorsundur.
— Adeel Ansari
0

Karşılama sayfanız That Servlet olarak ayarlanmıştır. Bu nedenle, tüm css, görüntü yolu bu sunucu uygulaması DIR'ına göre verilmelidir. bu kötü bir fikir! neden ana sayfa olarak sunucu uygulamasına ihtiyacınız var? .jsp'yi dizin sayfası olarak ayarlayıp oradan herhangi bir sayfaya yönlendirilsin mi?

db'den herhangi bir alanı doldurmaya mı çalışıyorsunuz, bu yüzden servlet kullanıyorsunuz?

— GoodSp33d
kaynak
4
Bir servlet'i (MVC) ön denetleyici olarak kullanmak kesinlikle kötü bir fikir değildir .
— BalusC
0

Spring MVC kullanıyorsanız, statik içerikler için varsayılan eylem sunucu uygulaması bildirmeniz gerekir. Spring-action-servlet.xml içine aşağıdaki girdileri ekleyin. Benim için çalıştı.

NOT: tüm statik içeriği WEB-INF dışında tutun.

<!-- Enable annotation-based controllers using @Controller annotations -->
<bean id="annotationUrlMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
    <property name="order" value="0" />
</bean>

<bean id="controllerClassNameHandlerMapping" class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping">
    <property name="order" value="1" />
</bean>

<bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
— AjayP
kaynak
0

Güncellemenize gelince, arkasındaki mantık kafam karıştı. Biraz daha derine inip şu cevheri buldum:

  • siteniz.com, siteniz.com/ olur
  • siteniz.com/ bir dizindir, bu nedenle karşılama dosyası listesi taranır
  • siteniz.com/CMS ilk karşılama dosyasıdır (karşılama dosyası listesinde "CMS") ve sunucu uygulamasına erişilmesi için MyCMS sunucu uygulamasına bir / CMS eşlemesi vardır.

Kaynak: http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage

Yani, haritalama daha sonra mantıklı geliyor.

Ve artık göreli bağlantılar için src / href olarak $ {pageContext.request.contextPath} / yol / özgürce kullanılabilir!

— Justin Cuaresma
kaynak
0

kısa cevap - jsp'ye
temel href = "/ {uygulamanızın kökü} /" temelini tanımlayacak aşağıdaki satırı ekleyin

— Ankit Pandoh
kaynak
0

Aşağıdaki kod benim için çalıştı.

<% @ include file = "styles / default.css"%> yerine

— Chamika Ravinda
kaynak
0

Bunu da deneyebilirsiniz. Çünkü bu benim için çalıştı ve çok basit.

<style>
    <%@ include file="/css/style.css" %>
</style>
— Dulya Perera
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.