Exemplo de Injeção de Construtor de Dependência Segurança Spring

Aplicativo Spring Angular CRUD

Nesta seção, desenvolvemos um CRUD (criar, ler, atualizar, excluir) aplicativo Spring Angular.-Ler-Atualizar-Excluir) Aplicação Web. Este aplicativo contém um formulário de alunos, que possui funções CRUD, como adicionar, visualizar, excluir e atualizar alunos. Nesta integração, usamos o Spring Boot para o back-end e Angular para o front-end.

Aplicação de trabalho

Depois que aplicamos o aplicativo no servidor, a tabela de alunos será gerada no navegador da web. Este formulário ajuda a adicionar e visualizar alunos. Após clicar no link Adicionar Aluno, a página será redirecionada para a tabela de criação de alunos, onde podemos preencher os detalhes necessários e submeter para adicionar um aluno. Usando o link Ver Alunos, podemos obter os detalhes dos alunos existentes. Aqui, cada aluno também inclui links de atualização e exclusão. Portanto, podemos atualizar os detalhes dos alunos e também excluí-los do banco de dados. Após concluir, forneça a URL http: no navegador da web//localhost: 4200/.

Ferramentas a serem usadas

Use qualquer IDE para desenvolver projetos Spring e Hibernate. Pode ser o STS/Eclipse/Netbeans. Aqui, estamos usando o STS (Spring Tool Suite). para o banco de dados MySQL.} Use qualquer IDE para desenvolver projetos Angular. Pode ser o Visual Studio Code/Sublime. Aqui, estamos usando o Visual Studio Code. Servidor: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Tecnologias que usamos

Aqui, estamos usando as seguintes tecnologias:

SpringBoot2 Hibernate5 Angular6 MYSQL

Criar banco de dados

Vamos criar o banco de dados indigo 。Não é necessário criar a tabela, pois o Hibernate a criará automaticamente.

Módulo Spring

Vamos ver a estrutura de diretórios que devemos seguir no Spring Boot:

Para desenvolver uma aplicação CRUD, execute os seguintes passos: -

Adicionar dependências ao arquivo pom.xml.

Exemplo

<?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-instância
	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/>　<!--　procurar parent no repositório　-->
	</parent>
	<groupId>com.main</groupId>
	<artifactId>Student</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>Student</name>
	<description>Projeto demo para Spring Boot</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
		　　　　<groupId>org.springframework.boot</groupId>
		　　　　<artifactId>spring-boot-devtools</artifactId>
　　　　　　　　　　　　<opcional>true</opcional>
		</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自动提供。

Config.java

Exemplo

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.hbm",2ddl.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

Exemplo

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

Criar classe de entidade
Aqui, criaremos uma Entity/POJO (Objeto Java Padrão) classe.

Student.java

Exemplo

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

Criando interface DAO
Aqui, estamos criando a interface DAO para executar operações relacionadas ao banco de dados.

Student_DAO.java

Exemplo

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

Criar a classe de implementação do DAO

Student_DAO_Imp.java

Exemplo

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

Criar a interface de camada de serviço

Aqui, estamos criando uma interface de camada de serviço, que atua como uma ponte entre o DAO e a classe de entidade.

Student_Service.java

Exemplo

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

Exemplo

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

Exemplo

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"-estudante/{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"-estudante/{student_id}"
	public boolean updateStudent(@RequestBody Student student, @PathVariable("student_id") int student_id) {
		student.setStudent_id(student_id);
		return studentservice.updateStudent(student);
	}
}

Edite o arquivo application.properties
Aqui, estamos editando src/main/resources No diretório application.properties Os seguintes arquivos contêm propriedades de configuração.

application.properties

Exemplo

#　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.MySQL5Dialeto
hibernate.show_sql=true
hibernate.hbm2ddl.auto=update
entitymanager.packagesToScan=Model

Módulo Angular

Vamos ver a estrutura de diretórios do Angular:

Criar um projeto Angular

Use os seguintes comandos para criar um projeto Angular:

ng novo Angular

Aqui, Angular é o nome do projeto.

Instalar o framework CSS Bootstrap

Use os seguintes comandos

npm install [email protected] --salvar

Agora, inclua os seguintes arquivos de código no style.css.

Exemplo

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

Instalar Angular-DataTable

Use os seguintes comandos para instalar o Angular Data Table no projeto.

npm install Angular-datatable --salvar

deve incluir app.module.ts O módulo DataTableModule no array de importações do arquivo .

Gerar componente
Abra o projeto no Visual Studio e use os seguintes comandos para gerar componentes Angular:
ng gc AddStudent
ng gc StudentList

Também usamos os seguintes comandos para criar classes de serviço: -

ng gs estudante

Editar app.module.ts Arquivo Importar roteamento-Aqui, estamos importando o arquivo de roteamento (app-routing.module.ts) e incluí-lo no array de imports. Importar ReactiveFormsModule -Aqui, vamos importar ReactiveFormsModule usada para reatividade e especificada no array de imports. Importar HttpModule -Aqui, importamos para solicitações de servidor HttpModule e especificá-la no array de importações. Registrar classe de serviço-Aqui, mencionamos a classe de serviço no array de provedores.

Exemplo

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　'./estudante-list/estudante-list.component';
import　{　AddStudentComponent　}　from　'./add-estudante/add-student.component';
@NgModule({
　　declarations:　[
　　　　AppComponent,
　　　　StudentListComponent,
　　　　AddStudentComponent,
　　],
　　imports:　[
　　　　BrowserModule,
　　　　AppRoutingModule,
　　　　FormsModule,
　　　　ReactiveFormsModule,
　　　　HttpClientModule,
　　　　DataTablesModule
　　],
　　providers:　[],
　　bootstrap:　[AppComponent]
})
export　class　AppModule　{　}

