تطبيق CRUD Spring Angular

في هذا الفصل، سنقوم بتطوير تطبيق CRUD (إنشاء - قراءة - تحديث - إزالة) عبر الإنترنت. يحتوي هذا التطبيق على نموذج الطلاب الذي يحتوي على وظائف CRUD مثل إضافة، عرض، إزالة وتحديث الطلاب. في هذه الإندماج، نستخدم Spring Boot لمعالجة الجزء الخلفي من التطبيق، ونستخدم Angular لمعالجة الجزء الأمامي من التطبيق.

التطبيق العام

بعد إرسال التطبيق إلى الخادم، سيتم إنشاء جدول الطلاب في متصفح الويب. يعد هذا النموذج مفيدًا لإضافة وعرض الطلاب. بعد النقر على رابط إضافة طالب، سيتم توجيه الصفحة إلى نموذج إنشاء جدول الطلاب، حيث يمكننا ملء التفاصيل المطلوبة و تقديمها لإضافة الطالب. باستخدام رابط عرض الطلاب، يمكننا الحصول على تفاصيل الطلاب الحاليين. هنا، يحتوي كل طالب أيضًا على رابط تحديث وإزالة. لذلك، يمكننا تحديث تفاصيل الطلاب وإزالةهم من قاعدة البيانات. بعد إكمال العملية، قدم URL http://localhost: 4200/ في متصفح الويب.

الأدوات التي سنستخدمها

استخدم أي IDE لتطوير مشاريع Spring وHibernate. قد يكون STS/Eclipse/Netbeans. هنا، نستخدم STS (Kit الأدوات الخاصة بـ Spring). MySQL لقاعدة البيانات. استخدم أي IDE لتطوير مشروع Angular. قد يكون Visual Studio Code/Sublime. هنا، نستخدم Visual Studio Code. الخادم: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

التكنولوجيا التي نستخدمها

في هذا السياق، نستخدم التكنولوجيا التالية:

SpringBoot2 Hibernate5 Angular6 MYSQL

إنشاء قاعدة البيانات

دعنا ننشئ قاعدة البيانات azul لا تحتاج إلى إنشاء الجداول، لأن Hibernate سينشئها تلقائيًا.

مodule 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;
استيراد java.util.Properties;
استيراد javax.sql.DataSource;
استيراد org.springframework.beans.factory.annotation.Value;
استيراد org.springframework.boot.autoconfigure.EnableAutoConfiguration;
استيراد org.springframework.boot.autoconfigure.orm.jpa.HibernateJpaAutoConfiguration;
استيراد org.springframework.context.annotation.Bean;
استيراد org.springframework.context.annotation.ComponentScan;
استيراد org.springframework.context.annotation.ComponentScans;
استيراد org.springframework.context.annotation.Configuration;
استيراد 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 (عنصر جافا قديم عادي)。

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

مثال

# قاعدة البيانات
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) وندفعه في قائمة الاستيرادات. استيراد ReactiveFormsModule -في هذا السياق، سنستورد ReactiveFormsModule للمشاركة، وتحديدها في قائمة الاستيرادات. استيراد HttpModule -في هذا السياق، نستورد HttpModule HttpModule ، وتحديدها في قائمة الاستيرادات. تسجيل نوع الخدمة-في هذا السياق، ذكرنا نوع الخدمة في قائمة المقدمين.

مثال

استيراد { ModuleBrowser } من '@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]
})
تصدير فئة 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 تحديد الحقول الإلزامية في الفئة.

مثال

تصدير فئة Student {
　　　　student_id: number;
　　　　student_name: String;
　　　　student_email: String;
　　　　student_branch: String;
}

هدف هذا النوع هو ربط الحقل المحدد بحقل الكائن من Spring entity class.

تعديل student.service.ts ملف

مثال

استيراد { Injectable } من '@angular/core';
استيراد { HttpClient } من '@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">Student　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">Student　Email</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)="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="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>
　　　　　　　　　　　　
　　　　　　　　　　　　<!-- Footer modal -->
　　　　　　　　　　　　<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

دليل Spring

تطبيق CRUD Spring Angular

التطبيق العام

الأدوات التي سنستخدمها

التكنولوجيا التي نستخدمها

إنشاء قاعدة البيانات

مodule Spring

مكون Angular

تثبيت إطار العمل CSS Bootstrap

تثبيت Angular-DataTable