本文概述

• 申请工作
• 使用工具
• 我们使用的技术
• 创建数据库
• Spring模块
• 角度模块
• 安装Bootstrap CSS框架
• 安装Angular-DataTable

在本节中, 我们将开发一个CRUD(创建读取更新更新删除)Web应用程序。该应用程序包含学生表单, 该表单包含CRUD功能, 例如添加, 查看, 删除和更新学生。在这种集成中, 我们使用Spring Boot处理后端部分, 使用Angular处理前端部分。
申请工作

• 将应用程序部署到服务器上后, 将在Web浏览器中生成学生表格。
• 该表格便于添加和查看学生。
• 单击添加学生链接后, 页面将重定向到创建学生表单, 我们可以在其中填写所需的详细信息并提交, 从而添加学生。
• 使用查看学生链接, 我们可以获取现有学生的详细信息。在这里, 每个学生还包含更新和删除链接。
• 因此, 我们可以更新学生的详细信息, 也可以将其从数据库中删除。
• 完成后, 在Web浏览器中提供URL http：// localhost：4200 /。

使用工具

• 使用任何IDE来开发Spring和Hibernate项目。可能是STS / Eclipse / Netbeans。在这里, 我们使用的是STS(Spring工具套件)。
• MySQL用于数据库。
• 使用任何IDE来开发Angular项目。它可能是Visual Studio代码/ Sublime。在这里, 我们正在使用Visual Studio Code。
• 服务器：Apache Tomcat / JBoss / Glassfish / Weblogic / Websphere。

我们使用的技术 在这里, 我们使用以下技术：

• SpringBoot 2
• 休眠5
• 角度6
• 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 = http://www.srcmini.com/{ @ComponentScan("boot.entry"), @ComponentScan("Model"), @ComponentScan("Controller"), @ComponentScan("DAO"), @ComponentScan("Miscallaneous"), @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_Impimplements 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和Entity类之间的桥梁。
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="http://www.srcmini.com/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是项目的名称。
安装Bootstrap CSS框架 使用以下命令在项目中安装引导程序。
npm install bootstrap@3.3.7-保存
现在, 在style.css文件中包含以下代码。

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

安装Angular-DataTable 使用以下命令在项目中安装角度数据表。
npm install angular-datatable-保存

文章图片
必须在app.module.ts文件的imports数组中包括DataTableModule。

• 产生零件
  在Visual Studio中打开项目, 然后使用以下命令生成Angular组件：
  的g c AddStudent
  的g c学生列表

文章图片
我们还使用以下命令创建服务类：-
学生的

文章图片

• 编辑app.module.ts文件
  • 导入路由-在这里, 我们将导入路由文件(app-routing.module.ts)并将其包含在imports数组中。
  • 导入ReactiveFormsModule-在这里, 我们将为反应形式导入ReactiveFormsModule, 并在imports数组中指定它。
  • Import HttpModule-在这里, 我们将为服务器请求导入HttpModule, 并在imports数组中指定它。
  • 注册服务类-在这里, 我们在提供者的数组中提到了服务类。

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文件

< divclass="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" > View Student< /a> < /li>   < li class="nav-item"> < arouterLink="add-student" class="nav-link" class="btn btn-primary active" role="button" > Add Student< /a> < /li> < /ul> < /nav> < router-outlet> < /router-outlet> < /div>

• 创建Student.ts类

让我们使用以下命令创建一个类：-
g学生班

文章图片
现在, 在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 =http://www.srcmini.com/> 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> < 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> < 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="http://www.srcmini.com/null"> --Select Branch--< /option> < option value="http://www.srcmini.com/B-Tech"> B-Tech< /option> < option value="http://www.srcmini.com/BCA"> BCA< /option> < option value="http://www.srcmini.com/MCA"> MCA< /option> < option value="http://www.srcmini.com/M-Tech"> M-Tech< /option> < /select> < /div> < button type="submit" class="btn btn-success"> Submit< /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>

单击添加学生后, 将生成以下页面：

