[JAVA] Erstellen Sie eine einfache CRUD mit SpringBoot + JPA + Thymeleaf ② ~ Bildschirm- und Funktionserstellung ~

Inhalt

• Fortsetzung von Letztes Mal --Erstellen Sie eine einfache CRUD-App mit Spring Boot ――Dieses Mal erstellen Sie die folgenden 4 Bildschirme und führen Sie die Verarbeitung durch
• Listenbildschirm
• Neuer Bildschirm
• Bearbeitungsbildschirm
• Referenzbildschirm

Zu entwickelnde Funktionen

1. Erstellen Sie eine Spielertabelle zum Speichern von Spielerinformationen
2. Aktivieren Sie die Bedienung des Spielertisches mit JPA
3. Erstellen eines Endpunkts für den Spieler
4. Erstellen Sie für jeden Bildschirm eine Vorlage

1. Erstellen Sie eine Spielertabelle zum Speichern von Spielerinformationen

• Wenn Sie Spring Boot und JPA verwenden, wird beim Erstellen einer Entity-Klasse automatisch eine Tabelle generiert, sodass Sie nicht auf SQL klicken müssen. --Erstelle "Player.java", um Spielerinformationen in "src / main / java / com / example / baseball / domain" zu speichern

src/main/java/com/example/baseball/domain/Player.java

package com.example.baseball.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity // ①
public class Player {
    @Id // ②
    @GeneratedValue(strategy = GenerationType.IDENTITY) // ③
    private Long id;
    private String name;
    private Integer age;
    private String team;
    private String position;

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getAge() {
        return age;
    }
    public void setAge(Integer age) {
        this.age = age;
    }
    public String getTeam() {
        return team;
    }
    public void setTeam(String team) {
        this.team = team;
    }
    public String getPosition() {
        return position;
    }
    public void setPosition(String position) {
        this.position = position;
    }

    @Override
    public String toString() {
        return "Player [id=" + id + ", name=" + name + ", age=" + age + ", team=" + team + ", position=" + position + "]";
    }
}

--①: Verknüpfung mit der DB-Tabelle durch Hinzufügen von "@ Entity" --②: Die Variable mit @ Id wird zum Primer-Schlüssel der Tabelle. --③: Wenn Sie "@ GeneratedValue" hinzufügen, werden Seriennummern automatisch zugewiesen.

2. Lassen Sie JPA den Spielertisch bedienen

--JPA bietet die grundlegende Verarbeitung für den Zugriff auf die Tabelle, sodass Sie kein SQL schreiben müssen.

• Kann verwendet werden, indem eine Schnittstelle erstellt wird, die das Jpa-Repository von JPA erbt.
• Wenn Sie etwas anderes als die typischen Vorgänge wie findAll und save ausführen möchten, müssen Sie es dem Repository hinzufügen. --Erstelle "PlayerRepository.java" in "src / main / java / com / example / baseball / repository"

src/main/java/com/example/baseball/repository/PlayerRepository.java

package com.example.baseball.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.example.baseball.domain.Player;

@Repository
public interface PlayerRepository extends JpaRepository<Player, Long> {

}

--Erstellen Sie einen Dienst, der die Repository-Verarbeitung aufruft

• Die Geschäftslogik wird in den Dienst geschrieben, und das Repository ist nur DB-Zugriff.
• Rufen Sie die Dienstmethode auf, wenn Sie eine Verarbeitung ausführen möchten, die auf die Datenbank zugreift
• Da zu diesem Zeitpunkt keine Geschäftslogik vorhanden ist, schreiben Sie nur den Prozess zum Aufrufen der Repository-Methode. --Erstelle PlayerService.java in src / main / java / com / example / baseball / service

src/main/java/com/example/baseball/service/PlayerService.java

package com.example.baseball.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.baseball.domain.Player;
import com.example.baseball.repository.PlayerRepository;

