Beispiel für die Injektion von Abhängigkeiten durch den Konstruktor Spring-Sicherheit

Spring Angular CRUD-Anwendung

In diesem Abschnitt werden wir eine CRUD (erstellen-Lesen-Aktualisieren-Löschen) Webanwendung. Diese Anwendung enthält ein Studentenformular, das CRUD-Funktionen wie Hinzufügen, Anzeigen, Löschen und Aktualisieren von Studenten enthält. In dieser Integration verwenden wir Spring Boot für die Backend-Teile und Angular für die Frontend-Teile.

Arbeitsanwendung

Sobald wir die Anwendung auf dem Server bereitstellen, wird im Webbrowser ein Studententable generiert. Dieses Formular hilft beim Hinzufügen und Anzeigen von Studenten. Nachdem Sie auf den Link 'Studenten hinzufügen' geklickt haben, wird die Seite zu einem Formular zur Erstellung eines Studententables umgeleitet. Hier können wir die erforderlichen Details eingeben und absenden, um einen Studenten hinzuzufügen. Mit dem Link 'Studenten anzeigen' können wir die Details der bestehenden Studenten erhalten. Hier enthält jeder Student auch Links zum Aktualisieren und Löschen. Daher können wir die Details der Studenten aktualisieren und sie aus der Datenbank löschen. Nachdem die Arbeit abgeschlossen ist, geben Sie die URL http: im Webbrowser an//localhost: 4200/.

Zu verwendende Werkzeuge

Verwenden Sie jede IDE, um Spring- und Hibernate-Projekte zu entwickeln. Dies könnte STS sein./Eclipse/Netbeans. Hier verwenden wir STS (Spring Tool Suite). für die Datenbank MySQL. Verwenden Sie jede IDE, um Angular-Projekte zu entwickeln. Es könnte Visual Studio Code sein/Sublime. Hier verwenden wir Visual Studio Code. Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Die von uns verwendeten Technologien

Hier verwenden wir die folgenden Technologien:

SpringBoot2 Hibernate5 Hier,6 MYSQL

Erstellen Sie die Datenbank

Lassen Sie uns die Datenbank erstellen indigo 。Es ist nicht erforderlich, Tabellen zu erstellen, da Hibernate dies automatisch erledigt.

Spring-Modul

Lassen Sie uns schauen, welche Verzeichnisstruktur wir bei Spring Boot befolgen müssen:

Um eine CRUD-Anwendung zu entwickeln, führen Sie die folgenden Schritte aus: -

Fügen Sie die Abhängigkeiten in die Datei pom.xml hinzu.

Beispiel

<?xml version="1.0"　encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"　xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0　http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.4.RELEASE</version>
		<relativePath/>　<!--　lookup parent from repository　-->
	</parent>
	<groupId>com.main</groupId>
	<artifactId>Student</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>Student</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
		　　　　<groupId>org.springframework.boot</groupId>
		　　　　<artifactId>spring-boot-devtools</artifactId>
　　　　　　　　　　　　<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

Erstellen Sie eine Konfigurationsklasse
Wir führen eine auf Kommentare basierende Konfiguration aus, anstatt XML. Daher erstellen wir eine Klasse Config.java und spezifizieren darin die erforderlichen Konfigurationen. Es gibt jedoch auch eine Konfigurationsklasse StudentApplication.java. Diese Klasse wird automatisch durch Spring Boot bereitgestellt.

Config.java

Beispiel

package config;
import java.util.Properties;
import javax.sql.DataSource;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.orm.jpa.HibernateJpaAutoConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.ComponentScans;
import org.springframework.context.annotation.Configuration;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.orm.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.LocalSessionFactoryBean;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
@Configuration
@EnableTransactionManagement
@EnableAutoConfiguration(exclude = { HibernateJpaAutoConfiguration.class}),
@ComponentScans(value = { @ComponentScan("boot.entry")},
	　　　　　　@ComponentScan("Model"),
	　　　　　　@ComponentScan("Controller"),
	　　　　　　@ComponentScan("DAO"),
	　　　　　　@ComponentScan("Miscellaneous"),
	　　　　　　@ComponentScan("Service")}
