introduction

Salut, je m'appelle @ Ikuto19, un étudiant en programmation. Cette fois, je partirai de Suite de la dernière fois (part2).

Dernier examen

Dans la partie 2, nous avons effectué les étapes de création 1 à 3. Cette fois, je pense que je vais faire deux des étapes de création 4-5. Ce qui suit est celui qui doit être nouvellement créé (rouge) ou modifié (bleu) cette fois. スクリーンショット 2020-08-25 1.44.38.png

Implémentation de la transition d'écran depuis l'écran d'accueil

Nous allons implémenter un mécanisme pour faire passer l'écran d'index.html, qui est l'écran d'accueil, à operatorCollate.html, qui enregistre et supprime.

Créer un nouveau fichier / modifier le fichier existant

OperateController.java Affichez operatorCollate.html correspondant à l'URL. À ce moment-là, le code ISBN de type chaîne entré à partir de la zone de texte de la page index.html est transmis à OperCollate.html à l'aide d'une classe appelée ModelMap. Entrez le nom de la variable dans le premier argument et la chaîne de caractères que vous souhaitez passer dans le deuxième argument. Je pense personnellement que les noms de variables ici devraient être unifiés.

`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";
	}

	//Méthode à ajouter ci-dessous
	@RequestMapping("/operateCollate")
	public String operateCollate(ModelMap modelMap, @RequestParam("isbn") String isbn) {
		modelMap.addAttribute("isbn", isbn);
		return "operateCollate";
	}
}

noImage.png Télécharger ici Après le téléchargement, changez-le en "noImage.png ".

bookInfo.js Le programme de cette personne a été modifié en fonction de l'objectif de cette période. Obtenez des informations biographiques en utilisant ISBN comme clé avec l'API openBD (en utilisant jQuery)

Sur la base du code ISBN entré, les informations du livre sont acquises au format json, et cette fois, seules les informations suivantes sont acquises. S'il n'y a pas d'informations sur le titre / l'éditeur / l'auteur, "Aucun" est stocké, et s'il n'y a pas de page de garde, l'url du fichier png qui indique Aucune image est stockée.

Titre du livre → titre
Éditeur → éditeur
Auteur → auteur
Couverture → miniature

`bookInfo.js`


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

	$.getJSON(url, function (data) {
		var title = 'Aucun';
		var publisher = 'Aucun';
		var author = 'Aucun';
		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 Cette page affiche les informations acquises et les enregistre ou les supprime après avoir terminé l'enquête sur le livre.

`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>Application de gestion de livres</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">
Titre de livre:<input id="title" class="texts" type="text" name="title" value="">
					</div>

					<div class="info">
l'éditeur:<input id="publisher" class="texts" type="text" name="publisher" value="">
					</div>

					<div class="info">
Auteur:<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>Pour les livres ci-dessus, veuillez sélectionner ci-dessous.</p>
				<button type="submit" class="submit">enregistrement</button>
				<button type="submit" class="submit" formaction="delete">Effacer</button>
			</div>
		</form>

		<div class="link">
			<a href="/index">Revenir</a>
		</div>
	</div>
</body>
</html>

pom.xml Ajoutez la dépendance suivante. Une bibliothèque pour utiliser jQuery.

`pom.xml`


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

Mise en place de l'enregistrement et de la suppression dans la base de données

OperateController.java Ajoutez les variables et méthodes de champ suivantes à OperateController.java

Champ: isbnRepository → Repository
Méthode: regist () → Méthode d'enregistrement dans la base de données
Méthode: delete () → Supprimer la méthode de base de données

Les informations acquises sont définies dans l'objet ISBN et le message à afficher est acquis à l'aide de la classe DatabaseClass.

