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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- 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>
<!-- 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>
<!-- 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を指定します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"
th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"
th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
th:src="@{/webjars/jquery/jquery.min.js}"
th:src="@{/webjars/jquery/jquery.min.js}"
th:src="@{/webjars/jquery/jquery.min.js}"

サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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)
サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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";
}
}
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"; } }
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.動作確認

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
以下のURLでアクセスすると「jqueryboot」フォルダ配下のindex.htmlが表示されます。
http://127.0.0.1:8080/jqueryboot
以下のURLでアクセスすると「jqueryboot」フォルダ配下のindex.htmlが表示されます。 http://127.0.0.1:8080/jqueryboot
以下のURLでアクセスすると「jqueryboot」フォルダ配下のindex.htmlが表示されます。
http://127.0.0.1:8080/jqueryboot

 

Spring Boot

Posted by arkgame