[JAVA] Lassen Sie uns mit Spring Boot part3 eine Webanwendung für die Buchverwaltung erstellen

Einführung

Hallo, mein Name ist @ Ikuto19, ein Student, der Programmieren studiert. Dieses Mal beginne ich mit Fortsetzung vom letzten Mal (Teil 2).

Letzte Überprüfung

In Teil 2 haben wir die Erstellungsschritte 1 bis 3 ausgeführt. Dieses Mal werde ich zwei der Erstellungsschritte 4-5 ausführen. Das Folgende muss dieses Mal neu erstellt (rot) oder geändert (blau) werden. スクリーンショット 2020-08-25 1.44.38.png

Implementierung des Bildschirmübergangs vom Startbildschirm

Wir werden einen Mechanismus implementieren, um den Bildschirm von index.html, dem Startbildschirm, zu operatorCollate.html zu überführen, das registriert und löscht.

Neue Datei erstellen / vorhandene Datei ändern

OperateController.java Zeigen Sie operatorCollate.html an, das der URL entspricht. Zu diesem Zeitpunkt wird der aus dem Textfeld auf der Seite index.html eingegebene ISBN-Code vom Typ Zeichenfolge mit einer Klasse namens ModelMap an operatorCollate.html übergeben. Geben Sie den Variablennamen in das erste Argument und die Zeichenfolge ein, die Sie in das zweite Argument übergeben möchten. Ich persönlich denke, dass die Variablennamen hier einheitlich sein sollten.

OperateController.java


package com.app.controller;

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

@Controller
public class OperateController {
	
	@GetMapping("/index")
	public String getIndexPage(Model model) {
		return "index";
	}

	//Methode zum Hinzufügen unten
	@RequestMapping("/operateCollate")
	public String operateCollate(ModelMap modelMap, @RequestParam("isbn") String isbn) {
		modelMap.addAttribute("isbn", isbn);
		return "operateCollate";
	}
}

noImage.png Hier herunterladen Ändern Sie es nach dem Herunterladen in "noImage.png ".

bookInfo.js Das Programm dieser Person wurde entsprechend dem Zweck dieser Zeit geändert. Informationen zur Biografie mithilfe von ISBN als Schlüssel mit der API von openBD (mithilfe von jQuery) abrufen

Basierend auf dem eingegebenen ISBN-Code werden die Buchinformationen im JSON-Format erfasst, und diesmal werden nur die folgenden Informationen erfasst. Wenn keine Titel- / Herausgeber- / Autoreninformationen vorhanden sind, wird "Keine" gespeichert, und wenn kein Deckblatt vorhanden ist, wird die URL der PNG-Datei mit der Aufschrift "Kein Bild" gespeichert.

bookInfo.js


$(function () {
	const isbn = $("#isbn").val();
	const url = "https://api.openbd.jp/v1/get?isbn=" + isbn;

	$.getJSON(url, function (data) {
		var title = 'Keiner';
		var publisher = 'Keiner';
		var author = 'Keiner';
		var thumbnail = '../images/noImage.png';
		
		if (data[0] != null) {
			if (data[0].summary.cover == "") {
				$("#thumbnail_image").html('<img src=\"' + thumbnail + '\" style=\"border:solid 1px #000000\" />');
			} else {
				$("#thumbnail_image").html('<img src=\"' + data[0].summary.cover + '\" style=\"border:solid 1px #000000\" />');
				thumbnail = data[0].summary.cover;
			}

			title = data[0].summary.title;
			publisher = data[0].summary.publisher;
			author = data[0].summary.author;
		}else{
			$("#thumbnail_image").html('<img src=\"' + thumbnail + '\" style=\"border:solid 1px #000000\" />');
		}

		$("#title").val(title);
		$("#publisher").val(publisher);
		$("#author").val(author);
		$("#thumbnail").val(thumbnail);
	});
});

operateCollate.html Diese Seite zeigt die erfassten Informationen an und registriert oder löscht sie nach Abschluss der Anfrage zum Buch.

operateCollate.html


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

<head>

<script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
<script type="text/javascript" src="/js/bookInfo.js"
	th:src="@{/js/bookInfo.js}"></script>

<meta charset="UTF-8">
<title>Buchverwaltungs-App</title>
</head>

<body>
	<div class="main_containerCollate background">
		<form method="get" action="regist">
			<div class="flexbox">
				<div class="">
					<div class="info">
						ISBN:<input id="isbn" class="texts" type="text" name="isbn" th:value="${isbn}"
							autofocus>
					</div>

					<div class="info">
Buchtitel:<input id="title" class="texts" type="text" name="title" value="">
					</div>

					<div class="info">
der Herausgeber:<input id="publisher" class="texts" type="text" name="publisher" value="">
					</div>

					<div class="info">
