Verwijzen externe CSS / JS files

[whoopy_]

Goedemiddag allen,

Op een of andere manier gaat het verwijzen naar een relatief pad bij mij niet goed. Ik heb een Maven webapp project waarin ik een Spring controller gebruik die naar een indexpagina verwijst.

code:

    @RequestMapping(value = "/")
    public String goToMain(){
        return "redirect:/pages/index.html";
    }

Deze verwijst prima na de gewenste index.html pagina. Deze index.html pagina roept twee externe files aan, een stylesheet (.css) en een angular (.js) file. Dit staat zo in de html code.

code:

<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
<script type="text/javascript" src="../js/angularCode.js"></script>

De folderstructuur ziet er als volgt uit.

code:

src
--main
----webapp
------css
--------stylesheet.css
------js
--------angularCode.js
------WEB-INF
--------pages
----------index.html

Dit zijn de mappings in mijn servlet.

code:

    <mvc:resources mapping="/pages/**" location="/pages/" />
    <mvc:resources mapping="/js/**" location="/js/" />
    <mvc:resources mapping="/css/**" location="/css/" />

Dit zou toch gewoon moeten werken?

Bedankt voor jullie hulp!

[Verwijderd]

Nee, de ".." moet in beide gevallen weg. Als 'pages' de root was hoefde je dat immers niet voor index.html te zetten, en dus hoef je ook geen map omhoog om de CSS en JS te benaderen.

Denk ik, want Maven en Spring heb ik nog nooit van gehoord...

edit: never mind, ik had die WEB-INF niet gezien...

[ Voor 10% gewijzigd door Verwijderd op 11-07-2016 18:50 ]

[Merethil]

whoopy_ schreef op maandag 11 juli 2016 @ 17:58:
Goedemiddag allen,

Op een of andere manier gaat het verwijzen naar een relatief pad bij mij niet goed. Ik heb een Maven webapp project waarin ik een Spring controller gebruik die naar een indexpagina verwijst.

code:

    @RequestMapping(value = "/")
    public String goToMain(){
        return "redirect:/pages/index.html";
    }

Deze verwijst prima na de gewenste index.html pagina. Deze index.html pagina roept twee externe files aan, een stylesheet (.css) en een angular (.js) file. Dit staat zo in de html code.

code:

<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
<script type="text/javascript" src="../js/angularCode.js"></script>

De folderstructuur ziet er als volgt uit.

code:

src
--main
----webapp
------css
--------stylesheet.css
------js
--------angularCode.js
------WEB-INF
--------pages
----------index.html

Dit zijn de mappings in mijn servlet.

code:

    <mvc:resources mapping="/pages/**" location="/pages/" />
    <mvc:resources mapping="/js/**" location="/js/" />
    <mvc:resources mapping="/css/**" location="/css/" />

Dit zou toch gewoon moeten werken?

Bedankt voor jullie hulp!

Ze moeten onder je WEB-INF folder staan, niet onder je webapp. WEB-INF is je public_html, die worden van buitenaf beschikbaar gemaakt door je web.xml settings en je web container.

Bovenstaande is bad practice, je idee is goed, maar je kan beter met een c:url of een spring:url de CSS aanroepen, aangezien je een ander pad moet aangeven dan je nu doet.

HTML:

<link href="<c:url value="/css/page.css" />" rel="stylesheet">

of

HTML:

<spring:url value="/css/page.css" var="mainCss" />
    
<link href="${mainCss}" rel="stylesheet" />

Wel moet je dan natuurlijk de juiste jstl's inladen in je .jsp.

---

Als je geen imports wilt gebruiken kan je het volgende doen:
In plaats van

HTML:

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

Doe je

HTML:

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

Let op wat ik daar aangepast heb; de ../ volledig weghalen (inclusief start-slash) zodat de browser snapt dat je het pad absolute wilt aanroepen ipv relative.

Verwijderd schreef op maandag 11 juli 2016 @ 18:36:
Nee, de ".." moet in beide gevallen weg. Als 'pages' de root was hoefde je dat immers niet voor index.html te zetten, en dus hoef je ook geen map omhoog om de CSS en JS te benaderen.

Denk ik, want Maven en Spring heb ik nog nooit van gehoord...

edit: never mind, ik had die WEB-INF niet gezien...

Spring is een framework voor Java web-apps, en Maven is een build-tool/dependency manager zoals bijvoorbeeld composer voor PHP e.d.
Spring werkt met servlets en requestmappings voor al je pagina's, en heeft z'n eigen syntax voor het importeren van zaken als pagina's/css/js/whatevers.

[ Voor 36% gewijzigd door Merethil op 12-07-2016 10:04 ]