English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Spring 튜토리얼

Spring Angular CRUD 애플리케이션

이 장에서 우리는 CRUD(생성-읽기-업데이트-Web 애플리케이션을 제거)합니다. 이 애플리케이션은 학생 양식을 포함하고 있으며, 이 양식은 CRUD(생성, 읽기, 업데이트, 제거) 기능을 포함하고 있습니다. 이 통합에서 우리는 Spring Boot를 사용하여 백엔드 부분을 처리하고, Angular을 사용하여 프론트엔드 부분을 처리합니다.

작업 애플리케이션

우리가 애플리케이션을 서버에 배포하면, 웹 브라우저에서 학생 테이블이 생성됩니다. 이 양식은 학생을 추가하고 확인하는 데 도움이 됩니다. 학생 추가 링크를 클릭하면, 학생 테이블을 생성하는 페이지로 리디렉션되며, 필요한 상세 정보를 입력하고 제출하여 학생을 추가할 수 있습니다. 학생을 확인하는 링크를 사용하여, 기존 학생의 상세 정보를 얻을 수 있습니다. 여기서 각 학생은 업데이트 및 제거 링크를 포함하고 있습니다. 따라서 우리는 학생의 상세 정보를 업데이트하고 데이터베이스에서 그들을 제거할 수 있습니다. 작업이 완료되면, 웹 브라우저에서 URL http:을 제공합니다.//localhost: 4200/。

사용할 도구

Spring와 Hibernate 프로젝트를 개발하기 위해 어떤 IDE를 사용할지 선택할 수 있습니다. STS가 될 수 있습니다./Eclipse/Netbeans. 여기서 우리는 STS(Spring 도구 모음)를 사용하고 있습니다. 데이터베이스에 사용되는 MySQL. Angular 프로젝트를 개발하기 위해 어떤 IDE를 사용하든 상관없습니다. Visual Studio Code일 수도 있습니다./Sublime. 여기서는 Visual Studio Code를 사용하고 있습니다. 서버: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

사용하는 기술

여기서는 다음 기술을 사용하고 있습니다:

SpringBoot2 Hibernate5 Angular6 MYSQL

데이터베이스 생성

데이터베이스를 생성하겠습니다 건저로 표를 생성하지 않아도 됩니다. 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>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>

구성 클래스 생성
우리는 주석 기반의 구성을 실행하며 XML 대신를 사용합니다. 따라서 우리는 Config.java 클래스를 생성하고 필요한 구성을 지정합니다. 그러나 StudentApplication.java 구성 클래스도 있습니다. 이 클래스는 Spring Boot가 자동으로 제공합니다.

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

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_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_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 

#　데이터베이스
db.driver=　com.mysql.jdbc.Driver
db.url=　jdbc:mysql://localhost:3306/건저로
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 는 프로젝트 이름입니다.

Bootstrap CSS 프레임워크 설치

다음 명령어로

npm install [email protected] --save

현재, style.css에 다음 코드 파일을 포함합니다.

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

Angular 설치-DataTable

다음 명령어로 Angular 데이터 테이블을 프로젝트에 설치합니다.

npm install Angular-datatable --save

은 포함되어야 합니다 app.module.ts 文件的导入数组中的DataTableModule 。

컴포넌트 생성
Visual Studio에서 프로젝트를 엽니다. 그런 다음 다음 명령어로 Angular 컴포넌트를 생성합니다:
ng gc AddStudent
ng gc StudentList

우리는 다음 명령어로 서비스 클래스를 생성합니다: -

ng gs 학생

편집 app.module.ts 파일 route 가져오기-여기서, 우리는 importing route 파일(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 './학생-list/학생-list.component';
import { AddStudentComponent } from './add-학생/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 './학생-list/학생-list.component';
import { AddStudentComponent } from './add-학생/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]}

편집 export class AppRoutingModule { } 파일 

　　　　app.component.html-<div　　class="container
　　　　fluid">-<nav　class="navbar navbar-expand-sm bg-dark navbar
　　　　　　　　dark">-<ul　class="navbar
　　　　　　　　　　primary active" role="button" >View Student<-nav">
　　　　　　　　　　　　item　">-<a　　routerLink="add-student" class="nav-<a　routerLink="view/a> primary active" role="button" >Add Student<
　　　　　　　　　　</li>　
　　　　　　　　　　primary active" role="button" >View Student<-<li　class="nav
　　　　　　　　　　　　item">-<a　　routerLink="add-student" class="nav-link" class="btn btn/a> primary active" role="button" >Add Student<
　　　　　　　　　　</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;
}

이 클래스의 목적은 지정된 필드를 스프링 엔티티 클래스의 필드와 매핑하는 것입니다.

편집 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-학생/${id}`, { responseType: 'text' });
　　}
　　getStudent(id: number): Observable<Object> {
　　　　return this.http.get(`${this.baseUrl}`,/학생/${id}`);
　　}
　　updateStudent(id: number, value: any): Observable<Object> {
　　　　return this.http.post(`${this.baseUrl}`,/update-학생/${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>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">Student　Email　is　Required</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif　=　"StudentEmail.errors.email">　
　　　　　　　　　　　　　　　　　　　　　　　　Invalid　Email　Format　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label　for="branch">Student　Branch</label>
　　　　　　　　　　　　　　　　<select class="form-control"　formControlName="student_branch"　data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　　　　　　data-placement="right"　title="Select　Student　Branch">
　　　　　　　　　　　　　　　　　　　　<option　value="null">--Select　Branch--</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>Student　Added　SuccessFully!</h4>
　　　　　　　　　<button　(click)="addStudentForm()"　class='btn　btn-primary'>Add　More　Student</button>
　　　　　　</div>　　　　　　
　　</div>
　　<div　class="col-sm-4></div>
</div>

클릭 학생 추가다음 페이지가 생성됩니다:

지금, 필요한 상세 정보를 입력하고, 학생을 추가하기 위해 제출하세요.

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

편집 학생-list.component.html 파일 

<div class="panel panel-default">
　　<div　class="panel-heading">
　　　　　　<h1　style="text-align: 중앙 정렬">학생</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>학생 상세 정보 업데이트 완료!</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>

클릭 학생 보기다음 페이지가 생성됩니다:

클릭 학생 업데이트다음 가이드 프로그램 모드가 표시됩니다:

여기서 기존 학생의 상세 정보를 업데이트할 수 있습니다.

클릭 삭제 (삭제) 기존 학생이 데이터베이스에서 제거됩니다. 특정 학생을 제거한 후 결과를 확인해 보겠습니다.

Spring Angular 파일 업로드 Spring Angular 로그인 및 로그아웃 Spring Angular 검색 필드
의존성 생성자 메서드 주입 예제Spring security