Editar app-routing.module.ts Arquivo

Exemplo

import　{　NgModule　}　from　'@angular/core';
import　{　Routes,　RouterModule　}　from　'@angular/router';
import　{　StudentListComponent　}　from　'./estudante-list/estudante-list.component';
import　{　AddStudentComponent　}　from　'./add-estudante/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]

Editar export class AppRoutingModule { } Arquivo

Exemplo

　　　　app.component.html-<div class="container
　　　　fluid">-<nav class="navbar navbar-expand-sm bg-dark navbar
　　　　　　　　dark">-<ul class="navbar
　　　　　　　　　　primary active" role="button" >Ver Estudante<-nav">
　　　　　　　　　　　　item">-<a routerLink="add-student" class="nav-<a routerLink="view/a> Adicionar Estudante <
　　　　　　　　　　</li>　
　　　　　　　　　　primary active" role="button" >Ver Estudante<-<li class="nav
　　　　　　　　　　　　item">-<a routerLink="add-student" class="nav-link" class="btn btn/a> Adicionar Estudante <
　　　　　　　　　　</li>　　　　　　　　　　
　　　　　　　　</ul>
　　　　　　</nav>　　　
　　　　　　　　<router-outlet></router-outlet>
　　　　</div>

criar Student.ts classe

Vamos usar o seguinte comando para criar a aula: -

ng g class Student

Agora, no Student Especificar os campos obrigatórios na classe.

Exemplo

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

Este tipo de classe tem como objetivo mapear os campos especificados com os campos das classes de entidade do Spring.

Editar student.service.ts Arquivo

Exemplo

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}`+-
　　}
　　
　　　　/-estudante/${id}
　　}
　　getStudent(id: number): Observable<Object> {
　　　　return this.http.get(`${this.baseUrl}`,/estudante/${id}
　　}
　　updateStudent(id: number, value: any): Observable<Object> {
　　　　return this.http.post(`${this.baseUrl}`,/-estudante/${id}
　　}
　　
}

Editar add-student.component.ts Arquivo

Exemplo

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

Editar add-student.component.html Arquivo

Exemplo

<h3>Create Student</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="right" title="Enter Student Name" >
　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif = "(StudentName.touched) && (StudentName.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentName.errors.required">Student Name is Required</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif = "StudentName.errors.minlength">　
　　　　　　　　　　　　　　　　　　　　　　　　MinLength Error　
　　　　　　　　　　　　　　　　　　　　</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="right" title="Enter Student Email">
　　　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif　=　"(StudentEmail.touched)　&&　(StudentEmail.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentEmail.errors.required">O E-mail do Aluno é Obrigatório</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif　=　"StudentEmail.errors.email">　
　　　　　　　　　　　　　　　　　　　　　　　　Formato de E-mail Inválido　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label　for="branch">Ramo do Aluno</label>
　　　　　　　　　　　　　　　　<select class="form-control"　formControlName="student_branch"　data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　　　　　　data-placement="right"　title="Selecione o Ramo do Aluno">
　　　　　　　　　　　　　　　　　　　　<option　value="null">--Selecione a Ramo--</option>
　　　　　　　　　　　　　　　　　　<option value="B-Tech">B-Tech</option>
　　　　　　　　　　　　　　　　　　<option　value="BCA">BCA</option>
　　　　　　　　　　　　　　　　　　<option　value="MCA">MCA</option>

Clique aqui Adicionar AlunoQuando, a seguinte página será gerada:

Agora, preencha os detalhes necessários e submeta para adicionar o aluno.

Editar estudante-list.component.ts Arquivo

Exemplo

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'}}-estudante-list
　　templateUrl: '.',/estudante-list.component.html',
　　styleUrls: ['./estudante-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;
　　}
}

Editar estudante-list.component.html Arquivo

Exemplo

<div　class="panel　panel-default">
　　<div class="panel-heading">
　　　　　　<h1　style="text-align:　center">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>Dados do Estudante Excluídos</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>Nome do Estudante</th>
　　　　　　　　　　　　　　　　　　<th>E-mail do Estudante</th>
　　　　　　　　　　　　　　　　　　<th>Seção do Estudante</th>
　　　　　　　　　　　　　　　　　　<th>Ação</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">Excluir</i></button>　
　　　　　　　　　　　　　　　　　　　　<button (click)="updateStudent(student.student_id)" class='btn btn-info'
　　　　　　　　　　　　　　　　　　　　data-toggle="modal" data-target="#myModal">Atualizar</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>

Clique aqui Visualizar EstudanteQuando, a seguinte página será gerada:

Clique aqui Atualizar EstudanteQuando, o seguinte modo de assistente será exibido:

Aqui, podemos atualizar os detalhes do aluno existente.

Clique aqui Excluir (Excluir), os alunos existentes serão excluídos do banco de dados. Vamos ver os resultados após a exclusão do aluno específico.

Exemplo de Injeção de Construtor de Dependência Segurança Spring

Tutorial Spring

Aplicativo Spring Angular CRUD

Aplicação de trabalho

Ferramentas a serem usadas

Tecnologias que usamos

Criar banco de dados

Módulo Spring

Módulo Angular

Instalar o framework CSS Bootstrap

Instalar Angular-DataTable