Entwicklungsumgebung

Java11
Spring Boot2
H2
MyBatis3
Thymeleaf3
JQuery
Bootstrap
Intellij IDEA

Aufbau einer Entwicklungsumgebung

Die folgenden Elemente müssen im Voraus installiert werden.
- Java11 --IDE (Hier wird die Erklärung in Intellij gegeben. Andere IDEs sind ebenfalls möglich.)

Ein Projekt erstellen

Gehen Sie von Intellij zu "Datei" → "Neu" → "Projekt" und wählen Sie "Spring Initilizr".

--Wählen Sie Java 11. (Vielleicht ist Java 8 in Ordnung)

--Überprüfen Sie DevTools, Web, Thymeleaf, H2, MyBatis.

--Geben Sie den Projektnamen ein und Sie sind fertig.

Hot Deploy-Einstellungen 1/2

Um die Entwicklungseffizienz zu verbessern, legen Sie eine Hot-Bereitstellung fest, die automatisch erstellt wird, wenn die Quelle geändert wird.
Wenn es größere Änderungen gibt oder die Änderungen nicht übernommen werden, sollten Sie den Server stoppen und starten.
Aktivieren Sie in den Intellij-Einstellungen unter "Erstellen, Ausführen, Bereitstellen" → "Compiler" die Option "Projekt automatisch erstellen".

Hot Deploy-Einstellungen 2/2

--Geben Sie "Strg + Umschalt + a" → "Registrierung" ein und klicken Sie auf "Registrierung ...". (Wenn Intellij nicht ins Japanische übersetzt ist, geben Sie "Registrierung" ein und klicken Sie auf "Registrierung ...".)

--compiler. ... .running Check ☑.

Ändern Sie pom.xml

Wenn Sie die Layoutfunktion von tymeleaf verwenden möchten, geben Sie "thymeleaf-layout-dialect" in " </ dependencies>" von pom.xml ein, wie unten gezeigt. (Hier gehen wir davon aus, dass es enthalten sein wird.)
Schließen Sie Bootstrap und JQuery ein, um das Erscheinungsbild Ihres Designs zu verbessern.
Klicken Sie mit der rechten Maustaste auf pom.xml → Erneut importieren.

`pom.xml`


    <dependency>
      <groupId>nz.net.ultraq.thymeleaf</groupId>
      <artifactId>thymeleaf-layout-dialect</artifactId>
      <version>2.3.0</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>1.11.1</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>3.3.7-1</version>
    </dependency>

Erstellen Sie schema.sql, data.sql

Wenn Sie schema.sql und data.sql erstellen, werden die Testdaten beim Start der Projektausführung automatisch in die Datenbank eingegeben. --Erstellen Sie unter dem Projektnamen / src / main / resources.

`schema.sql`


CREATE TABLE IF NOT EXISTS user (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name varchar (50) NOT NULL
);

`data.sql`


INSERT INTO user (name) VALUES ('tanaka');
INSERT INTO user (name) VALUES ('suzuki');
INSERT INTO user (name) VALUES ('sato');

Entitätserstellung

--Erstellen Sie ein Entitätspaket und erstellen Sie eine Benutzerklasse darunter. --Erstellen Sie eine Klasse für Benutzerdaten. Für die Verwendung von MyBatis sind keine Anmerkungen erforderlich.

Fügen Sie dem Namen die erforderliche Validierung hinzu.

`java:com.example.demo.entity.User.java`


package com.example.demo.entity;


import org.hibernate.validator.constraints.NotBlank;

public class User {

  private int id;

  @NotBlank(message = "{require_check}")
  private String name;

  public int getId() {
    return id;
  }

  public void setId(int id) {
    this.id = id;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

}

Erstellen Sie mapper.java, mapper.xml

--Erstellen Sie ein Mapper-Paket und erstellen Sie eine UserMapper-Oberfläche darunter.

Fügen Sie der Anmerkung "@ Mapper" hinzu. Wenn dies unverändert bleibt, kann Autowired nicht ausgeführt werden. Fügen Sie daher auch "@ Repository" hinzu.

`java:src/main/java/com.example.demo.mapper.UserMapper.java`


package com.example.demo.mapper;

import com.example.demo.entity.User;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

@Repository
@Mapper
public interface UserMapper {

  List<User> selectAll();

  User select(int id);

  int insert(User user);

  int update(User user);

