Erstellen wir eine TODO-App mit Java 3 Speichern Sie temporäre Daten in MySQL-> Get all-> Display on top

Hallo. Dies ist eine Fortsetzung von Lassen Sie uns eine TODO-Anwendung mit Java 2 erstellen. Ich möchte eine Vorlage mit Spring Initializr erstellen und eine Hello-Welt erstellen.

Dieses Mal werde ich die temporären Daten in der Datenbank (MySQL) speichern, alle abrufen und auf dem oberen Bildschirm anzeigen.

Linkerfassung zur Erstellung von TODO-Anwendungen

1: Kurze Beschreibung von MVC 2: Ich möchte eine Vorlage mit Spring Initializr erstellen und eine Hallo-Welt erstellen 3: Erstellen wir eine TODO-Anwendung mit Java. 3 Speichern Sie temporäre Daten in MySQL-> Get all-> Display on top (hier und jetzt).

Installation von MySQL und Sequel Pro

Zunächst werden wir eine Datenbank und eine praktische Benutzeroberfläche vorstellen.

Ich werde die detaillierte Einführung hier nicht spezifizieren, aber ich denke, der folgende Link wird hilfreich sein.

Über die Einführung von MySQL

Konstruktionsverfahren für die MySQL-Umgebung Einführung in MySQL

Über die Einführung von Sequel PRO

So installieren Sie Mac MySQL Sequel Pro

DB / Tabelle erstellen-> Temporäre Daten erstellen

Folgen Sie dem Link oben, um eine Datenbank zu erstellen!

In diesem Artikel verwenden wir den DB-Namen qiita_todo.

Starten Sie nach dem Erstellen der Datenbank Sequel Pro und stellen Sie eine Verbindung zur Datenbank her.

Geben Sie dann auf der Registerkarte Abfrage Folgendes ein.