Autor:<input id="author" class="texts" type="text" name="author" value="">
					</div>
				</div>
				<div class="">
					<p id="thumbnail_image"></p>
					<input hidden id="thumbnail" type="text" name="thumbnail" value="">
				</div>
			</div>
			<div class="info">
				<p>Für die oben genannten Bücher wählen Sie bitte unten.</p>
				<button type="submit" class="submit">Anmeldung</button>
				<button type="submit" class="submit" formaction="delete">Löschen</button>
			</div>
		</form>

		<div class="link">
			<a href="/index">Rückkehr</a>
		</div>
	</div>
</body>
</html>

pom.xml Fügen Sie die folgende Abhängigkeit hinzu. Eine Bibliothek zur Verwendung von jQuery.

pom.xml


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

Implementierung der Registrierung und Löschung in der Datenbank

OperateController.java Fügen Sie OperateController.java die folgenden Feldvariablen und Methoden hinzu

Die erfassten Informationen werden im ISBN-Objekt festgelegt, und die anzuzeigende Nachricht wird mithilfe der DatabaseClass-Klasse erfasst.

OperateController.java


package com.app.controller;

import java.sql.SQLException;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.app.database.DatabaseClass;
import com.app.entity.ISBN;
import com.app.repository.ISBNRepository;

@Controller
public class OperateController {
	@Autowired
	ISBNRepository isbnRepository;
	
	@RequestMapping("/operateCollate")
	public String operateCollate(ModelMap modelMap, @RequestParam("isbn") String isbn) {
		modelMap.addAttribute("isbn", isbn);
		return "operateCollate";
	}
	
	@RequestMapping("regist")
	public String regist(ModelMap modelMap, @RequestParam("isbn") String isbn,
			@RequestParam("title") String title, @RequestParam("publisher") String publisher,
			@RequestParam("author") String author, @RequestParam("thumbnail") String thumbnail) throws SQLException {
		
		ISBN isbnInfo = new ISBN();
		isbnInfo.setIsbn(isbn);
		isbnInfo.setTitle(title);
		isbnInfo.setPublisher(publisher);
		isbnInfo.setAuthor(author);
		isbnInfo.setThumbnail(thumbnail.replace("https://cover.openbd.jp/", ""));
		
		DatabaseClass dc = new DatabaseClass(isbnRepository.findAll());
		String message = dc.registDB(isbnInfo,isbnRepository);
		modelMap.addAttribute("message",message);
		
		return "regist";
	}

	@RequestMapping("delete")
	public String delete(ModelMap modelMap, @RequestParam("isbn") String isbn,
			@RequestParam("title") String title, @RequestParam("publisher") String publisher,
			@RequestParam("author") String author, @RequestParam("thumbnail") String thumbnail) throws SQLException {
		
		ISBN isbnInfo = new ISBN();
		isbnInfo.setIsbn(isbn);
		isbnInfo.setTitle(title);
		isbnInfo.setPublisher(publisher);
		isbnInfo.setAuthor(author);
		isbnInfo.setThumbnail(thumbnail.replace("https://cover.openbd.jp/", ""));
		
		DatabaseClass dc = new DatabaseClass(isbnRepository.findAll());
		String message = dc.deleteDB(isbnInfo,isbnRepository);
		modelMap.addAttribute("message",message);
		
		return "delete";
	}
}

DatabaseClass.java Eine Klasse, die Datentypen verarbeitet und Nachrichten generiert, die sich je nach Situation ändern.

DatabaseClass.java


package com.app.database;
(Weglassen der Einfuhranweisung)
public class DatabaseClass {
	private List<ISBN> manageBookDB;
	
	public DatabaseClass(List<ISBN> manageBookDB) {
		this.manageBookDB = manageBookDB;
	}

	public String registDB(ISBN isbnInfo, ISBNRepository isbnRepository) throws SQLException {
		String message = null;
		
		if(isbnInfo.getTitle().equals("Keiner") || isbnInfo.getPublisher().equals("Keiner") || isbnInfo.getAuthor().equals("Keiner")){
			message = "Ich konnte mich nicht registrieren, weil ich die Buchinformationen nicht erhalten konnte.";
		}else if(convertStrings(manageBookDB).contains(isbnInfo.getIsbn())) {
			message = "Bereits in der Datenbank.";
		} else {
			message = "Neu in der Datenbank registriert.";
			isbnRepository.save(isbnInfo);
		}
		return message;
	}

	public String deleteDB(ISBN isbnInfo, ISBNRepository isbnRepository) throws SQLException {
		String message = null;
		
		if(convertStrings(manageBookDB).contains(isbnInfo.getIsbn())) {
			message = "Aus der Datenbank gelöscht.";
			isbnRepository.delete(isbnInfo);
		}else {
			message = "Existiert nicht in der Datenbank.";
		}
		return message;
	}

