Code ví dụ Spring Boot với Bootstrap, static resource (css/js)

Home » Spring » Code ví dụ Spring Boot với Bootstrap, static resource (css/js)

(Xem lại: Spring MVC Static Resources, Bootstrap)

Các công nghệ sử dụng:

Spring Boot 2.0.0 RC2
Maven
JDK 1.8
Eclipse + Spring Tool Suite

Tạo Spring Boot Project:

Ở đây mình dùng template engine là Thymleaf để hiển thị view .html

Kết quả:

Khai báo bootstrap:

Bình thường chúng ta sẽ download thư viện bootstrap và khai báo nó, ở đây mình sử dụng 1 cách khác đó là sử dụng webjars, ta sẽ khai báo thư viện bootstrap trong file pom.xml

<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.0.0</version>
</dependency>

Sau khi khai báo thư viện, maven sẽ tự động tải và add thư viện bootstrap vào project (Bootstrap yêu cầu jquery nên lúc add nó sẽ tự động thêm jquery tương ứng)

Tạo một file common.css trong folder src/main/resources/static/css

h2 {
  color:red;
}

Khai báo, mapping file css vừa tạo và thư viện bootstrap để sử dụng chúng trên file view:

package stackjava.com.sbbootstrap.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MvcConfig implements WebMvcConfigurer {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/bootstrap/**")
        .addResourceLocations("classpath:/META-INF/resources/webjars/bootstrap/4.0.0/");

    registry.addResourceHandler("/resources/jquery/**")
        .addResourceLocations("classpath:/META-INF/resources/webjars/jquery/3.0.0/");

    registry.addResourceHandler("/resources/css/**").addResourceLocations("classpath:/static/css/");
  }
}

File Controller:

package stackjava.com.sbbootstrap.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class BaseController {

  @RequestMapping("/")
  public String index() {
    return "index";
  }
}

File view:

<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring Boot + Bootstrap</title>

<link th:href="@{/resources/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<script th:src="@{/resources/jquery/jquery.min.js}"></script>
<script th:src="@{/resources/bootstrap/js/bootstrap.js}"></script>

<link th:href="@{/resources/css/common.css}" rel="stylesheet"/>

</head>

<body>
  <br/>
  <h2>Spring Boot + Twitter Bootstrap</h2>
  <br/>
  
  <div style="width: 50%">
    <div class="alert alert-success alert-dismissable">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
       <strong>Success!</strong>
    </div>
    <div class="alert alert-info alert-dismissable">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
       <strong>Info!</strong>
    </div>
    <div class="alert alert-warning alert-dismissable">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
       <strong>Warning!</strong>
    </div>
    <div class="alert alert-danger alert-dismissable">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
       <strong>Danger!</strong>
    </div>
  </div>
  
</body>

</html>