Пример инъекции зависимостей через конструктор Security Spring

Приложение Spring Angular CRUD

В этом разделе мы разработаем веб-приложение CRUD (создание-чтение-обновление-удаление). Приложение содержит форму студентов, которая включает функции CRUD, такие как добавление, просмотр, удаление и обновление студентов. В этой интеграции мы используем Spring Boot для обработки части бэкенда, а Angular для обработки части фронта.

Рабочее приложение

После того как мы разместим приложение на сервере, в веб-браузере будет создана таблица студентов. Эта форма помогает добавлять и просматривать студентов. После нажатия ссылки 'Добавить студента' страница будет перенаправлена на страницу создания таблицы студентов, где мы можем добавить студентов, заполнив необходимые детали и отправив их. Используя ссылку 'Просмотр студентов', мы можем получить подробные данные существующих студентов. Здесь каждый студент также содержит ссылки на обновление и удаление. Таким образом, мы можем обновлять подробные данные студентов и удалять их из базы данных. После завершения предоставьте URL в веб-браузере http://localhost: 4200/.

Инструменты, которые нужно использовать

Используйте любую IDE для разработки проектов Spring и Hibernate. Это может быть STS/Eclipse/Netbeans. Здесь мы используем STS (Spring Tools Suite). Для базы данных используется MySQL. Используйте любую IDE для разработки проекта Angular. Это может быть Visual Studio Code/Sublime. Здесь мы используем Visual Studio Code. Сервер: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Используемые нами технологии

Здесь мы используем следующие технологии:

SpringBoot2 Hibernate5 Angular6 MYSQL

Создание базы данных

Давайте создадим базу данных indigo Не нужно создавать таблицы, так как Hibernate автоматически создаст их.

Модуль Spring

Давайте посмотрим на структуру каталогов Spring Boot, которую нам нужно соблюдать:

Чтобы разработать приложение CRUD, выполните следующие шаги: -

Добавьте зависимости в файл pom.xml.

Пример

<?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>Демо проект для 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>

Создание класса конфигурации
Мы выполняем конфигурацию на основе аннотаций, а не XML. Поэтому мы создаем класс Config.java и в нем указываем необходимые конфигурации. Но также есть конфигурационный класс StudentApplication.java. Этот класс предоставляется автоматически Spring Boot. q

Config.java

Пример

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.hbm2ddl.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

Пример

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);
	}
}

Создание класса сущности
Здесь мы создадим класс Entity/POJO (обычный старый объект Java).

Student.java

Пример

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

Создание интерфейса DAO
Здесь мы создаем интерфейс DAO для выполнения операций с базой данных.

Student_DAO.java

Пример

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);
}

Создание класса реализации интерфейса DAO

Student_DAO_Imp.java

Пример

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

Создание интерфейса слоя услуг

Здесь мы создаем интерфейс слоя услуг, который служит мостом между DAO и классами сущностей.

Student_Service.java

Пример

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

Пример

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

Пример

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);
	}
}

редактировать файл application.properties
Здесь мы редактируем src/main/resources в папке application.properties Файл. Следующие файлы содержат конфигурационные свойства.

application.properties

Пример

#　Database
db.driver=　com.mysql.jdbc.Driver
db.url=　jdbc:mysql://localhost:3306/indigo
db.username=root
db.password=
# Hibernate
hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql=true
hibernate.hbm2ddl.auto=update
entitymanager.packagesToScan=Model

модуль Angular

Давайте посмотрим на структуру каталогов Angular:

создать проект Angular

Используйте следующую команду для создания проекта Angular:

ng новый Angular

Здесь, Angular является именем проекта.

установить CSS-фреймворк Bootstrap

Используйте следующую команду

npm install [email protected] --save

Теперь включите следующий код файла в style.css.

Пример

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

установить Angular-DataTable

Используйте следующую команду для установки Angular DataTable в проекте.

npm install Angular-datatable --save

должен содержать app.module.ts модуль DataTableModule в массиве импорта файла .

генерировать компонент
Откройте проект в Visual Studio и используйте следующие команды для генерации компонента Angular:
ng gc AddStudent
ng gc StudentList

Мы также используем следующие команды для создания классов сервисов: -

ng gs студент

Редактировать app.module.ts Файл импортировать маршрутизации- Здесь мы импортируем файл маршрутизации (app-routing.module.ts) и включаем его в массив imports. импортировать ReactiveFormsModule - Здесь мы будем импортировать ReactiveFormsModule для реактивного формирования и указать его в массиве imports. импортировать HttpModule - Здесь мы импортируем HttpModule для запросов к серверу HttpModule и указать его в массиве import. регистрация классов сервисов- Здесь мы упомянули классы сервисов в массиве провайдеров.

Пример

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　{　}

Редактировать app-routing.module.ts Файл

Пример

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],
})
export class AppRoutingModule { }

Редактировать app.component.html Файл

Пример

　　　　<div class="container-fluid">
　　　　<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　　　　　　　<ul class="navbar-nav">
　　　　　　　　　　<li class="nav-item ">
　　　　　　　　　　　　<a routerLink="view-student" class="nav-link" class="btn btn-primary active" role="button">Просмотр Студента</a>
　　　　　　　　　　</li>　
　　　　　　　　　　<li class="nav-item">
　　　　　　　　　　　　<a routerLink="add-student" class="nav-link" class="btn btn-primary active" role="button">Добавить Студента</a>
　　　　　　　　　　</li>　　　　　　　　　　
　　　　　　　　</ul>
　　　　　　</nav>　　　
　　　　　　　　<router-outlet></router-outlet>
　　　　</div>

Создание Student.ts класс