文章图片
现在, 填写所需的详细信息并提交以添加学生。

• 编辑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 =http://www.srcmini.com/> { 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"> Students< /h1> < br> < div class="row" [hidden]="!deleteMessage"> < div class="col-sm-4"> < /div> < div class="col-sm-4"> < div class="alert alert-info alert-dismissible"> < button type="button" class="close" data-dismiss="alert"> ×< /button> < strong> Student Data Deleted< /strong> < /div> < /div> < div class="col-sm-4"> < /div> < /div> < /div> < div class="panel-body"> < tableclass="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< /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> < input type="text" class="form-control"formControlName="student_name" [(ngModel)]="student.student_name"> < /div> < div class="form-group"> < label for="name"> Student Email< /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> < select class="form-control" formControlName="student_branch" required> < option value="http://www.srcmini.com/B-Tech" [selected]="'B-Tech' == student.student_branch"> B-Tech< /option> < option value="http://www.srcmini.com/BCA" [selected]="'BCA' == student.student_branch"> BCA< /option> < option value="http://www.srcmini.com/MCA" [selected]="'MCA' == student.student_branch" > MCA< /option> < option value="http://www.srcmini.com/M-Tech" [selected]="'M-Tech' == student.student_branch"> M-Tech< /option> < /select> < /div> < /div> < div [hidden]="!isupdated"> < h4> Student Detail Updated!< /h4> < /div> < /div> < !-- Modal footer --> < div class="modal-footer" > < button type="submit" class="btn btn-success" [hidden]="isupdated"> Update< /button> < button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()"> Close< /button> < /div> < /form> < /div> < /div> < /div>

单击” 查看学生” 后, 将生成以下页面：

文章图片
单击” 更新学生” 时, 将出现以下引导程序模式：

文章图片
在这里, 我们可以更新现有学生的详细信息。
单击删除后, 现有学生将从数据库中删除。让我们看看删除特定学生后的结果。

文章图片
【Spring Angular CRUD应用实例图解】下载此示例

推荐阅读

• 

  第一次使用微波炉要清洗吗，微波炉清洗完可以直接用吗
• 

  副科级相当于什么军衔
• 

  【WordPress】提升网站打开速度，图片优化神器ShortPixel Image Optimizer使用教程
• 

  网上报税下载哪个app etax网上报税哪里下载，网上报税用什么软件
• 

  林内即享热水器代码是什么故障,出现这故障是什么原因
• 

  罗勒酱是什么酱 罗勒酱是什么
• 

  哪些娱乐圈八卦你听了觉得难以置信？
• 

  血管|秋冬输液能通血管？医生根本没推荐过！这个害死人的“秘方”别再信了
• 

  屏幕跳到最下方
• 

  玩吧app怎么加好友 关于在玩吧APP中添加好友的图文教程
• 

  伊万格琳娜·艾格洛蒲露丝伊万格丽娜
• 

  庆东锅炉锅炉面板显示16故障怎么解决,只要注意好这几点就行
• 

  水星MW310R，水星MW310R怎么样水星MW310R好吗
• 

  卡片相机一般用哪种三脚架比较好？
• 

  爱上了比自己大16岁的已婚大叔,是否是不好的结局？
• 

  vue-cli|vue-cli rem自适应 px to rem
• 

  聊聊springboot项目全局异常处理那些事儿
• 

  司机抱小孩开车算违章吗 司机抱着小孩开车怎么处罚
• 

  鲁滨逊漂流记与格列佛游记的不同
• 

  车载导航系统刷机方法有哪些

• Spring Angular文件上传应用程序示例图解
• Spring Angular登录和注销应用程序示例
• Spring Xstream示例详解
• Spring Java邮件教程入门详解
• Spring和Struts 2集成详细步骤和示例
• Spring Castor用法示例详解
• Spring通过HTTP Invoker进行远程处理示例
• Spring和Struts 2集成的登录详细示例
• Android精通（View与ViewGroup，LinearLayout线性布局，RelativeLayout相对布局，ListView列表组件）