Spring MVC 4.2.2 中最好的內建靜态資源的方法Spring MVC 4.2.2 – Best way to Add/Integrate JS, CSS and images into JSP file using ‘mvc:resources mapping’

Spring MVC 4.2.2 中最好的內建靜态資源的方法

<a target="_blank" href="http://blog.csdn.net/opengl_es">轉載請保留此句：太陽火神的美麗人生 -  本部落格專注于 靈活開發及移動和物聯裝置研究：iOS、Android、Html5、Arduino、pcDuino，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。</a>

Short link:

Both .js and .css are static resources. Do you also have similar question like:

In spring mvc where to put css/js/img files?

Why my project can’t find css, images and js static files, etc?

Below is an <code>updated project</code> structure for your reference.

<a target="_blank" href="http://cdn1.crunchify.com/wp-content/uploads/2015/10/Create-resources-folder-under-WebContent-folder-and-modify-few-fils-Crunchify.png"></a>

Now, in below steps we are going to – <code>create 1</code> folder, <code>add 2</code> files, <code>modify 2</code> files.

Create <code>resources</code> folder under <code>WebContent</code> folder.

Create <code>crunchify.js</code> file under <code>resources</code> folder.

crunchify.js

1

2

3

4

5

jQuery(document).ready(function($) {

$('#crunchifyMessage').html("&lt;h4&gt;This message is coming from 'crunchify.js' file...&lt;/h4&gt;")

});

Create <code>crunchify.css</code> file under <code>resources</code> folder.

crunchify.css

6

h2{

color:#dd7127;

}

