Spring MVC 4.2.2 中最好的集成静态资源的方法

2015-10-25 1804

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Spring MVC 4.2.2 中最好的集成静态资源的方法太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句：太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

Spring MVC 4.2.2 中最好的集成静态资源的方法

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

Spring MVC 4.2.2 – Best way to Add/Integrate JS, CSS and images into JSP file using ‘mvc:resources mapping’

Short link:

Last Updated on October 22nd, 2015 by Crunchify 2 Comments

As you could see Sayan and Arturo asked few questions while working on Spring MVC tutorial on how to add JavaScript/.js and CSS/.css file to their project.

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?

In this tutorial we will go over all detailed steps on how to include both into your Spring MVC java project simplest way.

Let’s get started:

Below is an updated project structure for your reference.

Step-1

Please go ahead and implement your HelloWorld Spring MVC project by following all detailed steps. Make sure you have it working correctly.

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

Step-2

Create resources folder under WebContent folder.

Step-3

Create crunchify.js file under resources folder.

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

$ ( '#crunchifyMessage' ) . html ( "<h4>This message is coming from 'crunchify.js' file...</h4>" )

} ) ;

Step-4

Create crunchify.css file under resources folder.

h2 {

color : #dd7127;

}

h4 {

color : #DD2727;

}

Step-5

Modify welcome.jsp file with below content. Please checkout highlighted lines.

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

< ! DOCTYPE html >

< html >

< head >

< ! -- let 's add tag srping:url -->

<spring:url value="/resources/crunchify.css" var="crunchifyCSS" />

<spring:url value="/resources/crunchify.js" var="crunchifyJS" />

<title>Spring MVC Tutorial by Crunchify - Hello World Spring MVC Example</title>

body {

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

}

</style>

</head>

<body>${message}

<br>

<div

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

<h2>Checkout this font color. Loaded from ' crunchify . css ' file under ' / WebContent / resources / ' folder</h2>

<br> Spring MCV Tutorial by <a href="http://crunchify.com">Crunchify</a>.

<br> <br> Click <a

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

target="_blank">here</a> for all Java and <a

href=' http : //crunchify.com/category/spring-mvc/' target='_blank'>here</a>

for all Spring MVC , Web Development examples . < br >

< / div >

< / body >

< / html >

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

Step-6

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

1 2	< mvc : resources mapping = "/resources/**" location = "/resources/" / > < mvc : annotation - driven / >

Here is a complete file content:

< 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" >

< context : component - scan base - package = "com.crunchify.controller" / >

< bean id = "viewResolver"

class = "org.springframework.web.servlet.view.UrlBasedViewResolver" >

< property name = "viewClass"

value = "org.springframework.web.servlet.view.JstlView" / >

< property name = "prefix" value = "/WEB-INF/jsp/" / >

< property name = "suffix" value = ".jsp" / >

< / bean >

< mvc : resources mapping = "/resources/**" location = "/resources/" / >

< mvc : annotation - driven / >

< / beans >

mvc:resources configures a handler for serving static resources 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.

Step-7

Perform Project -> Clean
Re-deploy CrunchifySpringMVCTutorial application on Tomcat web server
Visit URL: http://localhost:8080/CrunchifySpringMVCTutorial/welcome.jsp
Check out the result

Before

After

Filed Under: Apache Tomcat Examples, Java Script, jQuery, JSON, My Collection, Spring MVC Tutorials, Tips n Tricks Tagged: Latest Spring MVC, Load JS and CSS spring mvc, Load static files JS and CSS in Spring MVC, MVC Resource Mapping, Spring MVC 4.2.2, Spring MVC 4.2.2 Tutorial, Spring MVC Hello World Example, Spring MVC resource mapping, Spring MVC tutorial, spring:url Tag

About Crunchify

Hello & Good Day from greater New York. Crunchify is founded by App Shah. He is a professional blogger & loves Web development hence Crunchify.com is his publication with more than 10 millions pageviews per month, that covers all aspects and tactics on Java, WordPress, J2EE (Enterprise Java), Spring MVC, Github, etc Technologies.

Spring MVC 4.2.2 中最好的集成静态资源的方法