	public List<String> convertStrings(List<ISBN> manageBook){
		List<String> isbnList = new ArrayList<String>();
		for(ISBN isbn:manageBook) {
			isbnList.add(isbn.getIsbn());
		}
		return isbnList;
	}

}

ISBN.java Gleiche Entitätsklasse wie LoginUser.java.

ISBN.java


package com.app.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "isbn_code")
public class ISBN {
	
	@Id
	@Column(name = "isbn")
	private String isbn;

	@Column(name = "title")
	private String title;

	@Column(name = "publisher")
	private String publisher;

	@Column(name = "author")
	private String author;

	@Column(name = "thumbnail")
	private String thumbnail;

	public String getIsbn() {
		return isbn;
	}
	
	public void setIsbn(String isbn) {
		this.isbn = isbn;
	}
	
	public String getTitle() {
		return title;
	}
	
	public void setTitle(String title) {
		this.title = title;
	}
	
	public String getPublisher() {
		return publisher;
	}
	
	public void setPublisher(String publisher) {
		this.publisher = publisher;
	}
	
	public String getAuthor() {
		return author;
	}
	
	public void setAuthor(String author) {
		this.author = author;
	}
	
	public String getThumbnail() {
		return thumbnail;
	}
	
	public void setThumbnail(String thumbnail) {
		this.thumbnail = thumbnail;
	}

}

ISBNRepository.java

ISBNRepository.java


package com.app.repository;

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

import com.app.entity.ISBN;

@Repository
public interface ISBNRepository extends JpaRepository<ISBN, String>{}

delete.html Die zu löschende Seite.

html.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Seite löschen</title>
</head>
<body>
	<div class="main_container do">
		<div class=title>
			<h1>Buch löschen</h1>
		</div>
		<div class="message">
			<p th:text="${message}"></p>
		</div>
		<div>
			<a href="index">Rückkehr</a>
		</div>
	</div>
</body>
</html>

regist.html Die zu registrierende Seite.

regist.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Registrierungsseite</title>
</head>
<body>
	<div class="main_container do">
		<div class=title>
			<h1>Buchregistrierung</h1>
		</div>
		<div class="message">
			<p th:text="${message}"></p>
		</div>
		<div>
			<a href="index">Rückkehr</a>
		</div>
	</div>
</body>
</html>

Aufbau einer Buchinformationsdatenbank

Erstellen Sie mit dem folgenden Befehl eine Tabelle zum Speichern von Buchinformationen. Der Tabellenname sollte mit 〇〇 von `@ Table (name =" ○○ ")` der Entitätsklasse ISBN.java identisch sein. Dieses Mal habe ich den Tabellennamen isbn_code gewählt.

$ mysql -u (MySQL-Benutzername) -p
Enter password: (MySQL-Passwort)
mysql> use manageBook
mysql> create table isbn_code(,isbn varchar(256),title varchar(256),publisher varchar(256),author varchar(256),thumbnail varchar(256));

Funktionsprüfung

Geben Sie nach dem Zugriff auf http: // localhost: 8080 / login den zuvor festgelegten Anmeldenamen und das Kennwort ein. Wenn Sie den ISBN-Code eingeben und die Registrierungs- oder Löschtaste drücken, können Sie sich registrieren oder aus der Datenbank löschen. Verwenden Sie den folgenden Befehl, um die Datenbank zu überprüfen.

$ mysql -u (MySQL-Benutzername) -p
Enter password: (MySQL-Passwort)
mysql> create database manageBook;
mysql> use manageBook
mysql> select * from isbn_code;

Am Ende

Das ist alles für diese Zeit. Ich habe es dieses Mal als letztes geschrieben, aber ich habe es geteilt, weil es lang zu sein scheint. Das nächste Mal ist wirklich das letzte Mal, und ich werde den Rest erledigen (Heroku-Einstellungen, Bereitstellung usw.).

Weiter zum nächsten Mal (Teilfinale)> Bald veröffentlichen

Referenzseite

Informationen zur Biografie mithilfe von ISBN als Schlüssel mit der API von openBD (mithilfe von jQuery) abrufen

Recommended Posts

