如何在Spring Mvc中使用jsps添加CSS和js文件

Question

I'm currently developing a JavaEE spring based application using spring MVC but when I added css and js files,the jsps doesn't read them,after some researches I added this line on my dispatcher servlet file

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">


    <context:component-scan base-package="controllers"></context:component-scan>
    <mvc:annotation-driven></mvc:annotation-driven>
    <bean id="jspViewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsps/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <mvc:resources location="/resources/" mapping="/resources/**"></mvc:resources>


</beans>

and this is the project hierarchy

Answer 1

try this,

on your jsp page, if you are using jstl then do this

First include the jstl tag library,

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

then

    <link href="<c:url value="/resources/css/myCSSFile.css" />"  rel="stylesheet">
   <script src="<c:url value="/resources/js/jquery.1.10.2.min.js"  />"></script>
    <script src="<c:url value="/resources/js/main.js" />"></script>

Say, if you are already using Spring tag library then can you do like this,

First include the tag library, as bellow

<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>

and then do this,

<s:url value="/resources/css/main.css" var="mainCss" />
<s:url value="/resources/js/jquery.1.10.2.min.js" var="jqueryJs" />
<s:url value="/resources/js/main.js" var="mainJs" />

<link href="${mainCss}" rel="stylesheet" />
<script src="${jqueryJs}"></script>
<script src="${mainJs}"></script>

Do let me know If i missed something to explain here

Answer 2

You need to add the css/js files to <script> and <link> tags in the .jsp's themselves like you would an HTML file.

CSS and JS are both client side and need to be sent / loaded on the client rather than the server.

Edit to be a bit more clear: JSPs are "formatted" on the backend (Spring) and then sent to the client as if it were static HTML, so loading the JS/CSS on the server would be like running all the client code on the server, stop running the client code, then send the static page to the client.