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

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

Sometime back I’ve written a tutorial on Hello World Spring MVC. Spring MVC web is a model-view-control framework and you can find more information here.

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.

crunchify.js

1

2

3

4

5

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.

crunchify.css

1

2

3

4

5

6

h2{

color:#dd7127;

}

h4{

color:#DD2727;

}

Step-5

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

welcome.jsp

1

2

3

4

5

6

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

<%@ 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" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link href="{crunchifyCSS}" rel="stylesheet" />

<script src="${crunchifyJS}"></script>

<!-- Finish adding tags -->

 

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

<style type="text/css">

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>

 

<div id="crunchifyMessage"></div>

 

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

crunchify-servlet.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<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

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

Before

After

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

SHARE ON

TwitterFacebookGoogle+BufferPin ItFollow @Crunchify

Some more articles you might also be interested in …

  1. Spring MVC: How to Declare a Bean in Spring Application?
  2. Working on Spring MVC Project? How to Report List of All Loaded Spring Beans during Startup?
  3. Read config.properties value using Spring ‘singleton’ Scope in your Java Enterprise Application
  4. Simplest Spring MVC Hello World Example / Tutorial – Spring Model – View – Controller Tips
  5. Spring MVC 4.1.X – Simple way to Send an Email using org.springframework.mail. javamail.JavaMailSenderImpl
  6. How to import all Spring MVC Dependencies to your Maven Project?
  7. Cannot be Read or is Not a Valid ZIP file – How to fix Maven Build Path Error with corrupted .jar file
  8. How to use AJAX, jQuery in Spring Web MVC (.jsp) – Example
  9. Spring MVC: How to Access ModelMap Values in a JSP?
  10. How to Update Sparkline Graph Every 3 Seconds in Spring MVC (Realtime Update)

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

Enjoyed this post?

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


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.

时间： 2024-03-13 12:33:07

Spring MVC 4.2.2 中最好的集成静态资源的方法的相关文章

spring mvc aop获取controller中的方法中的参数名称

问题描述 spring mvc aop获取controller中的方法中的参数名称 //配置切入点,该方法无方法体,主要为方便同类中其他方法使用此处配置的切入点 //"execution(* com.nong.aop.*.controller..*.*(..))" /*@Pointcut("execution(* com.nong.aop.*.controller.*(..))") public void aspect(){} // 配置前置通知,使用在方法aspe

Windows中快速访问分散共享资源的方法

一般来说,通过网上邻居窗口或"\\主机名\文件夹的共享名"这样的方式,就能轻易访问到某台主机上的指定共享文件夹资源.不过,倘若自己想要访问的共享资源分布在不同的计算机中,或者分布在不同的共享文件夹中的话,那么此时再按照前面的方法来访问共享资源的话,访问效率肯定会大打折扣.那有没有办法对那些分散在各个地方上的共享资源进行快速访问呢?答案是肯定的,下面就是笔者总结出来的两种快速访问分散共享资源的妙招! 1.DFS链接法 所谓DFS链接法,其实就是利用Windows 2003操作系统内置的分

Spring MVC 专题

  Spring静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取.在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,从这里可以看出这里的静态资源路径都是在classpath中(也就是在项目路径下指定的这几个文件夹) 试想这样一种情况:一个网站有文件上传文件的功能,如果被上传的文件放在上述的那些

Spring MVC 页面渲染( render view )

一.理解view解析过程 1.1 从逻辑view到物理view 在Spring MVC 中,controllers不会负责具体的页面渲染,它仅仅是调用业务逻辑并返回model数据给view层,至于view层具体怎么用HTML展现,由专门的view层具体负责,这就是MVC模式,业务层与展示层是松耦合的.那么,Spring MVC是如何解耦合请求处理逻辑和页面渲染的呢? 我们在Spring MVC配置介绍文章中已经知道,controller在处理外业务逻辑之后会返回一个逻辑view的字符串,那么Sp

《精通Spring MVC 4》——1.6　幕后的Spring Boot

1.6 幕后的Spring Boot 如果你之前搭建过Spring MVC应用,那么可能已经习惯于编写相关的XML文件或Java注解配置类. 一般来讲,初始的步骤如下所示: 1．初始化Spring MVC的DispatcherServlet: 2．搭建转码过滤器,保证客户端请求进行正确地转码: 3．搭建视图解析器(view resolver),告诉Spring去哪里查找视图,以及它们是使用哪种方言编写的(JSP.Thymeleaf模板等): 4．配置静态资源的位置(CSS.JS): 5．配置所支

Spring MVC 挺直腰板儿说：依赖注入，我自个儿来！

研究 Spring MVC 将请求分发到 Spring 依赖注入的类实例 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 一上午时间,碰了 N 个钉子,不断地把钉子拨掉,记录一下选择的工具和方法

Spring MVC配置介绍

一.Spring MVC 纵览 Spring MVC就是Spring框架对MVC设计模式的实现,通过Spring MVC ,我们可以快速的构建灵活.松耦合的web服务.再具体介绍Spring MVC 之前,我们先看一下它的请求处理过程: 1.1 springMVC 的请求过程 1. 请求会首先发送到DispatchServlet,这是spring的前置Servlet,它会接收请求并转发给spring的MVC controller,也就是业务controller 2. DispatchServle

spring mvc（2）：请求地址映射（@RequestMapping）

spring mvc(2):请求地址映射(@RequestMapping) Posted on 2014-08-15 21:35 Lychie Fan 阅读(3974) 评论(1)  编辑  收藏 所属分类: spring mvc  @RequestMapping 参数说明 value定义处理方法的请求的 URL 地址.method定义处理方法的 http method 类型,如 GET.POST 等.params定义请求的 URL 中必须包含的参数.headers定义请求中 Request H

Crunchify 有关 Spring MVC 的方方面面汇总 - 已更新第三步

Crunchify 有关 Spring MVC 的方方面面汇总 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 从 Crunchify 获得到一篇文章,终于搞定 Spring MVC 4.2.2