Einführung

Hallo, mein Name ist @ Ikuto19, ein Student, der Programmieren studiert. Dieses Mal beginne ich mit Fortsetzung vom letzten Mal (Teil 1). Nachdem ich die vorherige Überprüfung kurz erläutert habe, werde ich das Erstellungsverfahren erläutern und die Anwendung tatsächlich erstellen.

Letzte Überprüfung und Kommentar

Über das letzte Mal

In Teil 1 haben wir eine Test-App erstellt und veröffentlicht, um Ihnen den Ablauf und die Vorbereitung für die Erstellung einer Buchverwaltungs-App zu erleichtern. Insbesondere habe ich Tools zur Verwendung des Spring Framework installiert und ein Konto bei Heroku registriert.

Vorsichtsmaßnahmen danach! !!

Ich werde die Rolle von Code und Anmerkungen in diesem Teil erläutern, aber dies ist mein erstes Mal, dass ich das Spring Framework berühre. Kurz gesagt, ich bin ein Anfänger, daher kann ich es nicht im Detail erklären. Es ist nur eine grobe Erklärung meiner Interpretation, also nehmen Sie es bitte nicht für dieselben Anfänger, die sich diesen Artikel ansehen. Es passt ungefähr, aber ich denke, es kann im engeren Sinne anders sein, also überprüfen Sie es bitte selbst. Im Gegenteil, wenn Sie eine fortgeschrittene Person sind, weisen Sie bitte immer mehr darauf hin, wie ich letztes Mal sagte.

Erläuterung des vorherigen Codes

App.java Diese App.java führt die Web-App aus. Wenn Sie diese Hauptfunktion nicht einschließen, wird die App nicht gestartet. Der Klassenname kann alles sein, aber ich habe ihn App genannt. Wenn Sie den Klassennamen ändern möchten, ändern Sie den Inhalt "App.class" in "class name.class".