@Service
public class PlayerService {
    // ①
    @Autowired
    private PlayerRepository playerRepository;

    public List<Player> findAll() {
        return playerRepository.findAll();
    }

    public Player findOne(Long id) {
        return playerRepository.findOne(id);
    }

    public Player save(Player player) {
        return playerRepository.save(player);
    }

    public void delete(Long id) {
        playerRepository.delete(id);
    }
}

--①: Wenn Sie es mit "@ Autowired" deklarieren, wird die Bohne injiziert, sodass Sie es ohne "new" verwenden können.

3. Erstellen eines Endpunkts für den Player

--Erstellen Sie eine Methode, die der URL zugeordnet ist, auf die der Benutzer zugreift

• Die folgenden 6 Arten von Endpunkten werden erstellt

--Erstelle PlayerController.java in src / main / java / com / example / baseball / controller

src/main/java/com/example/baseball/controller/PlayerController.java

package com.example.baseball.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
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;

import com.example.baseball.domain.Player;
import com.example.baseball.service.PlayerService;

@Controller
@RequestMapping("/players") // ①
public class PlayerController {
    @Autowired
    private PlayerService playerService;

    @GetMapping
    public String index(Model model) { // ②
        List<Player> players = playerService.findAll();
        model.addAttribute("players", players); // ③
        return "players/index"; // ④
    }

    @GetMapping("new")
    public String newPlayer(Model model) {
        return "players/new";
    }

    @GetMapping("{id}/edit")
    public String edit(@PathVariable Long id, Model model) { // ⑤
        Player player = playerService.findOne(id);
        model.addAttribute("player", player);
        return "players/edit";
    }

    @GetMapping("{id}")
    public String show(@PathVariable Long id, Model model) {
        Player player = playerService.findOne(id);
        model.addAttribute("player", player);
        return "players/show";
    }

    @PostMapping
    public String create(@ModelAttribute Player player) { // ⑥
        playerService.save(player);
        return "redirect:/players"; // ⑦
    }

    @PutMapping("{id}")
    public String update(@PathVariable Long id, @ModelAttribute Player player) {
        player.setId(id);
        playerService.save(player);
        return "redirect:/players";
    }

    @DeleteMapping("{id}")
    public String destroy(@PathVariable Long id) {
        playerService.delete(id);
        return "redirect:/players";
    }
}

--①: Wenn Sie der Klasse "@ RequestMapping" hinzufügen, wird es auf alle Methoden in der Klasse angewendet.

• Das heißt, alle Methoden dieser Klasse werden URLs zugeordnet, die mit "http: // localhost: 8080 / player" beginnen. --②: Wenn Sie im Argument der Methode einen Wert vom Typ "Model" festlegen, wird automatisch eine Instanz von Model übergeben. --③: Sie können den Wert an die Vorlage übergeben, indem Sie das in ② empfangene Modell mit dem Wert füllen.
• Hier wird die Liste der Spieler mit dem Schlüsselnamen "Spieler" festgelegt. --④: Suchen Sie anhand der zurückgegebenen Zeichenfolge die Datei unter "src / main / resources / templates /" und geben Sie sie an den Benutzer zurück.
• Hier wird "src / main / resources / templates / player / index.html" zurückgegeben. -⑤: Sie können den Wert für die URL abrufen, indem Sie im Argument der Methode "@ PathVariable" festlegen.
• Wenn hier auf "http: // localhost / player / 1" zugegriffen wird, wird 1 in "id" eingegeben. --⑥: Wenn Sie dem Argument der Methode "@ ModelAttribute" hinzufügen, können Sie die Hauptinformationen der gesendeten Anforderung abrufen. --⑦: "Weiterleiten: / Spieler" leitet Sie zu "/ Spieler" weiter
• Es fühlt sich so an, als würde nach Abschluss des Erstellungsvorgangs ohne Erlaubnis auf "http: // localhost: 8080 / player" zugegriffen.

