SpringBoot2.6にjqueryとbootstrapを使用する

2022年2月9日

環境
Windows10 64bit
Spring Boot 2.6.3
Spring Tool Suite 4
JavaSE 11
Thymeleaf 3
Bootstrap 5.1.3

使用例
1.pom.xmlにBootstrapのライブラリを追記します。

<!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
<dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>3.6.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
<dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>5.1.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator-core -->
<dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-locator-core</artifactId>
</dependency>

2.ライブラリを更新します
プロジェクトを右クリックし、「Maven(M)->「プロジェクトの更新(U)」->「OK」をクリックします。

3.bootstrapとjqueryを使用するhtmlファイル(templates\jqueryboot\index.html)
th:hrefでbootstrapのcssを指定します。

th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"

th:srcでjqueryとbootstrapのjsファイルを指定します。

th:src="@{/webjars/jquery/jquery.min.js}"

サンプルコード

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>jquery bootstrapのサンプル</title>
<!-- th:hrefでbootstrapのcssを指定 -->
<link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"
      rel="stylesheet">
</head>
<body>
      <div id="cft">jqueryとbootstrapを使用</div>
      <button type="button" id="show" class="btn btn-primary">検証</button>
      
      <!-- th:srcでjqueryとbootstrapのファイルを指定します -->
      <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
      <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
      <script>
            $("#show").click(function () {
                  $("#cft").html("webjarsを使用する");
            });
      </script>
</body>
</html>

4.コントローラのクラスの定義(BootJqController.java)
サンプルコード

package com.example.demo;

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

@Controller
public class BootJqController {

      @GetMapping("/jqueryboot")
      public String funA() {

            return "jqueryboot/index";
      }

}

5.動作確認

以下のURLでアクセスすると「jqueryboot」フォルダ配下のindex.htmlが表示されます。
http://127.0.0.1:8080/jqueryboot

Spring Boot

Posted by arkgame