Über @ SpringBootApplication, [Japanische Übersetzung des Frühlingsdokuments](https://spring.pleiades.io/spring-boot/docs/current/reference/html/using-spring-boot.html#using-boot-using- In "6. @ SpringBootApplication Annotation" "von springbootapplication-annotation) wurde es wie folgt geschrieben.

@EnableAutoConfiguration: Aktiviert den automatischen Konfigurationsmechanismus für Spring Boot @ComponentScan: Aktivieren Sie @Component Scan für das Paket, in dem sich Ihre Anwendung befindet (siehe Best Practices). @Configuration: Sie können zusätzliche Beans im Kontext registrieren und zusätzliche Konfigurationsklassen importieren.

Als ich alles zusammen interpretierte, dachte ich, dass es so aussehen würde.

@ SpringBootApplication → Eine Zusammenfassung der folgenden drei Funktionen
@ EnableAutoConfiguration → Gibt an, ob die Konfiguration automatisch erfolgen soll
@ ComponentScan → Komponentenscan durchführen
@ Configuration → Bei Bean registrieren oder Klasse importieren

`App.java`


package com.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

IndexController.java IndexController.java ist der Controller im MVC-Modell. Der Controller steuert Modell und Ansicht basierend auf Benutzereingaben, aber dieses Mal versuche ich, index.html anzuzeigen, wenn die URL "/" lautet. Mit "model.setAttribute (" message ", message)" können Sie die in message in der aufgerufenen HTML-Datei gespeicherte Zeichenfolge verarbeiten.

@ Controller → Wird der Klasse gewährt, die Controller wird
Stellen Sie eine GET-Anfrage an @GetMapping (" (URL) ") → "(URL)"

`IndexController.java`


package com.app.controller;

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

@Controller
public class IndexController {
	
	@GetMapping("/")
	public String getIndexPage(Model model) {
		String message = "Hello, World!!";
		model.addAttribute("message",message);
		return "index";
	}
}

index.html

Ich habe den Teil von "xmlns: th = ~" interpretiert, um die Template-Engine Thymeleaf zu verwenden. Dies ermöglicht es, Werte und Zeichenfolgen vom Controller auch in HTML zu verarbeiten. Der Inhalt (Zeichenfolge) der in "th: text =" $ {message} "gespeicherten Nachricht kann angezeigt werden.

`index.html`


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<head>
<title>Test App</title>
</head>
<body>
	<p th:text="${message}"></p>
</body>
</html>

Procfile

Java: Ich habe versucht, die Spring Boot-App von Heroku bereitzustellen Ich habe den Schreibstil dieser Person nachgeahmt. Ich habe nach \ $ JAVA_OPTS und --server.port = $ PORT gesucht, aber nicht viele Treffer erhalten. Grob gesagt denke ich, soweit ich The Procfile von Heroku Dev Center sehen kann, dass ich "App type: Execution command" schreiben sollte. Ich werde.

`Procfile`


web: java $JAVA_OPTS -jar target/*.jar --server.port=$PORT

Erstellungsverfahren

Erstellen Sie ein Projekt
Implementierung des Startbildschirms
Implementierung des Anmeldebildschirms und des Bildschirmübergangs durch DB-Authentifizierung
Implementierung des Bildschirmübergangs vom Startbildschirm zur Seite für die Buchsuche, die Anzeige von Buchinformationen und die Anzeige von Kalligraphien
Implementierung einer Funktion zum Registrieren / Löschen aus der Datenbank nach der Suche nach Büchern
Wenden Sie CSS an
Funktionsprüfung

Projekterstellung

Erstellen Sie das Projekt wie beim letzten Mal. Der Projektname lautet "BookManagement-webapp" und wird ansonsten mit den gleichen Einstellungen wie beim letzten Mal erstellt. Löschen Sie jedoch BookManagementWebappApplication.java.

Implementierung des Startbildschirms

Neue Datei erstellen

App.java Erstellen Sie die folgende App.java und platzieren Sie sie im Paket "com.app". Wie bereits erläutert, startet die Ausführung dieser Klasse die Spring-Anwendung.

`App.java`


package com.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

index.html Erstellen Sie im Vorlagenordner die Datei index.html, die als Startbildschirm dient. Der Startbildschirm hat folgende Funktionen.

Erfassung von Buchinformationen durch API (operateCollate.html)
Erfassen und Anzeigen von Buchinformationen in der Datenbank (operateCheck.html)
Holen Sie sich das Bild der Datenbank und zeigen Sie es an (operateCheck.html)

`indexhtml`


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<head>
<title>Buchverwaltungs-App</title>
</head>
<body>
	<div class="main_container">
		<div class=title>
			<h1>Buchverwaltungs-Webanwendung</h1>
		</div>
		<div class="middle_container">
			<div class="contains collate">
				<form method="get" action="operateCollate">
					<input type="text" class="texts" name="isbn" value=""
						placeholder="ISBN-Code"> <input class="submit"
						type="submit" value="Buchabgleich">
				</form>
			</div>
			<div class="contains flexbox">
				<form method="get" action="operateCheck">
					<input class="submit" type="submit" value="Buchinformationsanzeige">
				</form>
				<form method="get" action="operateCover">
					<input class="submit" type="submit" value="Buchumschlaganzeige">
				</form>
			</div>
		</div>
	</div>
</body>
</html>

Ausführungsbestätigung

Sie sollten so etwas wie das Folgende sehen. スクリーンショット 2020-07-29 16.49.38.png

Implementierung der Anmeldung mithilfe der DB-Authentifizierung von Spring Security

Als Nächstes implementieren wir die Anmeldung durch DB-Authentifizierung von Spring Security. Die zu ändernden Dateien (blau) und die hinzuzufügenden Dateien (rot) lauten wie folgt. Diese Anmeldeauthentifizierung lautet Implementierung der Authentifizierungsfunktion in Spring Security ( ~ Implementierung der Authentifizierungsfunktion in Spring Security ③ Auf / 3047949cb6018d2453dc) wird verwiesen, und es wird nach Bedarf geändert und erstellt. Ich denke, der Code ist fast der gleiche. Außerdem gehören die Kommentare in jeder Datei der Person, die diesen Artikel geschrieben hat, also habe ich sie gelöscht. Lesen Sie diesen Artikel, wenn Sie die Kommentare sehen möchten. スクリーンショット 2020-07-29 23.24.43.png

Neue Datei erstellen / vorhandene Datei ändern

WebSecurityConfig.java Sicherheitseinstellungen werden in dieser Klasse vorgenommen. configure - Die WebSecurity-Konfigurationsmethode schließt erforderliche Dateien und Ordner von der Authentifizierung aus. In der configure-Methode von configure-HttpSecurity werden Bildschirmübergänge und zugängliche Benutzer festgelegt, wenn die Authentifizierung erfolgreich ist oder fehlschlägt. Die Konfigurationsmethode des letzten configure-AuthenticationManagerBuilder wird zum Konfigurieren der Authentifizierung verwendet.

Anmerkung
@ EnableWebSecurity → Spring Security aktivieren
@ Autowired → Objekte automatisch speichern
@ Bean → Registrieren Sie sich im DI-Container
@ Override → Zeigt Override an
configure-WebSecurity → Webweite Sicherheitseinstellungen
configure-HttpSecurity → Sicherheitseinstellungen für jede URL
configure-AuthenticationManagerBuilder → Authentifizierungsbezogene Einstellungen

`WebSecurityConfig.java`


package com.app.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.provisioning.InMemoryUserDetailsManager;

import com.app.service.UserDetailsServiceImpl;

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

	@Autowired
	private UserDetailsServiceImpl userDetailsService;

	//Passwortverschlüsselung
	@Bean
	public BCryptPasswordEncoder passwordEncoder() {
		BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder();
		return bCryptPasswordEncoder;
	}

	//Es ist möglich, CSS, Javascript usw. und externe Bilddateien zu verarbeiten.
	@Override
	public void configure(WebSecurity web) throws Exception {
		web.ignoring().antMatchers(
				"/images/**",
				"/css/**",
				"/js/**"
				);
	}

	@Override
	protected void configure(HttpSecurity http) throws Exception{
			http
				.authorizeRequests()
				.anyRequest().authenticated()
				.and()
			.formLogin()
				.loginPage("/login") //URL der Anmeldeseite
				.loginProcessingUrl("/login")
				.usernameParameter("username")
				.passwordParameter("password")
				.defaultSuccessUrl("/index", true) //URL durch erfolgreiche Authentifizierung überführt
				.failureUrl("/login?error") //URL, die aufgrund eines Authentifizierungsfehlers wechselt
				.permitAll() //Alle Benutzer können eine Verbindung herstellen
				.and()
			.logout()
				.logoutUrl("/logout") //URL der Abmeldeseite
				.logoutSuccessUrl("/login?logout") //URL nach erfolgreicher Abmeldung
				.permitAll();
	}
	
	@Autowired
    public void configure(AuthenticationManagerBuilder auth) throws Exception{
        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
    }
}

LoginController.java Wenn die URL "/ login" lautet, wird login.html angezeigt.

`LoginController.java`


package com.app.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class LoginController {
	@GetMapping("/login")
	public String getSignUp(Model model) {
		return "login";
	}
}

LoginUser.java

Anmerkung
@ Entity → Grant an Entity-Klasse
@Table (name =" (Tabellenname) ") → Geben Sie den Tabellennamen der Datenbank an, auf die zugegriffen werden soll
@Column (name =" Spaltenname ") → Geben Sie den Spaltennamen der Tabelle an
@ Id → Primärschlüssel (diesmal Integer-Typ)

`LoginUser.java`


package com.app.entity;

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

@Entity
@Table(name = "user")
public class LoginUser {

    @Column(name = "user_id")
    @Id
    private Long userId;

    @Column(name = "user_name")
    private String userName;

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

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

	public Long getUserId() {
		return userId;
	}

	public void setUserId(Long userId) {
		this.userId = userId;
	}
}

LoginUserDao.java Greifen Sie mit der findUser-Methode auf die Datenbank zu und geben Sie das Benutzerobjekt mit dem entsprechenden Benutzernamen zurück.

@ Repository → Wird der Klasse gewährt, die auf die Datenbank zugreift

`LoginUserDao.java`


package com.app.repository;

import javax.persistence.EntityManager;

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

import com.app.entity.LoginUser;

@Repository
public class LoginUserDao {

    @Autowired
    EntityManager em;

    public LoginUser findUser(String userName) {

        String query = "";
        query += "SELECT * ";
        query += "FROM user ";
        query += "WHERE user_name = :userName ";

        return (LoginUser)em.createNativeQuery(query, LoginUser.class).setParameter("userName", userName).getSingleResult();
    }
}

UserRepository.java

`UserRepository.java`


package com.app.repository;

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

import com.app.entity.LoginUser;

/*
 *<Entitätsklasse,ID-Typ>
 */
@Repository
public interface UserRepository extends JpaRepository<LoginUser, Integer>{}

UserDetailsServiceImpl.java

@ Service → Wird der Klasse gewährt, die die Geschäftslogik ausführt

`UserDetailsServiceImpl.java`


package com.app.service;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;

import com.app.repository.LoginUserDao;
import com.app.entity.LoginUser;

@Service
public class UserDetailsServiceImpl implements UserDetailsService{

    @Autowired
    private LoginUserDao userDao;

    @Override
    public UserDetails loadUserByUsername(String userName) throws UsernameNotFoundException {

        LoginUser user = userDao.findUser(userName);
        if (user == null) throw new UsernameNotFoundException(userName + "Existiert nicht in der Datenbank.");

        List<GrantedAuthority> grantList = new ArrayList<GrantedAuthority>();
        GrantedAuthority authority = new SimpleGrantedAuthority("USER");
        grantList.add(authority);
        
        BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
        UserDetails userDetails = (UserDetails)new User(user.getUserName(), encoder.encode(user.getPassword()),grantList);

        return userDetails;
    }
}

index.html Platzieren Sie Folgendes am unteren Rand des div-Tags "class =" enthält flexbox "".

`index.html`


<form  method="post" id="logout" th:action="@{/logout}">
		<button type="submit">Ausloggen</button>
</form>

`login.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="UTF-8">
<title>LoginPage</title>
</head>
<body>
	<div class="main_container">
		<p th:if="${param.error}" class="message">* Benutzername oder Passwort ist unterschiedlich</p>
		<p th:if="${param.logout}" class="message">* Abgemeldet</p>
		<div class="login_container">
			<form th:action="@{/login}" method="post">
				<div class="buttons username">
					<i class="fas fa-users"></i> <input class="texts" type="text" name="username"
						placeholder="username" />
				</div>
				<div class="buttons pass">
					<i class="fas fa-lock"></i> <input class="texts" type="password" name="password"
						placeholder="password" />
				</div>
				<div class="submitButton">
					<input class="submit" type="submit" value="Einloggen" />
				</div>
			</form>
		</div>
	</div>
</body>
</html>

application.properties

`application.properties`


spring.datasource.url=jdbc:mysql://localhost:3306/manageBook
spring.datasource.username=(MySQL-Benutzername)
spring.datasource.password=(MySQL-Passwort)
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.database=MYSQL
spring.jpa.hibernate.ddl-auto=update

pom.xml Das Folgende wird zusätzlich beschrieben.

`pom.xml`


<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
	<groupId>mysql</groupId>
	<artifactId>mysql-connector-java</artifactId>
	<scope>runtime</scope>
</dependency>

Erstellen einer Datenbank

Führen Sie den folgenden Befehl auf dem installierten MySQL aus.

`terminal`


$ mysql -u (MySQL-Benutzername) -p
Enter password: (MySQL-Passwort)
mysql> create database manageBook;
mysql> use manageBook
mysql> create table user(user_id int auto_increment,user_name varchar(256),password varchar(256),PRIMARY KEY(user_id));
mysql> insert user value(1,"(Lieblingsname)","(Lieblingspasswort)");
mysql> select * from user;

Wenn Sie den Inhalt der Tabelle mit dem letzten "select * from user;" überprüfen, wird Folgendes angezeigt. Wenn Sie dies bestätigen können, melden Sie sich mit dem Befehl quit ab.

`terminal`


mysql> select * from user;
+---------+-----------+---------------+
| user_id | user_name | password      |
+---------+-----------+---------------+
|       1 |(Lieblingsname) | (Lieblingspasswort)|
+---------+-----------+---------------+
1 row in set (0.04 sec)

mysql> quit;
Bye

Ausführungsbestätigung

Gehen Sie nach dem Ausführen der Spring-Anwendung zu http: // localhost: 8080 / login, um dies zu überprüfen. Sie können sich wahrscheinlich anmelden.

Am Ende

Das ist alles für diese Zeit. Das nächste Mal werden wir am Ende den Übergang vom Startbildschirm und die Funktionen für den DB-Zugriff implementieren. Weiter zum nächsten Mal (Teil 3)> Bald posten

Referenzseite

Ein rudimentärer Fehler, der mit Spring Boot | Engineer 2 Nensei no Kiroku nicht gescannt werden konnte

Implementierte Authentifizierungsfunktion mit Spring Security ① --Qiita

Hinweise zum Berühren von Spring Boot --Qiita

Spring Boot Annotations

So definieren Sie eine Bean mithilfe der Konfigurationsklasse in Spring Boot - Angemessener Code

Spring Security Usage Memo Basic / Mechanismus - Qiita

Web-Sicherheit mit Spring Boot (1/2) einstellen: CodeZine

JPA-Anmerkung (Java Persistence API)

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

Einführung

Letzte Überprüfung und Kommentar

Über das letzte Mal

Vorsichtsmaßnahmen danach! !!

Erläuterung des vorherigen Codes

App.java

IndexController.java

index.html

Procfile

Erstellungsverfahren

Projekterstellung

Implementierung des Startbildschirms

Neue Datei erstellen

App.java

indexhtml

Ausführungsbestätigung

Implementierung der Anmeldung mithilfe der DB-Authentifizierung von Spring Security

Neue Datei erstellen / vorhandene Datei ändern

WebSecurityConfig.java

LoginController.java

LoginUser.java

LoginUserDao.java

UserRepository.java

UserDetailsServiceImpl.java

index.html

login.html

application.properties

pom.xml

Erstellen einer Datenbank

terminal

terminal

Ausführungsbestätigung

Am Ende

Referenzseite

`App.java`

`IndexController.java`

`index.html`

`Procfile`

`App.java`

`indexhtml`

`WebSecurityConfig.java`

`LoginController.java`

`LoginUser.java`

`LoginUserDao.java`

`UserRepository.java`

`UserDetailsServiceImpl.java`

`index.html`

`login.html`

`application.properties`

`pom.xml`

`terminal`

`terminal`