Try using Spring Boot with VS Code

1. Introduction

Extension installation

Install the following extensions. Since Java is used, Java extension functions are collected Java Extension Pack and Spring Boot extensions are collected. Include the Spring Boot Extension Pack (https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack). Disable unnecessary extensions as needed.

Creating a project

By installing Spring Boot Tools, you can use Spring Boot commands in VS Code.

--Execute Spring Initializr: Generate a Maven Project in the command palette (create the project interactively)

--Select Java --Enter the package name (eg com.example) --Enter the project name --Select Spring Boot version --Select a dependency - web - thymeleaf --Select the save destination of the project

--Directory structure

Directory structure


  src/
    └ main/
    │  ├ java/
    │  │  └ com/
    │  │     └ example/
    │  │        └ {Application name}/
    │  │          └ DemoApplication.java
    │  └ resource/
    │     ├ static/
    │     └ templates/
    └ test/
  target/
  .gitignore
  mvnw
  mvnw.cmd
  pom.xml

Application execution

--Create IndexController.java in the src / main / java / com / example / {application name} / controller directory

IndexController.java


  package com.example.{Application name}.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";
      }
  }

--Create index.html in the src / main / resources / templates directory

index.html


  <!DOCTYPE html>
  <html>
  <head>
      <title>home</title>
  </head>
  <body>
      <div>
          <p>content</p>
      </div>
  </body>
  </html>

--Select `Debug> Start Debug``

--Select java in the environment selection (first time only) --launch.json is generated (first time only) --Again, select Debug> Start Debugging (first time only)

--Access http: // localhost: 8080 /

2. Creating a header / footer

Add dependency

Add thymeleaf-layout-dialect to the dependency to use the Layout Dialect function of thymeleaf, which is the template engine of Spring Boot. Also add bootstrap and jquery.

--Added the following contents to 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>

Create template

Implementation

--Create 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>

--Create 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="/">Spring Boot practice</a>
              </div>
              <div class="collapse navbar-collapse" id="navigation">
                  <p class="navbar-text navbar-right">Login</p>
              </div>
          </div>
      </nav>
  </body>
  </html>

--Create 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>
  

--Modify src / main / resources / templates / index.html as follows.

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>home</title>
  </head>
  <body>
      <div layout:fragment="content">
          <p>content</p>
      </div>
  </body>
  </html>

Commentary

By entering the following in layouts / header.html,

header.html(part)


<div layout:fragment="header"><!--Contents--></div>

The following tags entered in layout.html are replaced.

layout.html(part)


<div layout:replace="~{layouts/header::header}"></div>

By writing the following on the individual page side (index.html) that reads the layout, the description of layouts / layout.html can be reflected.

index.html(part)


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

Recommended Posts

Try using Spring Boot with VS Code
Spring Boot programming with VS Code
Try using Spring Boot Security
Create Spring Boot environment with Windows + VS Code
Try using OpenID Connect with Keycloak (Spring Boot application)
Try hitting the zip code search API with Spring Boot
Asynchronous processing with Spring Boot using @Async
Part 1: Try using OAuth 2.0 Login supported by Spring Security 5 with Spring Boot
Lombok with VS Code
Download with Spring Boot
Try using Spring JDBC
Run a Spring Boot project in VS Code
Try LDAP authentication with Spring Security (Spring Boot) + OpenLDAP
Using Gradle with VS Code, build Java → run
Try to automate migration with Spring Boot Flyway
Try debugging a Java program with VS Code
Introduction to Java development environment & Spring Boot application created with VS Code
Try Spring Boot from 0 to 100.
Generate barcode with Spring Boot
Hello World with Spring Boot
[Note] Configuration file when using Logback with Spring Boot
Implement GraphQL with Spring Boot
Try using GloVe with Deeplearning4j
Docker management with VS Code
Try using view_component with rails
Get started with Spring boot
[JUnit 5 compatible] Write a test using JUnit 5 with Spring boot 2.2, 2.3
Hello World with Spring Boot!
Run LIFF with Spring Boot
SNS login with Spring Boot
Hello World with VS Code!
File upload with Spring Boot
Spring Boot starting with copy
Try Dependency Inversion Principle with Multiple Spring Boot Projects
Using Mapper with Java (Spring)
Spring Boot starting with Docker
Hello World with Spring Boot
Set cookies with Spring Boot
Use Spring JDBC with Spring Boot
Add module with Spring Boot
Getting Started with Spring Boot
Try Spring Boot on Mac
Create microservices with Spring Boot
Send email with spring boot
Beginners create Spring Tools Suite environment with VS Code
Try to work with Keycloak using Spring Security SAML (Spring 5)
From creating a Spring Boot project to running an application with VS Code
Try debugging natural language processing on Windows. with VS Code
I tried to get started with Swagger using Spring Boot
Use Basic Authentication with Spring Boot
Spring Boot application code review points
gRPC on Spring Boot with grpc-spring-boot-starter
Create an app with Spring Boot 2
Hot deploy with Spring Boot development
Database linkage with doma2 (Spring boot)
Spring Boot Tutorial Using Spring Security Authentication
Write test code in Spring Boot
Until "Hello World" with Spring Boot
Inquiry application creation with Spring Boot
Java --Jersey Framework vs Spring Boot
Try using Redis with Java (jar)