4. Erstellen Sie für jeden Bildschirm eine Vorlage

• Da wir dieses Mal eine Vorlage für den Spieler erstellen, erstellen wir sie unter "src / main / resources / templates / player" --Erstellen Sie die folgenden 4 Bildschirmdateien --index.html (Listenbildschirm) --new.html (neuer Erstellungsbildschirm) --edit.html (Bearbeitungsbildschirm) --show.html (Referenzbildschirm)

Platzierung statischer Dateien

• Bereiten Sie CSS- und Javascript-Dateien vor, bevor Sie eine Vorlage erstellen
• Verwenden Sie diesmal Bootstrap.
• Die neueste Version ist 4er Serie, aber dieses Mal werden wir 3er Serie verwenden
• Laden Sie von [hier] herunter (https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip) und platzieren Sie die folgenden Dateien --Kopieren Sie bootstrap.css im CSS-Ordner in den Ordner src / main / resources / static / css --Kopieren Sie bootstrap.js im Ordner js in den Ordner src / main / resources / static / js
• Laden Sie die jQuery herunter und stellen Sie sie bereit, von der Bootstrap abhängt
• Laden Sie jQuery von [hier] herunter (https://raw.githubusercontent.com/jquery/jquery/1.12.4/dist/jquery.js).
• Wenn die Quelle direkt herauskommt, klicken Sie mit der rechten Maustaste und speichern Sie sie unter
• Platzieren Sie im Ordner src / main / resources / static / js den Namen jquery.js

index.html

• Zeigen Sie eine Liste der Spieler in einer Tabelle an --Erstelle index.html in src / main / resources / templates / player

src/main/resources/templates/players/index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>Listing Players - baseball</title>
    <!-- ① -->
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Listing Players</h1>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Alter</th>
            <th>Teamname</th>
            <th>Verteidigungsposition</th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <!-- ② -->
          <tr th:each="player:${players}" th:object="${player}">
            <!-- ③ -->
            <td th:text="*{id}"></td>
            <td th:text="*{name}"></td>
            <td th:text="*{age}"></td>
            <td th:text="*{team}"></td>
            <td th:text="*{position}"></td>
            <!-- ④ -->
            <td><a class="btn btn-default btn-xs" th:href="@{/players/{id}(id=*{id})}">Referenz</a></td>
            <td><a class="btn btn-default btn-xs" th:href="@{/players/{id}/edit(id=*{id})}">Bearbeiten</a></td>
            <td>
              <!-- ⑤ -->
              <form th:action="@{/players/{id}(id=*{id})}" th:method="delete">
                <input class="btn btn-default btn-xs" type="submit" value="Löschen" />
              </form>
            </td>
          </tr>
        </tbody>
      </table>
      <a class="btn btn-default" href="/players/new">Erstelle neu</a>
    </div>
  </body>
</html>

--①: Lesen Sie CSS- und Javascript-Dateien --②: Die Schleifenverarbeitung wird für die vom Controller übergebenen "Spieler" durchgeführt.

• Die Loop-Verarbeitung kann wie folgt beschrieben werden: "th: each =" player: $ {player} "
• In diesem Beispiel wird die Schleife durch die Anzahl der Spieler, die List sind, wiederholt, und jedes Element in List wird mit dem Variablennamen player behandelt. --③: Durch Setzen von th: object =" $ {player} " können Sie$ {player.xxx}im untergeordneten Element dieses Tags als* {xxx}abkürzen. Werden --④: Durch Setzen von th: href =" xxx " kann der im href-Attribut festgelegte Wert dynamisiert werden.
• Der Wert, bei dem der Teil / player / {id} im href-Attribut festgelegt ist. Eine Variable kann in den Teil "{id}" eingebettet werden, und der Wert wird durch das nachfolgende "(id = * {id})" festgelegt. -⑤: Da ich auf den Löschvorgang zugreifen möchte, indem ich die HTTP-Methode auf DELETE setze, habe ich dem Formular-Tag th: method =" delete " hinzugefügt

new.html

--Player neuer Erstellungsbildschirm --Erstelle new.html in src / main / resources / templates / player

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

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>New Player - baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>New Player</h1>
      <form th:action="@{/players}" th:method="post">
        <div class="form-group">
          <label class="control-label">Name</label>
          <input class="form-control" type="text" name="name" />
        </div>
        <div class="form-group">
          <label class="control-label">Alter</label>
          <input class="form-control" type="number" name="age" />
        </div>
        <div class="form-group">
          <label class="control-label">Teamname</label>
          <input class="form-control" type="text" name="team" />
        </div>
        <div class="form-group">
          <label class="control-label">Verteidigungsposition</label>
          <input class="form-control" type="text" name="position" />
        </div>
        <button class="btn btn-default" type="submit">Erstellen</button>
      </form>
      <div class="pull-right">
        <a class="btn btn-link" href="/players">Zum Listenbildschirm</a>
      </div>
    </div>
  </body>
</html>

edit.html

• Bildschirm zum Bearbeiten des Players, dessen ID mit dem in der URL enthaltenen Wert übereinstimmt --Erstelle edit.html in src / main / resources / templates / player

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

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>Editing Player - baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Editing Player</h1>
      <form th:action="@{/players/{id}(id=*{id})}" th:method="put" th:object="${player}">
        <div class="form-group">
          <label class="control-label">Name</label>
          <!-- ① -->
          <input class="form-control" type="text" th:field="*{name}" />
        </div>
        <div class="form-group">
          <label class="control-label">Alter</label>
          <input class="form-control" type="number" th:field="*{age}" />
        </div>
        <div class="form-group">
          <label class="control-label">Teamname</label>
          <input class="form-control" type="text" th:field="*{team}" />
        </div>
        <div class="form-group">
          <label class="control-label">Verteidigungsposition</label>
          <input class="form-control" type="text" th:field="*{position}" />
        </div>
        <button class="btn btn-default" type="submit">aktualisieren</button>
      </form>
      <div class="pull-right">
        <a class="btn btn-link" href="/players">Zum Listenbildschirm</a>
      </div>
    </div>
  </body>
</html>

--①: Für den in th: field festgelegten Wert wird der Variablenname im Attribut name attribute id und der Wert im Wertattribut festgelegt.

• Wenn der Wert von "* {age}" 20 als "th: field =" * {age} "" ist, wird "name =" age "id =" age "value =" 20 "` automatisch festgelegt. ing

show.html

• Bildschirm, der auf Spielerinformationen verweist, deren ID mit dem in der URL enthaltenen Wert übereinstimmt --Erstelle show.html in src / main / resources / templates / player

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

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>Show Player - baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Show Player</h1>
      <div th:object="${player}">
        <div>
          <label>ID</label>
          <p th:text="*{id}"></p>
        </div>
        <div>
          <label>Name</label>
          <p th:text="*{name}"></p>
        </div>
        <div>
          <label>Alter</label>
          <p th:text="*{age}"></p>
        </div>
        <div>
          <label>Teamname</label>
          <p th:text="*{team}"></p>
        </div>
        <div>
          <label>Verteidigungsposition</label>
          <p th:text="*{position}"></p>
        </div>
      </div>
      <div>
        <a class="btn btn-default" th:href="@{/players/{id}/edit(id=*{id})}">Bearbeiten</a>
      </div>
      <div class="pull-right">
        <a class="btn btn-link" href="/players">Zum Listenbildschirm</a>
      </div>
    </div>
  </body>
</html>

Funktionsprüfung

• Bisher stehen beim Zugriff auf http: // localhost: 8080 / player die folgenden Funktionen zur Verfügung.

nächstes Mal

• Fortsetzung hier