public class Config {
	　@Value("${db.driver}")
	　　　　private String DB_DRIVER;
	　　　　@Value("${db.password}")
	　　　　private String DB_PASSWORD;
	　　　　@Value("${db.url}")
	　　　　private String DB_URL;
	　　　　@Value("${db.username}")
	　　　　private String DB_USERNAME;
	　　　　@Value("${hibernate.dialect}")
	　　　　private String HIBERNATE_DIALECT;
	　　　　@Value("${hibernate.show_sql}")
	　　　　private String HIBERNATE_SHOW_SQL;
	　　　　@Value("${hibernate.hbm}})2ddl.auto")
	　　　　private String HIBERNATE_HBM2DDL_AUTO;
	　　　　@Value("${entitymanager.packagesToScan}")
	　　　　private String ENTITYMANAGER_PACKAGES_TO_SCAN;
	　　　　@Bean
	　　　　public LocalSessionFactoryBean sessionFactory() {
	　　　　　　　　LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
	　　　　　　　　sessionFactory.setDataSource(dataSource());
	　　　　　　　　sessionFactory.setPackagesToScan(ENTITYMANAGER_PACKAGES_TO_SCAN);
	　　　　　　　　Properties hibernateProperties = new Properties();
	　　　　　　　　hibernateProperties.put("hibernate.dialect", HIBERNATE_DIALECT);
	　　　　　　　　hibernateProperties.put("hibernate.show_sql", HIBERNATE_SHOW_SQL);
	　　　　　　　　hibernateProperties.put("hibernate.hbm2ddl.auto", HIBERNATE_HBM2DDL_AUTO);
	　　　　　　　　sessionFactory.setHibernateProperties(hibernateProperties);
	　　　　　　　　return sessionFactory;
	　　　　}
	　　　　@Bean
	　　　　public DataSource dataSource() {
	　　　　　　　　DriverManagerDataSource dataSource = new DriverManagerDataSource();
	　　　　　　　　dataSource.setDriverClassName(DB_DRIVER);
	　　　　　　　　dataSource.setUrl(DB_URL);
	　　　　　　　　dataSource.setUsername(DB_USERNAME);
	　　　　　　　　dataSource.setPassword(DB_PASSWORD);
	　　　　　　　　return dataSource;
	　　　　}
	　　　　@Bean
	　　　　public HibernateTransactionManager transactionManager() {
	　　　　　　　　HibernateTransactionManager txManager = new HibernateTransactionManager();
	　　　　　　　　txManager.setSessionFactory(sessionFactory().getObject());
	　　　　　　　　return txManager;
	　　　　}
	　　　　
	　　　　@Bean
	　　　　public InternalResourceViewResolver jspViewResolver() {
	　　　　　　　　InternalResourceViewResolver resolver = new InternalResourceViewResolver();
	　　　　　　　　resolver.setPrefix("/views/);
	　　　　　　　　resolver.setSuffix(".jsp");
	　　　　　　　　return resolver;
	　　　　}　
	　　　
	　　　
	　　　
	}

StudentApplication.java

Beispiel

package config;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class StudentApplication {
	public static void main(String[] args) {
		SpringApplication.run(StudentApplication.class, args);
	}
}

Erstellen Sie die Entitätsklasse
Hier werden wir eine Entity erstellen/POJO (einfaches altes Java-Objekt) Klasse.

Student.java

Beispiel

package Model;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name="student")
public class Student {
	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	private int student_id;
	private String student_name;
	private String student_email;
	private String student_branch;
	public int getStudent_id() {
		return student_id;
	}
	public void setStudent_id(int student_id) {
		this.student_id = student_id;
	}
	public String getStudent_name() {
		return student_name;
	}
	public void setStudent_name(String student_name) {
		this.student_name = student_name;
	}
	public String getStudent_email() {
		return student_email;
	}
	public void setStudent_email(String student_email) {
		this.student_email = student_email;
	}
	public String getStudent_branch() {
		return student_branch;
	}
	public void setStudent_branch(String student_branch) {
		this.student_branch = student_branch;
	}
}