`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 Une classe qui traite les types de données et génère des messages qui changent en fonction de la situation.

méthode registDB () → Comparez avec la base de données et générez un message d'enregistrement et d'enregistrement
Méthode deleteDB () → Comparez avec la base de données pour générer un message de suppression et de suppression
méthode convertStrings () → Convertir l'objet ISBN en code ISBN de la chaîne

`DatabaseClass.java`


package com.app.database;
(Omission de déclaration d'importation)
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("Aucun") || isbnInfo.getPublisher().equals("Aucun") || isbnInfo.getAuthor().equals("Aucun")){
			message = "Je n'ai pas pu m'inscrire car je n'ai pas pu obtenir les informations sur le livre.";
		}else if(convertStrings(manageBookDB).contains(isbnInfo.getIsbn())) {
			message = "Existe déjà dans la base de données.";
		} else {
			message = "Nouvellement enregistré dans la base de données.";
			isbnRepository.save(isbnInfo);
		}
		return message;
	}

	public String deleteDB(ISBN isbnInfo, ISBNRepository isbnRepository) throws SQLException {
		String message = null;
		
		if(convertStrings(manageBookDB).contains(isbnInfo.getIsbn())) {
			message = "Supprimé de la base de données.";
			isbnRepository.delete(isbnInfo);
		}else {
			message = "N'existe pas dans la base de données.";
		}
		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 Même classe d'entité que 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 La page à supprimer.

`html.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Supprimer la page</title>
</head>
<body>
	<div class="main_container do">
		<div class=title>
			<h1>Suppression de livre</h1>
		</div>
		<div class="message">
			<p th:text="${message}"></p>
		</div>
		<div>
			<a href="index">Revenir</a>
		</div>
	</div>
</body>
</html>

regist.html La page pour vous inscrire.

`regist.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Page d'inscription</title>
</head>
<body>
	<div class="main_container do">
		<div class=title>
			<h1>Inscription au livre</h1>
		</div>
		<div class="message">
			<p th:text="${message}"></p>
		</div>
		<div>
			<a href="index">Revenir</a>
		</div>
	</div>
</body>
</html>

Créer une base de données d'informations sur les livres

Créez une table pour enregistrer les informations du livre avec la commande suivante. Le nom de la table doit être identique à 〇〇 de @ Table (name = "○○") `` de la classe d'entité ISBN.java. Cette fois, j'ai choisi le nom de la table isbn_code.

$ mysql -u (nom d'utilisateur mysql) -p
Enter password: (mot de passe mysql)
mysql> use manageBook
mysql> create table isbn_code(,isbn varchar(256),title varchar(256),publisher varchar(256),author varchar(256),thumbnail varchar(256));

Contrôle de fonctionnement

Après avoir accédé à http: // localhost: 8080 / login, entrez le nom d'utilisateur et le mot de passe de connexion précédemment définis. Si vous entrez le code ISBN et appuyez sur le bouton d'enregistrement ou le bouton de suppression, vous pourrez vous enregistrer ou supprimer de la base de données. Pour vérifier la base de données, utilisez la commande suivante.

$ mysql -u (nom d'utilisateur mysql) -p
Enter password: (mot de passe mysql)
mysql> create database manageBook;
mysql> use manageBook
mysql> select * from isbn_code;

À la fin

C'est tout pour cette fois. Je l'ai écrit comme le dernier cette fois, mais je l'ai divisé parce que cela semble long. La prochaine fois, c'est vraiment la dernière, et je ferai le reste (paramètres heroku, déploiement, etc.).

Continuer à la prochaine fois (partie finale)> Publier bientôt

Site de référence

Obtenez des informations biographiques en utilisant ISBN comme clé avec l'API openBD (en utilisant jQuery)

[JAVA] Créons une application Web de gestion de livres avec Spring Boot part3

introduction

Dernier examen

Implémentation de la transition d'écran depuis l'écran d'accueil

Créer un nouveau fichier / modifier le fichier existant

OperateController.java

bookInfo.js

operateCollate.html

pom.xml

Mise en place de l'enregistrement et de la suppression dans la base de données

OperateController.java

DatabaseClass.java

ISBN.java

ISBNRepository.java

html.html

regist.html

Créer une base de données d'informations sur les livres

Contrôle de fonctionnement

À la fin

Site de référence

`OperateController.java`

`bookInfo.js`

`operateCollate.html`

`pom.xml`

`OperateController.java`

`DatabaseClass.java`

`ISBN.java`

`ISBNRepository.java`

`html.html`

`regist.html`