h4{

color:#DD2727;

Modify <code>welcome.jsp</code> file with below content. Please checkout <code>highlighted lines</code>.

welcome.jsp

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

&lt;%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%&gt;

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;!-- let's add tag srping:url --&gt;

&lt;spring:url value="/resources/crunchify.css" var="crunchifyCSS" /&gt;

&lt;spring:url value="/resources/crunchify.js" var="crunchifyJS" /&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;

&lt;link href="{crunchifyCSS}" rel="stylesheet" /&gt;

&lt;script src="${crunchifyJS}"&gt;&lt;/script&gt;

&lt;!-- Finish adding tags --&gt;

&lt;title&gt;Spring MVC Tutorial by Crunchify - Hello World Spring MVC Example&lt;/title&gt;

&lt;style type="text/css"&gt;

body {

background-image: url('http://crunchify.com/bg.png');

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;${message}

&lt;br&gt;

&lt;div

style="font-family: verdana; padding: 10px; border-radius: 10px; font-size: 12px; text-align: center;"&gt;

&lt;h2&gt;Checkout this font color. Loaded from 'crunchify.css' file under '/WebContent/resources/' folder&lt;/h2&gt;

&lt;div id="crunchifyMessage"&gt;&lt;/div&gt;

&lt;br&gt; Spring MCV Tutorial by &lt;a href="http://crunchify.com"&gt;Crunchify&lt;/a&gt;.

&lt;br&gt; &lt;br&gt; Click &lt;a

href="http://crunchify.com/category/java-web-development-tutorial/"

target="_blank"&gt;here&lt;/a&gt; for all Java and &lt;a

href='http://crunchify.com/category/spring-mvc/' target='_blank'&gt;here&lt;/a&gt;

for all Spring MVC, Web Development examples.&lt;br&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

Here <code>spring:url tag</code> based on the JSTL c:url tag. This variant is fully backwards compatible with the standard tag. Enhancements include support for URL template parameters.

Modify <code>crunchify-servlet.xml</code> file. Add below two lines at the bottom of file before <code>&lt;/beans&gt;</code> tag.

&lt;mvc:resources mapping="/resources/**" location="/resources/" /&gt;

&lt;mvc:annotation-driven /&gt;

Here is a complete file content:

crunchify-servlet.xml

&lt;beans xmlns="http://www.springframework.org/schema/beans"

xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="

        http://www.springframework.org/schema/beans    

        http://www.springframework.org/schema/beans/spring-beans.xsd

        http://www.springframework.org/schema/mvc

        http://www.springframework.org/schema/mvc/spring-mvc.xsd

        http://www.springframework.org/schema/context

        http://www.springframework.org/schema/context/spring-context.xsd"&gt;

&lt;context:component-scan base-package="com.crunchify.controller" /&gt;

&lt;bean id="viewResolver"

class="org.springframework.web.servlet.view.UrlBasedViewResolver"&gt;

&lt;property name="viewClass"

value="org.springframework.web.servlet.view.JstlView" /&gt;

&lt;property name="prefix" value="/WEB-INF/jsp/" /&gt;

&lt;property name="suffix" value=".jsp" /&gt;

&lt;/bean&gt;

&lt;/beans&gt;

<code>mvc:resources</code> configures a handler for serving <code>static resources</code> such as images, js, and, css files with cache headers optimized for efficient loading in a web browser. Allows resources to be served out of any path that is reachable via Spring’s Resource handling.

Perform <code>Project -&gt; Clean</code>

Visit URL: <code>http://localhost:8080/CrunchifySpringMVCTutorial/welcome.jsp</code>

Check out the result

<a target="_blank" href="http://cdn3.crunchify.com/wp-content/uploads/2015/10/Spring-MVC-tutorial-with-JS-and-CSS-loaded-dynamically.png"></a>

Have anything to add to this article? Please chime in and join the conversion.

<a target="_blank" href="http://crunchify.com/spring-mvc-how-to-declare-a-bean-in-spring-application/">Spring MVC: How to Declare a Bean in Spring Application?</a>

<a target="_blank" href="http://crunchify.com/working-on-spring-mvc-project-how-to-report-list-of-all-loaded-spring-beans-during-startup/">Working on Spring MVC Project? How to Report List of All Loaded Spring Beans during Startup?</a>

<a target="_blank" href="http://crunchify.com/read-config-properties-value-using-spring-singleton-scope-in-your-java-enterprise-application/">Read config.properties value using Spring ‘singleton’ Scope in your Java Enterprise Application</a>

<a target="_blank" href="http://crunchify.com/simplest-spring-mvc-hello-world-example-tutorial-spring-model-view-controller-tips/">Simplest Spring MVC Hello World Example / Tutorial – Spring Model – View – Controller Tips</a>

<a target="_blank" href="http://crunchify.com/spring-mvc-4-1-x-simple-way-to-send-an-email-using-org-springframework-mail-javamail-javamailsenderimpl/">Spring MVC 4.1.X – Simple way to Send an Email using org.springframework.mail. javamail.JavaMailSenderImpl</a>

<a target="_blank" href="http://crunchify.com/how-to-import-all-spring-mvc-dependencies-to-your-maven-project/">How to import all Spring MVC Dependencies to your Maven Project?</a>

<a target="_blank" href="http://crunchify.com/cannot-be-read-or-is-not-a-valid-zip-file-how-to-fix-maven-build-path-error-with-corrupted-jar-file/">Cannot be Read or is Not a Valid ZIP file – How to fix Maven Build Path Error with corrupted .jar file</a>

<a target="_blank" href="http://crunchify.com/how-to-use-ajax-jquery-in-spring-web-mvc-jsp-example/">How to use AJAX, jQuery in Spring Web MVC (.jsp) – Example</a>

<a target="_blank" href="http://crunchify.com/spring-mvc-how-to-access-modelmap-values-in-a-jsp/">Spring MVC: How to Access ModelMap Values in a JSP?</a>

<a target="_blank" href="http://crunchify.com/how-to-update-sparkline-graph-every-3-seconds-in-spring-mvc-realtime-update/">How to Update Sparkline Graph Every 3 Seconds in Spring MVC (Realtime Update)</a>

Be sure to subscribe to the Crunchify newsletter and get regular updates about awesome posts just like this one and more! Join more than 13000 subscribers!

Enter your email address...