Erstellen der DAO-Oberfläche
Hier erstellen wir die DAO-Oberfläche, um Operationen mit der Datenbank durchzuführen.

Student_DAO.java

Beispiel

package DAO;
import java.util.List;
import Model.Student;
public interface Student_DAO {
	public boolean saveStudent(Student student);
	public List<Student> getStudents();
	public boolean deleteStudent(Student student);
	public List<Student> getStudentByID(Student student);
	public boolean updateStudent(Student student);
}

Erstellen Sie die DAO-Schnittstellenimplementierungsklasse

Student_DAO_Imp.java

Beispiel

package DAO;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import Model.Student;
@Repository
public class Student_DAO_Imp implements Student_DAO {
	@Autowired
	private SessionFactory sessionFactory;
	@Override
	public boolean saveStudent(Student student) {
		boolean status = false;
		try {
			sessionFactory.getCurrentSession().save(student);
			status = true;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return status;
	}
	@Override
	public List<Student> getStudents() {
		Session currentSession = sessionFactory.getCurrentSession();
		Query<Student> query = currentSession.createQuery("from Student", Student.class);
		List<Student> list = query.getResultList();
		return list;
	}
	@Override
	public boolean deleteStudent(Student student) {
		boolean status = false;
		try {
			sessionFactory.getCurrentSession().delete(student);
			status = true;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return status;
	}
	@Override
	public List<Student> getStudentByID(Student student) {
		Session currentSession = sessionFactory.getCurrentSession();
		Query<Student> query = currentSession.createQuery("from Student where student_id=:student_id", Student.class);
		query.setParameter("student_id", student.getStudent_id());
		List<Student> list = query.getResultList();
		return list;
	}
	@Override
	public boolean updateStudent(Student student) {
		boolean status = false;
		try {
			sessionFactory.getCurrentSession().update(student);
			status = true;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return status;
	}
}

Erstellen Sie die Service-Schicht-Schnittstelle

Hier erstellen wir eine Service-Schicht-Schnittstelle, die als Brücke zwischen DAO und Entity-Klasse dient.

Student_Service.java

Beispiel

package Service;
import java.util.List;
import Model.Student;
public interface Student_Service {
	public boolean saveStudent(Student student);
	public List<Student> getStudents();
	public boolean deleteStudent(Student student);
	public List<Student> getStudentByID(Student student);
	public boolean updateStudent(Student student);
}

创建服务层实现类

Student_Service_Imp.java

Beispiel

package Service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import DAO.Student_DAO;
import Model.Student;
@Service
@Transactional
public class Student_Service_Imp implements Student_Service {
　
	@Autowired
	private Student_DAO studentdao;
	@Override
	public boolean saveStudent(Student student) {
		return studentdao.saveStudent(student);
	}
	@Override
	public List<Student> getStudents() {
		return studentdao.getStudents();
	}
	@Override
	public boolean deleteStudent(Student student) {
		return studentdao.deleteStudent(student);
	}
	@Override
	public List<Student> getStudentByID(Student student) {
		return studentdao.getStudentByID(student);
	}
	@Override
	public boolean updateStudent(Student student) {
		return studentDao.updateStudent(student);
	}
}

创建控制器类

Controller.java

Beispiel

package Controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import Model.Student;
import Service.Student_Service;
@RestController
@CrossOrigin(origins="http://localhost:4200")
@RequestMapping(value="/api")
public class Controller {
	@Autowired
	private Student_Service studentService;
	@PostMapping("save")-student")
	public　boolean　saveStudent(@RequestBody　Student　student)　{
		　return　studentservice.saveStudent(student);
	}
	@GetMapping("students-list")
	public　List<Student>　allstudents()　{
		　return　studentservice.getStudents();
	}
	@DeleteMapping("delete-student/{student_id}"
	public　boolean　deleteStudent(@PathVariable("student_id")　int　student_id,Student　student)　{
		student.setStudent_id(student_id);
		return　studentservice.deleteStudent(student);
	}
	@GetMapping("student/{student_id}"
	public　List<Student>　allstudentByID(@PathVariable("student_id")　int　student_id,Student　student)　{
		　student.setStudent_id(student_id);
		　return　studentservice.getStudentByID(student);
	}
	@PostMapping("update-student/{student_id}"
	public　boolean　updateStudent(@RequestBody　Student　student,@PathVariable("student_id")　int　student_id)　{
		student.setStudent_id(student_id);
		return　studentservice.updateStudent(student);
	}
}

Bearbeiten Sie die Datei application.properties
Hier bearbeiten wir src/main/resources Verzeichnis application.properties Datei. Nachfolgende Datei enthält Konfigurationsattribute.

application.properties

Beispiel

#　Database
db.driver=　com.mysql.jdbc.Driver
db.url=　jdbc:mysql://localhost:3306/indigo
db.username=root
db.password=
# Hibernate
# Hibernate5hibernate.dialect=org.hibernate.dialect.MySQL
Dialect
hibernate.show_sql=true2hibernate.hbm
ddl.auto=update

entitymanager.packagesToScan=Model

Angular-Modul

Lassen Sie uns die Verzeichnisstruktur von Angular betrachten:

Erstellen Sie ein neues Angular-Projekt

Erstellen Sie ein neues Angular-Projekt mit den folgenden Befehlen:

ng neues Angular Hier, Angular

ist der Name des Projekts.

Installieren Sie den Bootstrap CSS-Framework mit den folgenden Befehlen

npm install [email protected] --save

Jetzt, in style.css, fügen Sie die folgenden Code-Dateien hinzu.

Beispiel

@import "~bootstrap/dist/css/bootstrap.css";

Installieren Sie Angular-DataTable

Installieren Sie Angular-Datenbank mit den folgenden Befehlen im Projekt.

npm install Angular-datatable --save

muss enthalten app.module.ts Das DataTableModule im Import-Array der Datei .

Generieren Sie Komponenten
Öffnen Sie das Projekt in Visual Studio und verwenden Sie die folgenden Befehle, um Angular-Komponenten zu generieren:
ng gc AddStudent
ng gc StudentList

Wir verwenden auch die folgenden Befehle, um Dienstklasse zu erstellen: -

ng gs student

Bearbeiten app.module.ts Datei Importieren Sie die Routen-Hier importieren wir die Routen-Datei (app-routing.module.ts) und geben es im imports-Array an. Importieren Sie ReactiveFormsModule -Hier importieren wir ReactiveFormsModule Für das Reaktionsformat und geben es im imports-Array an. Importieren Sie HttpModule -Hier importieren wir für Server-Anfragen HttpModule und geben es im import-Array an. Dienstklasse registrieren-Hier haben wir von der Dienstklasse im Anbieter-Array gesprochen.

Beispiel

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from '.',/app-routing.module';
import { AppComponent } from '.'/app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { DataTablesModule } from 'angular-datatables';
import { StudentListComponent } from './student-list/student-list.component';
import { AddStudentComponent } from './add-student/add-student.component';
@NgModule({
　　declarations: [
　　　　AppComponent,
　　　　StudentListComponent,
　　　　AddStudentComponent,
　　],
　　imports: [
　　　　BrowserModule,
　　　　AppRoutingModule,
　　　　FormsModule,
　　　　ReactiveFormsModule,
　　　　HttpClientModule,
　　　　DataTablesModule
　　],
　　providers: [],
　　bootstrap: [AppComponent]
})
export class AppModule { }

Bearbeiten app-routing.module.ts Datei

Beispiel

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentListComponent } from './student-list/student-list.component';
import { AddStudentComponent } from './add-student/add-student.component';
const routes: Routes = [
　　{ path: '', redirectTo: 'view-student', pathMatch: 'full' },
　　{ path: 'view-student', component: StudentListComponent },
　　{ path: 'add-student', component: AddStudentComponent },
]);
@NgModule({
　　imports: [RouterModule.forRoot(routes)],
　　exports:　[RouterModule]
})
exports: [RouterModule]

Bearbeiten export class AppRoutingModule { } Datei

Beispiel

　　　　app.component.html-<div class="container
　　　　fluid">-<nav class="navbar navbar-expand-sm bg-dark navbar
　　　　　　　　dark">-<ul class="navbar
　　　　　　　　　　primary active" role="button"> Ansicht von Studenten <-nav">
　　　　　　　　　　　　item">-<a href="add-student" class="nav-<a routerLink="view/a> Hinzufügen von Studenten <
　　　　　　　　　　</li>　
　　　　　　　　　　primary active" role="button"> Ansicht von Studenten <-<li class="nav
　　　　　　　　　　　　item">-<a href="add-student" class="nav-link" class="btn btn/a> Hinzufügen von Studenten <
　　　　　　　　　　</li>　　　　　　　　　　
　　　　　　　　</ul>
　　　　　　</nav>　　　
　　　　　　　　<router-outlet></router-outlet>
　　　　</div>

Erstellen Student.ts Klasse

Lassen Sie uns den folgenden Befehl verwenden, um den Kurs zu erstellen: -

ng g class Student

Jetzt, in Student Das Feld muss in der Klasse angegeben werden.

Beispiel

export class Student {
　　　　student_id: number;
　　　　student_name: String;
　　　　student_email: String;
　　　　student_branch: String;
}

Der Zweck dieser Klasse ist es, die angegebenen Felder mit den Feldern der Spring-Entitätsklasse zu verknüpfen.

Bearbeiten student.service.ts Datei

Beispiel

import { Injectable } from '@angular'/core';
import { HttpClient } from '@angular'/common/http';
import { Observable } from 'rxjs';
@Injectable({
　　providedIn: 'root'
})
export class StudentService {
　　private baseUrl = 'http:';//localhost:8080/api/';
　　constructor(private http: HttpClient) {}
　　getStudentList(): Observable<any> {
　　　　return this.http.get(`${this.baseUrl}`+'students-list');
　　}
　　createStudent(student: object): Observable<object> {
　　　　return this.http.post(`${this.baseUrl}`+'save-student', student);
　　}
　　deleteStudent(id: number): Observable<any> {
　　　　return this.http.delete(`${this.baseUrl}`,/delete-student/${id}`, { responseType: 'text' });
　　}
　　getStudent(id: number): Observable<Object> {
　　　　return this.http.get(`${this.baseUrl}`,/student/${id}`);
　　}
　　updateStudent(id: number, value: any): Observable<Object> {
　　　　return this.http.post(`${this.baseUrl}`,/update-student/${id}`, value);
　　}
　　
}

Bearbeiten add-student.component.ts Datei

Beispiel

import { Component, OnInit } from '@angular/core';
import { StudentService } from '../student.service';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Student } from '../student';
@Component({
　　selector: 'app'-add-student',
　　templateUrl: './add-student.component.html',
　　styleUrls: ['./add-student.component.css'
})
export class AddStudentComponent implements OnInit {
　　constructor(private studentservice: StudentService) { }
　　student: Student = new Student();
　　submitted = false;
　　ngOnInit() {
　　　　this.submitted=false;
　　}
　　studentsaveform = new FormGroup({
　　　　student_name: new FormControl('', [Validators.required, Validators.minLength(5) ),
　　　　student_email: new FormControl('', [Validators.required, Validators.email]),
　　　　student_branch: new FormControl()
　　});
　　saveStudent(saveStudent){
　　　　this.student=new　Student();　　　
　　　　this.student.student_name=this.StudentName.value;
　　　　this.student.student_email=this.StudentEmail.value;
　　　　this.student.student_branch=this.StudentBranch.value;
　　　　this.submitted = true;
　　　　this.save();
　　}
　　
　　save() {
　　　　this.studentservice.createStudent(this.student)
　　　　　　.subscribe(data => console.log(data), error => console.log(error));
　　　　this.student = new Student();
　　}
　　get　StudentName(){
　　　　return this.studentsaveform.get('student_name');
　　}
　　get　StudentEmail(){
　　　　return this.studentsaveform.get('student_email');
　　}
　　get　StudentBranch(){
　　　　return this.studentsaveform.get('student_branch');
　　}
　　addStudentForm(){
　　　　this.submitted=false;
　　　　this.studentsaveform.reset();
　　}
}

Bearbeiten add-student.component.html Datei

Beispiel

<h3>Erstellen Sie Schüler</h3>
<div class="row">
　　<div class="col-sm-4></div>
　　<div class="col-sm-4" >
　　　　<div [hidden]="submitted" style="width:　400px;">
　　　　　　<form [formGroup]="studentsaveform" #savestudent (ngSubmit)="saveStudent(saveStudent)">　　<div class="form-group">
　　　　　　　　　　　　　　<label for="name">Student Name</label>/label>
　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_name" data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　data-placement="rechts" title="Eingabe Name des Schülers" >
　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif " = "(StudentName.touched) && (StudentName.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentName.errors.required">Name des Schülers ist erforderlich</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif " = "StudentName.errors.minlength"　
　　　　　　　　　　　　　　　　　　　　　　　　MinLength Fehler　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label for="name">Student Email</label>/label>
　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_email"　
　　　　　　　　　　　　　　　　data-toggle=" Tooltip " data-placement="rechts" title="Eingabe E-Mail des Schülers">
　　　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif="(StudentEmail.touched) && (StudentEmail.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentEmail.errors.required">Die E-Mail des Schülers ist erforderlich</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif="StudentEmail.errors.email">　
　　　　　　　　　　　　　　　　　　　　　　　　Ungültiges E-Mail-Format　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label for="branch">Fakultät des Schülers</label>
　　　　　　　　　　　　　　　　<select class="form-control" formControlName="student_branch" data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　　　　　　data-placement="right" title="Fakultät des Schülers auswählen">
　　　　　　　　　　　　　　　　　　　　<option value="null">--Fakultät auswählen--</option>
　　　　　　　　　　　　　　　　　　<option value="B-Tech">B-Tech</option>
　　　　　　　　　　　　　　　　　　<option value="BCA">BCA</option>
　　　　　　　　　　　　　　　　　　<option value="MCA">MCA</option>
　　　　　　　　　　　　　　　　　　<option　value="M"}}-Tech">M-Tech</option>
　　　　　　　　　　　　　　　　</select>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<button　type="submit"　class="btn　btn-success">Absenden</button>
　　　　　　</form>
　　</div>
　　</div>
　　<div class="col-sm-4></div>
</div>
<div class="row">
　　<div class="col-sm-4></div>
　　<div class="col-sm-4">
　　　　　　<div [hidden]="!submitted">
　　　　　　　　　<h4>Student erfolgreich hinzugefügt!</h4>
　　　　　　　　　<button (click)="addStudentForm()" class='btn btn-primary'>Mehr Schüler hinzufügen</button>
　　　　　　</div>　　　　　　
　　</div>
　　<div class="col-sm-4></div>
</div>

Klicken Sie hier Schüler hinzufügenwird die folgende Seite generiert:

Nun, geben Sie die erforderlichen Details ein und senden Sie das Formular ab, um den Schüler hinzuzufügen.

Bearbeiten student-list.component.ts Datei

Beispiel

import { Component, OnInit } from '@angular/core';
import { StudentService } from '../student.service';
import { Student } from '../student';
import { Observable, Subject } from "rxjs";
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
　　selector: 'app'-student-list',
　　templateUrl: './student-list.component.html',
　　styleUrls: ['./student-list.component.css
})
export class StudentListComponent implements OnInit {
　constructor(private studentservice: StudentService) { }
　　studentsArray: any[] = [];
　　dtOptions: DataTables.Settings = {};
　　dtTrigger: Subject<any> = new Subject();
　　students: Observable<Student[]>;
　　student: Student = new Student();
　　deleteMessage = false;
　　studentlist: any;
　　isupdated = false;　　　　
　
　　ngOnInit() {
　　　　this.isupdated=false;
　　　　this.dtOptions = {
　　　　　　pageLength:　6,
　　　　　　stateSave: true,
　　　　　　lengthMenu: [[6,　16,　20,　-1], [6,　16,　20, "All"]],
　　　　　　processing: true};　　　
　　　　this.studentservice.getStudentList().subscribe(daten　=>{
　　　　this.students = data;
　　　　this.dtTrigger.next();
　　　　})
　　}
　　
　　deleteStudent(id: number) {
　　　　this.studentservice.deleteStudent(id)
　　　　　　.subscribe(
　　　　　　　　daten　=>　{
　　　　　　　　　　console.log(data);
　　　　　　　　　　this.deleteMessage = true;
　　　　　　　　　　this.studentservice.getStudentList().subscribe(daten　=>{
　　　　　　　　　　　　this.students　=daten
　　　　　　　　　　　　})
　　　　　　　　},
　　　　　　　　Fehler　=>　console.log(Fehler));
　　}
　　updateStudent(id: number){
　　　　this.studentservice.getStudent(id)
　　　　　　.subscribe(
　　　　　　　　daten　=>　{
　　　　　　　　　　this.studentlist = data　　　　　　　　　　　
　　　　　　　　},
　　　　　　　　Fehler　=>　console.log(Fehler));
　　}
　　studentupdateform: new FormGroup({
　　　　student_id: new FormControl(),
　　　　student_name: new FormControl(),
　　　　student_email: new FormControl(),
　　　　student_branch: new FormControl()
　　});
　　updateStu(updstu){
　　　　this.student=new　Student();　
　　　this.student.student_id=this.StudentId.value;
　　　this.student.student_name=this.StudentName.value;
　　　this.student.student_email=this.StudentEmail.value;
　　　this.student.student_branch=this.StudentBranch.value;
　　　console.log(this.StudentBranch.value);
　　　
　　　this.studentservice.updateStudent(this.student.student_id,this.student).subscribe(
　　　　daten　=>　{　　　　　
　　　　　　this.isupdated=true;
　　　　　　this.studentservice.getStudentList().subscribe(daten　=>{
　　　　　　　　this.students　=daten
　　　　　　　　})
　　　　},
　　　　Fehler　=>　console.log(Fehler));
　　}
　　get　StudentName(){
　　　　return　this.studentupdateform.get('student_name');
　　}
　　get　StudentEmail(){
　　　　return　this.studentupdateform.get('student_email');
　　}
　　get　StudentBranch(){
　　　　return　this.studentupdateform.get('student_branch');
　　}
　　get　StudentId(){
　　　　return　this.studentupdateform.get('student_id');
　　}
　　changeisUpdate(){
　　　　this.isupdated=false;
　　}
}

Bearbeiten student-list.component.html Datei

Beispiel

<div　class="panel　panel-Standard">
　　<div class="panel-Überschrift">
　　　　　　<h1　Stil="text-Ausrichten:　Mittelpunkt">Students</h1><br>
　　　　　　<div class="row" [hidden]="!deleteMessage">
　　　　　　　　　　　
　　　　　　　　　　　　　　　　<div class="col-sm-4></div>
　　　　　　　　　　　　　　　　<div class="col-sm-4">
　　　　　　　　　　　　　　　　　　　　　　　　<div class="alert alert-info alert-dismissible">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<strong>Student Data Deleted</strong>
　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　<div class="col-sm-4></div>
　　　　　　　　</div>　　　　　　　　　　　
　　　　</div>
　　
　　<div class="panel-body>
　　　　　　<table　　class="table table-hover table-sm" datatable [dtOptions]="dtOptions"
　　　　　　[dtTrigger]="dtTrigger"　　>
　　　　　　　　　　<thead class="thead-light">
　　　　　　　　　　　　　　<tr
　　　　　　　　　　　　　　　　　　<th>Student Name</th>
　　　　　　　　　　　　　　　　　　<th>Student Email</th>
　　　　　　　　　　　　　　　　　　<th>Student Branch</th>
　　　　　　　　　　　　　　　　　　<th>Action</th>
　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　</tr>
　　　　　　　　　　</thead>
　　　　　　　　　　<tbody>
　　　　　　　　　　　　　　　<tr　*ngFor="let student of students ">
　　　　　　　　　　　　　　　　　　<td>{{student.student_name}}</td>
　　　　　　　　　　　　　　　　　　<td>{{student.student_email}}</td>
　　　　　　　　　　　　　　　　　　<td>{{student.student_branch}}</td>
　　　　　　　　　　　　　　　　　　<td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>　
　　　　　　　　　　　　　　　　　　　　<button (click)="updateStudent(student.student_id)" class='btn btn-info'
　　　　　　　　　　　　　　　　　　　　data-toggle="modal" data-target="#myModal">Update</button>　　</td>
　　　　　　　　　　　　　　　　</tr>　
　　　　　　　　　　</tbody><br>
　　　　　　</table>
　　</div>
</div>　
<div class="modal" id="myModal">
　　　　　　　　<div　class="modal-dialog">
　　　　　　　　　　<div　class="modal-content">
　　　　　　　　　　　　　　　　<form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)"><!--　Modal Header　-->
　　　　　　　　　　　　<div　class="modal-header">
　　　　　　　　　　　　　　<h4　class="modal-title" style="text-align: center">Update Student</button>/h4>
　　　　　　　　　　　　　　
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　　　　　<!--　Modal body　-->
　　　　　　　　　　　　<div　class="modal-body"　*ngFor="let student of studentlist " >
　　　　　　　　　　　　　　　　<div [hidden]="isupdated">
　　　　　　　　　　　　　　　　　　　　<input type="hidden" class="form-control" formControlName="student_id" [(ngModel)]="student.student_id">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Student Name</label>/label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_name" [(ngModel)]="student.student_name">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Student Email</label>/label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Student Branch</label>/label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<select class="form-control" formControlName="student_branch" required>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="B-Tech" [selected]="'B-Tech' == student.student_branch">B-Tech</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="BCA" [selected]="'BCA' == student.student_branch">BCA</option>/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="MCA" [selected]="'MCA' == student.student_branch">MCA</option>/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option　value="M"}}-Tech"　[selected]="'M-Tech'　==　student.student_branch">M-Tech</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</select>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　</div>　　
　　　　　　　　　　　　　　　　　　<div　[hidden]="!isupdated">
　　　　　　　　　　　　　　　　　　　　　　<h4>Studentendetail aktualisiert!</h4>
　　　　　　　　　　　　　　　　　　</div>　　　　　　　　
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　　　　　<!--　Modal-Fußzeile　-->
　　　　　　　　　　　　<div　class="modal-footer"　>
　　　　　　　　　　　　　　<button　type="submit"　class="btn　btn-success"　[hidden]="isupdated">Aktualisieren</button>
　　　　　　　　　　　　　　<button　type="button"　class="btn　btn-danger"　data-dismiss="modal"　(click)="changeisUpdate()">Schließen</button>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　</form>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>

Klicken Sie hier Zeige Schülerwird die folgende Seite generiert:

Klicken Sie hier Aktualisieren Sie den Schülerwird das folgende Anmeldeprogramm angezeigt:

Hier können wir die Details eines bestehenden Schülers aktualisieren.

Klicken Sie hier Löschen (Löschen), bestehende Schüler werden aus der Datenbank gelöscht. Lassen Sie uns das Ergebnis nach dem Löschen eines bestimmten Schülers anzeigen.

Beispiel für die Injektion von Abhängigkeiten durch den Konstruktor Spring-Sicherheit

Spring-Tutorials

Spring Angular CRUD-Anwendung

Arbeitsanwendung

Zu verwendende Werkzeuge

Die von uns verwendeten Technologien

Erstellen Sie die Datenbank

Spring-Modul

entitymanager.packagesToScan=Model

ist der Name des Projekts.

Installieren Sie Angular-DataTable