Spring MVC - Cấu Hình Static Resources: CSS/Javascript/Image

Một phần không thể thiếu trong bất cứ một website nào, đó chính là CSS và Javascript. Trong bài này mình sẽ hướng dẫn các bạn cấu hình cho một project Spring MVC có thể load được static resources như CSS, Javascript, image,....

Trong bài này mình sẽ dùng:

Spring 4.1.6.RELEASE
Maven 3
JDK 1.8
IDE: Eclipse for Java EE (chơi bản mới nhất ấy, cho nó máu :))
Server Tomcat 8

Bắt đầu thôi!

1. Tạo project mới

Mình sẽ dùng lại project của bài trước. Bạn có thể tải tại đây.

2. Cấu hình ResourceHandlers

Mở file cấu hình ứng dụng ApplicationConfiguration.java, thêm vào method addResourceHandlers


package com.nmt.springmvc.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.nmt.springmvc")
public class ApplicationConfiguration extends WebMvcConfigurerAdapter{

 @Bean
    public ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setViewClass(JstlView.class);
        viewResolver.setPrefix("/WEB-INF/views/");
        viewResolver.setSuffix(".jsp");
        return viewResolver;
    }
 
 /*
     * Configure ResourceHandlers to serve static resources like CSS/ Javascript etc...
     *
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("/static/");
    }
}

Ở đây ta ApplicationConfiguration kế thừa WebMvcConfigurerAdapter, sau đó override method addResourceHandlers để cấu hình static resource. Cấu hình trên có nghĩa là: tất cà những request có đường dẫn /static/** (addResourceHandler) sẽ được tìm trong thư mục static (addResourceLocations).

Cấu hình này tương đương nếu dùng XML như sau:

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

Do đó, hãy thêm một thư mục tên static vào thư mục webapp. Tạo một thư mục css để chứa tất cả các CSS file của ứng dụng. Ở đây, mình tạo file tên style.css trong thư mục css mới tạo.

Nội dung đơn giản như sau:


 .red-text {
  color: red;
 }
 .blue-text {
  color: blue;
 }

3. Update JSP

Mở file welcome.jsp, thêm thẻ link khai báo css với đường dẫn trỏ tới file style.css ở trên. Và dùng 2 css class strong style.css để "trang trí" trang này.


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World - Spring MVC</title>
<link href="<c:url value='/static/css/style.css' />" rel="stylesheet"></link>
</head>
<body>
 <p class="red-text">This is red text line.</p>
 <p class="blue-text">This is blue text line.</p>
</body>
</html>

4. Start Tomcat và xem kết quả

Cuối cùng, start Tomcat server lên. Và kết quả là css của ta đã được apply vào trang welcome.jsp.

Ngoài ra, bạn có thể dùng image và javascript tương tự như css ở trên.
Bài viết hôm nay, kết thúc ở đây. Hẹn gặp lại bài sau.

Sourcecode: Cập nhật sau... :)

nmT - Nguyễn Minh Tiến

Kiến thức iTech