CREATE TABLE `todo` (
  `id` bigint(11) unsigned zerofill NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `title` varchar(30) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT 'Titel',
  `deadline` date NOT NULL COMMENT 'Frist',
  `status` tinyint(1) NOT NULL DEFAULT '0' COMMENT 'Status',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Erstellungsdatum und -zeit',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'Datum und Uhrzeit aktualisieren',
  PRIMARY KEY (`id`),
  UNIQUE KEY `title` (`title`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

↓ Das Bild sieht so aus.

Wenn Sie ** Strg + r ** drücken, um die Abfrageanweisung auszuführen ...

↓ Die Tabelle sollte so erstellt werden. (Sie können die Spaltenspezifikationen auf der Registerkarte Struktur überprüfen.)

Einführung von JPA

Nachdem die Datenbank beendet ist, stellen wir als nächstes JPA vor.

JPA ist wie ein Übersetzer, der Spring und DB verbindet. Es leitet die Anforderung von Spring an die Datenbank weiter und verarbeitet sie auf verschiedene Arten.

Wenn Sie beispielsweise die findAll-Methode von JPA verwenden, werden alle DB-Daten erfasst. Diese Methode wird später beschrieben.

JPA und MySQL wurden zu build.gradle hinzugefügt

Fügen Sie den Abhängigkeiten von app / build.gradle Folgendes hinzu.

dependencies {
~~~ Abkürzung ~~~
　　　implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	 runtimeOnly 'mysql:mysql-connector-java'
~~~ Abkürzung ~~~
}

Aktualisieren Sie build.gradle

Sie können JPA verwenden, indem Sie den geänderten Teil von build.gradle gemäß dem folgenden Bild aktualisieren!

Bearbeiten Sie application.properties (oder application.yaml).

Bearbeiten Sie dann application.properties (oder yaml), um die erstellte Datenbank und Spring zu verbinden.

Der Speicherort der Datei lautet app / src / main / application.properties.

Fügen Sie Folgendes hinzu.

spring.datasource.url=jdbc:mysql://localhost:3306/qiita_todo # ①
spring.datasource.username=root # ②
spring.datasource.password=     # ②
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.initialization-mode=never # ③
spring.datasource.sql-script-encoding=utf-8
spring.jpa.hibernate.ddl-auto=none # ③

① 3306 sollte die Standardportnummer sein, aber wenn Sie sie geändert haben, ändern Sie sie. Der Teil von qiita_todo ist der DB-Name.

② Wenn Sie Ihren eigenen Benutzernamen und Ihr eigenes Passwort haben, verwenden Sie dieses. In diesem Artikel lautet der Benutzername root und es gibt kein Passwort. (Bitte beachten Sie, dass das Passwort beim Kopieren möglicherweise als Leerzeichen behandelt wird.)

③ Es gibt kein Problem, die Einstellungen hier zu ändern. Wenn Sie interessiert sind, versuchen Sie es bitte mit Google (Werfen).

Versuchen Sie, Daten zu speichern

Nachdem die Einstellungen abgeschlossen sind, geben wir einige temporäre Daten ein.

Öffnen Sie Sequel Pro, drücken Sie auf die Registerkarte Inhalt und doppelklicken Sie auf einen leeren Datensatz, um ihn einzugeben. Geben Sie daher einen geeigneten Wert ein.

Holen Sie sich alle DB-Datensätze vom Controller

Als nächstes ist Intel iJ an der Reihe.

Bereiten Sie zunächst einen Container (Entität) vor, der beim Abrufen von Daten aus der Datenbank verwendet werden soll. Die Einführung von Lombok ist in vielerlei Hinsicht nützlich. Beginnen Sie also von dort aus.

Einführung von Lombok

Die Verwendung von Lombok erleichtert die Eingabe von Getter und Setter.

Fügen Sie den Abhängigkeiten von build.gradle Folgendes hinzu.

dependencies {
~~~ Abkürzung ~~~
	compileOnly 'org.projectlombok:lombok:1.18.12'
	annotationProcessor 'org.projectlombok:lombok:1.18.12'
~~~ Abkürzung ~~~
}

Nach dem Hinzufügen laden wir gradle auf die gleiche Weise neu wie beim Einfügen von JPA.

Entitätsklasse erstellen

Als nächstes wird die Entität erstellt.

Erstellen Sie zunächst ein Paket (Ordner) in der Hierarchie, in der sich TodoContoroller befindet.

main / java / com.example.todo <- Sie können es erstellen, indem Sie mit der rechten Maustaste auf diese Hierarchie klicken und auf Neu-> Paket klicken.

Dieses Mal werde ich das Paket dao benennen.

Klicken Sie mit der rechten Maustaste auf das erstellte Dao und drücken Sie-> Neu-> Java-Klasse, um eine Klasse namens TodoEntity zu erstellen.

Bearbeiten Sie die Entitätsklasse

@Entity
@Getter
@Setter
@Table(name="todo")
public class TodoEntity {
    @Id
    @Column
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(name="title")
    private String title;
    
    @Column(name="deadline")
    private LocalDate deadline;
    
    @Column(name="status")
    private boolean status;
    
    @CreationTimestamp
    @Column(name="create_time")
    private LocalDateTime createTime;
    
    @UpdateTimestamp
    @Column(name="update_time")
    private LocalDateTime updateTime;
}

Bearbeiten Sie die Entity-Klasse wie folgt.

Sie können eine der Tabelle entsprechende Variable erstellen, indem Sie @Column festlegen.

@CreationTimestamp und @UpdateTimestamp sind Anmerkungen, die beim Erstellen oder Aktualisieren automatisch die Uhrzeit eingeben.

Nachdem Sie die Entity-Klasse haben, können Sie Daten aus der Datenbank abrufen und senden.

Repository erstellen

Erstellen Sie als Nächstes die Repository-Klasse. Diese Klasse ist die Klasse, die tatsächlich mit der Anwendung und der Datenbank interagiert. (Es ist die Aufgabe dieser Klasse, alles abzurufen, zu bearbeiten und zu löschen.)

Erstellen Sie die TodoRepository-Klasse in dem soeben erstellten Dao-Paket.

@Repository
public interface TodoRepository extends JpaRepository<TodoEntity, Long> {
}

Dies ist alles, was Sie bearbeiten müssen. (Import wird weggelassen.)

Extends erbt die JpaRepository-Klasse.

Das detaillierte Repository wird auf der Website hier erläutert. Wenn Sie also interessiert sind, lesen Sie es.

Jetzt können Sie die über das Todo-Repository abgerufenen Daten in die Todo-Entität speichern!

Erstellen einer Serviceklasse

Jetzt erstellen wir die Service-Klasse.

Die Rolle der Service-Klasse in dieser Todo-App besteht darin, die Repository-Klasse aufzufordern, eine ** DB-bezogene Verarbeitung ** durchzuführen.

Mit anderen Worten, schreiben Sie die Geschäftslogik in diese Klasse.

Erstellen Sie eine TodoService-Klasse unter main / java / com.example.todo.

@Service
@RequiredArgsConstructor
public class TodoService {
    private final TodoRepository todoRepository;
    
    public List<TodoEntity> findAllTodo() {
        return todoRepository.findAll();
    }
}

Ich fühle mich so. (Import wird weggelassen.)

@RequiredArgsConstructor ist Lomboks Annotation für das Standardkonstrukt.

Eine Annotation, die automatisch einen Standardkonstruktor mit Argumenten für die in final deklarierten Mitglieder generiert (in diesem Fall todoRepository).

Hier und hier Möglicherweise möchten Sie auf die Site verweisen.

Controller bearbeiten

Nachdem der Service, die Entität und das Repository erstellt wurden, bearbeiten wir den Controller.

@Controller
@RequiredArgsConstructor
public class TodoController {

    private final TodoService todoService;
    
    @GetMapping("/top")
    public String top(Model model){
        List<TodoEntity> todoEntityList =  todoService.findAllTodo(); //①
        model.addAttribute("todoList", todoEntityList); //②
        return "top";
    }
}

Es ist so.

① Rufen Sie alle DB-Datensätze aus der zuvor erstellten Service-Klasse ab und geben Sie sie als Rückgabewert List an die Variable todoEntityList zurück.

② Machen Sie todoEntityList zu einer Variablen namens todoList und übergeben Sie sie an die Front.

Bearbeiten von top.html

<!DOCTYPE html>
<!--↓①-->
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!--↓②-->
<div th:each="todo: ${todoList}" class=" w-75 h-25 my-1 mx-auto pt-5">
    <div class="container">
        <div  class="row">
            <div class="col-5 pl-5">
                <p th:text="${todo.title}" class="mb-1"></p>
                <p class="mb-1">Frist:<span  th:text="${todo.deadline}"></span></p>
                <p class="mb-1">Erstellungsdatum:<span  th:text="${todo.createTime}"></span></p>
            </div>
            <div class="col-2 d-flex justify-content-start align-items-center px-0">
                <a class="h-100 w-75 btn btn-info pt-4">
Bearbeiten
                </a>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

BootStrap wird für eine einfache und schöne Anzeige verwendet. Bitte beachten Sie, dass der Schreibstil nicht sehr schön ist!

① Erklären Sie hier zunächst die Verwendung von Thymeleaf. Jetzt können Sie Methoden wie th verwenden: ~ ~! Wie Sie unten sehen können, gibt es verschiedene Dinge wie th: each und th: text. Warum also nicht auf [hier] verweisen (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html)? ..

② Dabei wird jeweils die in der Steuerung beschriebene Liste zerlegt und verwendet. Was als todoList übergeben wird, wird in HTML als todo verarbeitet. Danach können Sie es anzeigen, indem Sie todo.title, Deadline oder andere Variablen in der Liste aufrufen!

↓ Führen Sie die App aus und hoffentlich sollte sie so aussehen ...!

Eine kurze Zusammenfassung

Was ich diesmal gemacht habe ...

① Rufen Sie findAllTodo von TodoService mit TodoContoroller auf

② findAllTodo ruft findAll von TodoRepository auf

③ findAll ruft alle Datensätze aus der Datenbank ab

④ Alle Daten gehen in TodoEntity

⑤ Die Daten kehren zu TodoController zurück und werden zur Anzeige an die Rezeption weitergeleitet!

Das ist der Fluss!

Anstatt dass eine Klasse viel verarbeitet wird, haben wir verschiedene Klassen erstellt, um die Verarbeitung zu verteilen und die Reaktion auf Fehler zu vereinfachen!

Die Fortsetzung kommt wieder!