  int delete(int id);
}

Die Zuordnungsdatei in XML wird automatisch gelesen, wenn Sie sie in derselben Verzeichnishierarchie wie Java unter Ressourcen erstellen. --namename: Paketname in (Java) oben --id: Der in (Java) oben angegebene Methodenname --resultType: Rückgabetyp

`src/main/resouces/com/example/demo/mapper/UserMapper`


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.UserMapper">
    <select id="selectAll" resultType="com.example.demo.entity.User">
        select * from user
    </select>
    <select id="select" resultType="com.example.demo.entity.User">
        select * from user where id = #{id}
    </select>
    <insert id="insert">
        insert into user (name) values (#{name})
    </insert>
    <update id="update">
        update user set name = #{name} where id = #{id}
    </update>
    <delete id="delete">
        delete from user where id = #{id}
    </delete>
</mapper>

Controller erstellen

Fügen Sie 7 Aktionen hinzu.

HTTP-Methode	URL	Controller-Methode	Erläuterung
GET	/users	getUsers()	Anzeige des Listenbildschirms
GET	/users/1	getUser()	Bildschirm mit Details anzeigen
GET	/users/new	getUserNew()	Anzeige des neuen Erstellungsbildschirms
POST	/users	postUserCreate()	Fügen Sie die Verarbeitung des neuen Erstellungsbildschirms ein
GET	/users/1/edit	getUserEdit()	Anzeige des Bearbeitungsbildschirms
PUT	/users/1	putUserEdit()	Bildschirmaktualisierungsprozess bearbeiten
DELETE	/users/1	deleteUser()	Prozess löschen

`java:com.example.demo.controller.UserController`


package com.example.demo.controller;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import java.util.List;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/users")
public class UserController {

  private final UserMapper userMapper;

  @Autowired
  public UserController(UserMapper userMapper) {
    this.userMapper = userMapper;
  }

  /**
   *Anzeige des Listenbildschirms
   */
  @GetMapping
  public String getUsers(Model model) {
    List<User> users = userMapper.selectAll();
    model.addAttribute("users", users);
    return "users/list";
  }

  /**
   *Bildschirm mit Details anzeigen
   */
  @GetMapping("{id}")
  public String getUser(@PathVariable int id, Model model) {
    User user = userMapper.select(id);
    model.addAttribute("user", user);
    return "users/show";
  }

  /**
   *Anzeige des neuen Erstellungsbildschirms
   */
  @GetMapping("new")
  public String getUserNew(Model model) {
    User user = new User();
    model.addAttribute("user", user);
    return "users/new";
  }

  /**
   *Fügen Sie die Verarbeitung des neuen Erstellungsbildschirms ein
   */
  @PostMapping
  public String postUserCreate(@ModelAttribute @Valid User user,
      BindingResult bindingResult) {
    if (bindingResult.hasErrors()) {
      return "users/new";
    }
    userMapper.insert(user);
    return "redirect:/users";
  }

  /**
   *Anzeige des Bearbeitungsbildschirms
   */
  @GetMapping("{id}/edit")
  public String getUserEdit(@PathVariable int id, Model model) {
    User user = userMapper.select(id);
    model.addAttribute("user", user);
    return "users/edit";
  }

  /**
   *Bildschirmaktualisierungsprozess bearbeiten
   */
  @PutMapping("{id}")
  public String putUserEdit(@PathVariable int id, @ModelAttribute @Valid User user,
      BindingResult bindingResult) {
    if (bindingResult.hasErrors()) {
      return "users/edit";
    }
    user.setId(id);
    userMapper.update(user);
    return "redirect:/users";
  }

  /**
   *Prozess löschen
   */
  @DeleteMapping("{id}")
  public String deleteUser(@PathVariable int id, Model model) {
    userMapper.delete(id);
    return "redirect:/users";
  }
}

Einstellungen für Validierungsnachrichten (messages.properties, WebConfig.java erstellt)

--Erstellen Sie messages.properties, um Validierungsnachrichten festzulegen.

`src/main/resources/messages.properties`


name=Nutzername
require_check={0}Ist ein erforderlicher Eintrag

Die Magie, die folgende Konfigurations-Java-Datei zu erstellen, um die obige Eigenschaftendatei zu verwenden.

`java:com.example.demo/WebConfig.java`


package com.example.demo;

import org.springframework.context.MessageSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ReloadableResourceBundleMessageSource;
import org.springframework.validation.beanvalidation.LocalValidatorFactoryBean;

@Configuration
public class WebConfig {

  @Bean
  public MessageSource messageSource() {
    ReloadableResourceBundleMessageSource bean = new ReloadableResourceBundleMessageSource();
    bean.setBasename("classpath:messages");
    bean.setDefaultEncoding("UTF-8");
    return bean;
  }

  @Bean
  public LocalValidatorFactoryBean localValidatorFactoryBean() {
    LocalValidatorFactoryBean localValidatorFactoryBean = new LocalValidatorFactoryBean();
    localValidatorFactoryBean.setValidationMessageSource(messageSource());
    return localValidatorFactoryBean;
  }
}

Bildschirmerstellung (Layout, Show, Liste, Neu, Bearbeiten, Formular, CSS-Erstellung)

Gemeinsames Layout (layout.html)

--Inhalte werden in <div layout: fragment =" content "> </ div> angezeigt.

`src/main/resources/templates/commons/layout.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" >

<head>
    <meta charset="UTF-8">
    <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
    <link th:href="@{/css/home.css}" rel="stylesheet"/>
    <title>Home</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">SpringMyBatisDemo</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2 sidebar">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation"><a th:href="@{/users}">Benutzerverwaltung</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-2 main">
            <div layout:fragment="contents">

            </div>
        </div>
    </div>
</div>

</body>
</html>

Listenbildschirm (list.html)

--Layout wird mit layout: decorate =" ~ {commons / layout} " verwendet.

Der von <div layout: fragment =" content "> </ div> eingeschlossene Teil wird im Layout angezeigt.

`src/main/resources/templates/users/list.html`


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

<head>
  <meta charset="UTF-8">
  <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"/>
  <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
  <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
  <link th:href="@{/css/home.css}" rel="stylesheet"/>
  <title>Home</title>
</head>
<body>
<div layout:fragment="contents">
  <div class="page-header">
    <h1>Benutzerliste</h1>
  </div>
  <table class="table table-bordered table-hover table-striped">
    <tr>
      <th class="info col-sm-2">Benutzeridentifikation</th>
      <th class="info col-sm-2">Nutzername</th>
      <th class="info col-sm-2"></th>
    </tr>
    <tr th:each="user:${users}">
      <td th:text="${user.id}"></td>
      <td th:text="${user.name}"></td>
      <td>
        <a class="btn btn-primary" th:href="@{'/users/' + ${user.id}}">Einzelheiten</a>
        <a class="btn btn-primary" th:href="@{'/users/' + ${user.id} + '/edit'}">Bearbeiten</a>
      </td>
    </tr>
  </table>
  <label class="text-info" th:text="${result}">Ergebnisanzeige</label><br/>
  <a class="btn btn-primary" th:href="${'/users/new'}">Erstelle neu</a>
</div>

</body>
</html>

Detailbildschirm (show.html)

--Layout wird mit layout: decorate =" ~ {commons / layout} " verwendet.

Der von <div layout: fragment =" content "> </ div> eingeschlossene Teil wird im Layout angezeigt.
Das allgemeine Formular wird in <div th: include =" users / form :: form_contents "> </ div> angezeigt.

`src/main/resources/templates/users/show.html`


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

<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
<div layout:fragment="contents">
  <div class="row">
    <div class="col-sm-5">
      <div class="page-header">
        <div>
          <h1>Nutzerdetails</h1>
        </div>
          <table class="table table-bordered table-hover">
            <tr>
              <th class="active col-sm-3">Nutzername</th>
              <td>
                <div class="form-group" th:object="${user}">
                  <label class="media-body" th:text="*{name}">
                  </label>
                </div>
              </td>
            </tr>
          </table>
        <form th:action="@{/users}" th:method="get">
          <button class="btn btn-primary btn-lg pull-right" type="submit">Aufführen</button>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Bildschirm bearbeiten (edit.html)

--Layout wird mit layout: decorate =" ~ {commons / layout} " verwendet.

Der von <div layout: fragment =" content "> </ div> eingeschlossene Teil wird im Layout angezeigt.
Das allgemeine Formular wird in <div th: include =" users / form :: form_contents "> </ div> angezeigt.

`src/main/resources/templates/users/edit.html`


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

<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
<div layout:fragment="contents">
  <div class="row">
    <div class="col-sm-5">
      <div class="page-header">
        <div>
          <h1>Nutzerdetails</h1>
        </div>
        <form th:action="@{/users/{id}(id=*{id})}" th:method="put" th:object="${user}">

          <div th:include="users/form :: form_contents"></div>

          <button class="btn btn-primary btn-lg pull-right" type="submit">aktualisieren</button>
        </form>
        <form th:action="@{/users/{id}(id=*{id})}" th:method="delete" th:object="${user}">
          <button class="btn btn-danger btn-lg" type="submit">Löschen</button>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Neuer Bildschirm (new.html)

--Layout wird mit layout: decorate =" ~ {commons / layout} " verwendet.

Der von <div layout: fragment =" content "> </ div> eingeschlossene Teil wird im Layout angezeigt.
Das allgemeine Formular wird in <div th: include =" users / form :: form_contents "> </ div> angezeigt.

`src/main/resources/templates/users/new.html`


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

<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
<div layout:fragment="contents">
  <div class="row">
    <div class="col-sm-5">
      <div class="page-header">
        <div>
          <h1>Neuen Benutzer erstellen</h1>
        </div>
        <form method="post" th:action="@{/users}" th:object="${user}">

          <div th:include="users/form :: form_contents"></div>

          <button class="btn btn-primary btn-lg pull-right" type="submit" name="update">Erstellen</button>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Gemeinsame Form

Das allgemeine Formular befindet sich in <div th: fragment =" form_contents "> </ div> und kann mit <div th: include =" users / form :: form_contents "> </ div> eingebettet werden.

`src/main/resources/templates/users/form.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
<div th:fragment="form_contents">
  <table class="table table-bordered table-hover">
    <tr>
      <th class="active col-sm-3">Nutzername</th>
      <td>
        <div class="form-group" th:classappend="${#fields.hasErrors('name')} ? 'has-error'">
          <label>
            <input type="text" class="form-control" th:field="*{name}"/>
          </label>
          <span class="text-danger" th:if="${#fields.hasErrors('name')}"
                th:errors="*{name}">Name error</span>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

css

`src/main/resources/static/css/home.css`


body {
    padding-top: 50px;
}

.sidebar {
    position: fixed;
    display: block;
    top: 50px;
    bottom: 0;
    background-color: #F4F5F7;
}

.main {
    padding-top: 50px;
    padding-left: 20px;
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
}

.page-header {
    margin-top: 0;
}

Wenn Sie http: // localhost: 8080 / users öffnen, wird der folgende Listenbildschirm angezeigt.
Listenbildschirm

Bearbeitungsbildschirm

Keine Eingabefehleranzeige

Quellcode https://github.com/tseno/SpringMyBatisDemo

--Referenz

[Spring Dismantling New Book](https://www.amazon.co.jp/%E3%80%90%E5%BE%8C%E6%82%94%E3%81%97%E3%81%AA% E3% 81% 84% E3% 81% 9F% E3% 82% 81% E3% 81% AE% E5% 85% A5% E9% 96% 80% E6% 9B% B8% E3% 80% 91Spring% E8% A7% A3% E4% BD% 93% E6% 96% B0% E6% 9B% B8-Boot2% E3% 81% A7% E5% AE% 9F% E9% 9A% 9B% E3% 81% AB% E4% BD% 9C% E3% 81% A3% E3% 81% A6% E5% AD% A6% E3% 81% B9% E3% 82% 8B% EF% BC% 81Spring-Security% E3% 80% 81Spring-JDBC% E3% 80% 81Spring-MyBatis% E3% 81% AA% E3% 81% A9% E5% A4% 9A% E6% 95% B0% E8% A7% A3% E8% AA% AC% EF% BC% 81- ebook / dp / B07H6XLXD7)
Erstellen Sie eine einfache CRUD mit SpringBoot + JPA + Thymeleaf ② ~ Erstellen von Bildschirmen und Funktionen ~

[JAVA] Erstellen Sie eine CRUD-App mit Spring Boot 2 + Thymeleaf + MyBatis

Entwicklungsumgebung

Aufbau einer Entwicklungsumgebung

Ein Projekt erstellen

Hot Deploy-Einstellungen 1/2

Hot Deploy-Einstellungen 2/2

Ändern Sie pom.xml

pom.xml

Erstellen Sie schema.sql, data.sql

schema.sql

data.sql

Entitätserstellung

java:com.example.demo.entity.User.java

Erstellen Sie mapper.java, mapper.xml

java:src/main/java/com.example.demo.mapper.UserMapper.java

src/main/resouces/com/example/demo/mapper/UserMapper

Controller erstellen

java:com.example.demo.controller.UserController

Einstellungen für Validierungsnachrichten (messages.properties, WebConfig.java erstellt)

src/main/resources/messages.properties

java:com.example.demo/WebConfig.java

Bildschirmerstellung (Layout, Show, Liste, Neu, Bearbeiten, Formular, CSS-Erstellung)

Gemeinsames Layout (layout.html)

src/main/resources/templates/commons/layout.html

Listenbildschirm (list.html)

src/main/resources/templates/users/list.html

Detailbildschirm (show.html)

src/main/resources/templates/users/show.html

Bildschirm bearbeiten (edit.html)

src/main/resources/templates/users/edit.html

Neuer Bildschirm (new.html)

src/main/resources/templates/users/new.html

Gemeinsame Form

src/main/resources/templates/users/form.html

src/main/resources/static/css/home.css

`pom.xml`

`schema.sql`

`data.sql`

`java:com.example.demo.entity.User.java`

`java:src/main/java/com.example.demo.mapper.UserMapper.java`

`src/main/resouces/com/example/demo/mapper/UserMapper`

`java:com.example.demo.controller.UserController`

`src/main/resources/messages.properties`

`java:com.example.demo/WebConfig.java`

`src/main/resources/templates/commons/layout.html`

`src/main/resources/templates/users/list.html`

`src/main/resources/templates/users/show.html`

`src/main/resources/templates/users/edit.html`

`src/main/resources/templates/users/new.html`

`src/main/resources/templates/users/form.html`

`src/main/resources/static/css/home.css`