Давайте используем следующую команду для создания курса: -

ng g class Student

Теперь, в Student В классе указываются обязательные поля.

Пример

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

Эта цель заключается в сопоставлении указанных полей с полями классов实体 Spring.

Редактировать student.service.ts Файл

Пример

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);
　　}
　　
}

Редактировать add-student.component.ts Файл

Пример

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();
　　}
}

Редактировать add-student.component.html Файл

Пример

<h3>Создать Студента</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">Имя студента</label>
　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_name" data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　data-placement="right"　title="Введите　имя студента"　>
　　　　　　　　　　　　　　<div　class="alert　alert-danger"　*ngif　=　"(StudentName.touched)　&&　(StudentName.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentName.errors.required">Имя студента обязательно</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif　=　"StudentName.errors.minlength">　
　　　　　　　　　　　　　　　　　　　　　　　　Ошибка минимальной длины　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label for="name">Электронная почта студента</label>
　　　　　　　　　　　　　　<input　type="text"　class="form-control"　formControlName="student_email"　
　　　　　　　　　　　　　　　　data-toggle="tooltip"　data-placement="right"　title="Введите　электронную почту студента">
　　　　　　　　　　　　　　　　<div　class="alert　alert-danger"　*ngif　=　"(StudentEmail.touched)　&&　(StudentEmail.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentEmail.errors.required">Электронная почта студента обязательна</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif　=　"StudentEmail.errors.email">　
　　　　　　　　　　　　　　　　　　　　　　　　Неправильный формат электронной почты　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label　for="branch">Отдел　студента</label>
　　　　　　　　　　　　　　　　<select　class="form-control"　formControlName="student_branch"　data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　　　　　　data-placement="right"　title="Выберите　отдел　студента">
　　　　　　　　　　　　　　　　　　　　<option　value="null">--Выберите　отдел--</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">Отправить</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>Студент успешно добавлен!</h4>
　　　　　　　　　<button (click)="addStudentForm()" class='btn btn-primary'>Добавить еще студента</button>
　　　　　　</div>　　　　　　
　　</div>
　　<div class="col-sm-4"></div>
</div>

Нажмите Добавить студентаПри этом будет создана следующая страница:

Теперь, заполните необходимые详细信息 и отправьте, чтобы добавить студента.

Редактировать student-list.component.ts Файл

Пример

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(data =>{
　　　　this.students = data;
　　　　this.dtTrigger.next();
　　　　})
　　}
　　
　　deleteStudent(id: number) {
　　　　this.studentservice.deleteStudent(id)
　　　　　　.subscribe(
　　　　　　　　data => {
　　　　　　　　　　console.log(data);
　　　　　　　　　　this.deleteMessage = true;
　　　　　　　　　　this.studentservice.getStudentList().subscribe(data =>{
　　　　　　　　　　　　this.students = data
　　　　　　　　　　　　})
　　　　　　　　},
　　　　　　　　error => console.log(error));
　　}
　　updateStudent(id: number){
　　　　this.studentservice.getStudent(id)
　　　　　　.subscribe(
　　　　　　　　data => {
　　　　　　　　　　this.studentlist = data　　　　　　　　　　　
　　　　　　　　},
　　　　　　　　error => console.log(error));
　　}
　　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(
　　　　data => {　　　　　
　　　　　　this.isupdated=true;
　　　　　　this.studentservice.getStudentList().subscribe(data =>{
　　　　　　　　this.students = data
　　　　　　　　})
　　　　},
　　　　error => console.log(error));
　　}
　　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;
　　}
}

Редактировать student-list.component.html Файл

Пример

<div class="panel panel-default">
　　<div class="panel-heading">
　　　　　　<h1 style="text-align: center">Студенты</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>Удалены данные о студенте</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)="updateStу(updstу)"><!-- Modal Header -->
　　　　　　　　　　　　<div class="modal-header">
　　　　　　　　　　　　　　<h4 class="modal-title" style="text-align: center">Обновить студента</h4>
　　　　　　　　　　　　　　
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　　　　　<!-- Тело модального окна -->
　　　　　　　　　　　　<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">Имя студента</label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_name" [(ngModel)]="student.student_name">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Электронная почта студента</label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Студенческий отдел</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 value="MCA" [selected]="'MCA' == student.student_branch">MCA</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="M-Tech" [selected]="'M-Tech' == student.student_branch">M-Tech</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</select>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　</div>　　
　　　　　　　　　　　　　　　　　　<div [hidden]="!isupdated">
　　　　　　　　　　　　　　　　　　　　　　<h4>Детали студента обновлены!</h4>
　　　　　　　　　　　　　　　　　　</div>　　　　　　　　
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　　　　　<!-- Modal footer -->
　　　　　　　　　　　　<div class="modal-footer">
　　　　　　　　　　　　　　<button type="submit" class="btn btn-success" [hidden]="isupdated">Обновить</button>
　　　　　　　　　　　　　　<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Закрыть</button>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　</form>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>

Нажмите Просмотр студентовПри этом будет создана следующая страница:

Нажмите Обновить студентаПри этом会出现以下 начальный режим:

Здесь мы можем обновить详细信息 существующего студента.

Нажмите Удалить (Удалить), существующие студенты будут удалены из базы данных. Давайте посмотрим на результаты после удаления конкретного студента.

Пример инъекции зависимостей через конструктор Security Spring

Учебник Spring

Приложение Spring Angular CRUD

Рабочее приложение

Инструменты, которые нужно использовать

Используемые нами технологии

Создание базы данных

Модуль Spring

модуль Angular

установить CSS-фреймворк Bootstrap

установить Angular-DataTable