Erstellen wir eine Buchverwaltungs-Webanwendung mit Spring Boot part1
Lassen Sie uns mit Spring Boot part3 eine Webanwendung für die Buchverwaltung erstellen
Lassen Sie uns mit Spring Boot part2 eine Webanwendung für die Buchverwaltung erstellen
Erstellen wir eine einfache API mit EC2 + RDS + Spring Boot ①
Starten Sie die Entwicklung von Webanwendungen mit Spring Boot
Führen Sie die WEB-Anwendung mit Spring Boot + Thymeleaf aus
Erstellen Sie einen Web-API-Server mit Spring Boot
Java-Anfänger haben versucht, mit Spring Boot eine einfache Webanwendung zu erstellen
Machen wir einen LINE Bot mit Ruby + Sinatra - Teil 2
[Spring Boot] Erstellung von Webanwendungen
Machen wir einen LINE Bot mit Ruby + Sinatra - Teil 1
Ich habe versucht, eine Webanwendung voller Fehler mit Spring Boot zu klonen
Erstellen Sie ein WEB-System mit Spring + Doma + H2DB Part 2
Lassen Sie uns einen Leistungsschalter für den Backend-Service mit Actuator of Spring Boot (Teil 1) herstellen.
Die erste WEB-Anwendung mit Spring Boot-Making a Pomodoro Timer-
Bis Sie eine Webanwendung mit Servlet / JSP erstellen (Teil 1)
Erstellen Sie eine Anfrage-App mit Spring Boot
Erstellen Sie eine Webanwendung mit Javalin
Implementieren Sie einen einfachen Web-REST-API-Server mit Spring Boot + MySQL
[Anfänger] Versuchen Sie, die REST-API für die Todo-App mit Spring Boot zu schreiben
Verarbeitung beim Starten einer Anwendung mit Spring Boot
Machen wir eine Weihnachtskarte mit Verarbeitung!
Erstellen Sie mit Dropwizard eine einfache Webanwendung
HTTPS mit Spring Boot und Let's Encrypt
Starten Sie die Nginx + Spring Boot-Anwendung mit Docker-Compose
Spring Boot2-Webanwendungsentwicklung mit Visual Studio Code SQL Server-Verbindung
Erstellen einer Entwicklungsumgebung für Java-Webanwendungen mit Docker für Mac Teil1
Spring Boot2-Webanwendungsentwicklung mit Visual Studio Code Hello World-Erstellung
Automatische Bereitstellung von in Java entwickelten Webanwendungen mit Jenkins [Spring Boot App Edition]
Erstellen Sie mit Docker für Mac Teil2 eine Entwicklungsumgebung für Java-Webanwendungen
Erstellen Sie eine Website mit Spring Boot + Gradle (jdk1.8.x)
Erstellen Sie mit Spring Boot eine einfache Such-App
Erstellen Sie eine Spring Boot-Anwendung mit IntelliJ IDEA
Lassen Sie uns eine Suchfunktion mit Rails (Ransack) machen
Stellen Sie die Spring Boot-Anwendung für Elastic Beanstalk bereit
Erstellen Sie ein WEB-System mit Spring + Doma + H2DB
Erstellen Sie mit Docker eine Spring Boot-Entwicklungsumgebung
Ich habe eine App für maschinelles Lernen mit Dash (+ Docker) Teil 3 ~ Übung ~ erstellt
Erstellen wir eine Taschenrechner-App mit Java ~ Erstellen Sie einen Anzeigebereich im Fenster
Melden Sie sich bei Spring Boot-Webanwendungen auf der Microsoft ID-Plattform an
Vom Erstellen eines Spring Boot-Projekts bis zum Ausführen einer Anwendung mit VS Code
Lassen Sie uns eine TODO-Anwendung mit Java 2 erstellen. Ich möchte eine Vorlage mit Spring Initializr erstellen und eine Hello-Welt erstellen
Erstellen Sie ein WEB-System mit Spring + Doma + H2DB + Thymeleaf
Versuchen Sie, OpenID Connect mit Keycloak (Spring Boot-Anwendung) zu verwenden.
[JUnit 5-kompatibel] Schreiben Sie einen Test mit JUnit 5 mit Spring Boot 2.2, 2.3
[Java-Grundlagen] Lassen Sie uns ein Dreieck mit einer for-Anweisung erstellen
Implementieren Sie eine einfache Rest-API mit Spring Security mit Spring Boot 2.0
[Arbeitsnotiz für persönliche Anwendungen] Erstellen Sie einen Kalender mit simple_calendar
Passen Sie die Antwort auf REST-API-Fehler mit Spring Boot an (Teil 2).
[JUnit 5] Schreiben Sie einen Validierungstest mit Spring Boot! [Parametrisierungstest]
Ein Memorandum beim Erstellen eines REST-Service mit Spring Boot
Erstellen Sie mit Spring Security 2.1 eine einfache Demo-Site mit Spring Security
Spring Boot 2.3 Verfügbarkeit von Anwendungen
Passen Sie die Antwort auf REST-API-Fehler mit Spring Boot an (Teil 1).
Ich habe jetzt einen Test mit Spring Boot + JUnit 5 geschrieben
[Einführung in die Android App-Entwicklung] Machen wir einen Zähler
Mit Spring Boot herunterladen
Erstellen wir eine Taschenrechner-App mit Java ~ Zeigen Sie das Anwendungsfenster an
Implementieren Sie die REST-API mit Spring Boot und JPA (Application Layer).