14
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

SpringBootをVSCodeで使ってみる

導入

拡張機能のインストール

以下の拡張機能をインストールします。
Javaを使うのでJava系の拡張機能がまとまっているJava Extension Packと、SpringBootの拡張機能がまとまっているSpring Boot Extension Packを入れます。必要に応じて不要な拡張機能は無効にしてください。

  • Java Extension Pack
    • Language Support for Java
    • Debugger for Java
    • Java Test Runner
    • Maven for Java
    • Java Dependency Viewer
    • Visual Studio IntelliCode
  • Spring Boot Extension Pack
    • Spring Boot Tools
    • Concourse CI Pipeline Editor
    • Cloudfoundry Manifest YML Support
    • Spring Intializr Java Support
    • Spring Boot Dashboard

プロジェクトの作成

Spring Boot Tools を入れたことで、VSCodeでSpringBootのコマンドが使えるようになっています。

コマンド

コマンドパレットでSpring Initializr: Generate a Maven Projectを実行(対話式でプロジェクトを作成していきます)

  • Javaを選択
  • パッケージ名を入力(例.com.example)
  • プロジェクト名を入力
  • SpringBootのバージョンを選択
  • 依存関係を選択
    • web
    • thymeleaf
  • プロジェクトの保存先を選択

ディレクトリ構成

ディレクトリ構成
  src/
    └ main/
    │  ├ java/
    │  │  └ com/
    │  │     └ example/
    │  │        └ {アプリケーション名}/
    │  │          └ DemoApplication.java
    │  └ resource/
    │     ├ static/
    │     └ templates/
    └ test/
  target/
  .gitignore
  mvnw
  mvnw.cmd
  pom.xml

アプリケーション実行

src/main/java/com/example/{アプリケーション名}/controllerディレクトリにIndexController.java を作成

IndexController.java
  package com.example.{アプリケーション名}.controller;

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

  @Controller
  public class IndexController {

      @RequestMapping("/")
      public String index(Model model) {
          model.addAttribute("msg", "Hello");
          return "index";
      }
  }

src/main/resources/templatesディレクトリにindex.htmlを作成

index.html
  <!DOCTYPE html>
  <html>
  <head>
      <title>ホーム</title>
  </head>
  <body>
      <div>
          <p>コンテンツ</p>
      </div>
  </body>
  </html>

デバッグ > デバッグの開始 を選択

  • 環境の選択でjavaを選択(初回のみ)
  • launch.jsonが生成される(初回のみ)
  • 再度、デバッグ > デバッグの開始を選択(初回のみ)

http://localhost:8080/にアクセスする

ヘッダー・フッターの作成

依存関係の追加

SpringBootのテンプレートエンジンであるthymeleafのLayout Dialect機能を使うために依存関係にthymeleaf-layout-dialectを追加する。ついでにbootstrapjqueryも追加する。

  • pom.xmlに以下の内容を追加
  <dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
  </dependency>

  <dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.7</version>
  </dependency>

  <dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>1.12.4</version>
  </dependency>

テンプレートを作成

実装

  • src/main/resources/template/layouts/layout.htmlを作成する。
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>
      <title layout:title-pattern="$CONTENT_TITLE | $LAYOUT_TITLE">Thymeleaf de layout</title>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" media="all" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
      <link rel="stylesheet" media="all" th:href="@{/css/style.css}" />
  </head>
  <body>
      <div layout:replace="~{layouts/header::header}"></div>

      <div id="content" class="clearfix">
          <div class="container">
              <div layout:fragment="content" th:remove="tag"></div>
          </div>
      </div>
      <div layout:replace="~{layouts/footer::footer}"></div>

      <!-- scripts -->
      <script type="text/javascript" th:src="@{/webjars/jquery/1.12.4/jquery.min.js}"></script>
      <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
  </body>
  </html>

src/main/resources/template/layouts/header.htmlを作成する。

header.html
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <body>
      <nav class="navbar navbar-default" layout:fragment="header">
          <div class="container-fluid">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="/">SpringBoot練習</a>
              </div>
              <div class="collapse navbar-collapse" id="navigation">
                  <p class="navbar-text navbar-right">ログイン中</p>
              </div>
          </div>
      </nav>
  </body>
  </html>

src/main/resources/template/layouts/footer.htmlを作成する。

footer.html
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <body>
      <div id="footer" layout:fragment="footer">
          <footer class="text-center">
              <small class="text-muted">Copyright(C) koukibuu3, All rights reserved.</small>
          </footer>
      </div>
  </body>
  </html>

src/main/resources/templates/index.htmlを以下のように修正する。

index.html
  <!DOCTYPE html>
  <html
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">

  <head>
      <title>ホーム</title>
  </head>
  <body>
      <div layout:fragment="content">
          <p>コンテンツ</p>
      </div>
  </body>
  </html>

解説

layouts/header.htmlに以下を記入することで、

header.html(一部)
<div layout:fragment="header"><!-- 内容 --></div>

layout.htmlに記入した以下のタグが置き換わる。

layout.html(一部)
<div layout:replace="~{layouts/header::header}"></div>

th:replaceの代わりにth:includeを使用することで、layout.htmlのタグの内部を書き換える。

レイアウトを読み込む個別ページ側(index.html)で以下の記述をすることで、layouts/layout.htmlの記述を反映することができる。

index.html(一部)
<html
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layouts/layout}">

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
14
Help us understand the problem. What are the problem?