تطبيق Spring Angular مع حقل البحث

في هذا الفصل، سنقوم بإنشاء تطبيق Search Field Web. يشمل هذا التطبيق بيانات شكل جدول تحتوي على حقول بحث. في هذه الإندماج، نستخدم Spring لمعالجة الجزء الخلفي، ونستخدم Angular لمعالجة الجزء الأمامي.

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

بمجرد أن قمنا بتثبيت التطبيق على الخادم، سيتم إنشاء نموذج يحتوي على بيانات شكل جدول和一些 حقول بحث. الآن، يمكننا البحث في البيانات الموجودة في هذه الحقول. هنا، نستخدم حقلين بحث - الاسم وID البريد الإلكتروني. للبحث عن البيانات، يجب تقديم كلمة المفتاح الكاملة في أي حقل بحث.

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

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

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

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

Spring5 Hibernate 5 زاوية 6 MYSQL

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

دعنا ننشئ قاعدة البيانات searchfieldexample .بما أن Hibernate أنشأ الجداول تلقائيًا، لا داعي لإنشاء الجداول. هنا، يجب علينا تقديم البيانات في الجداول بشكل واضح لكي تظهر على الشاشة للقيام بعمليات البحث. ولكن يمكننا أيضًا استيراد البيانات من ملفات موجودة في رابط التحميل.

مodule Spring

دعنا نرى بنية مجلد Spring التي يجب علينا اتباعها:

لإنشاء تطبيق مجال البحث، اتبع الخطوات التالية: -

إضافة الاعتمادات إلى ملف pom.xml.

pom.xml

مثال

<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/maven-v4_0_0.xsd">
　　<modelVersion>4.0.0</modelVersion>
　　<groupId>com.w3codebox</groupId>
　　<artifactId>SearchFieldExample</artifactId>
　　<packaging>war</packaging>
　　<version>0.0.1-SNAPSHOT</version>
　　<name>SearchFieldExample Maven Webapp</name>
　　<url>http://maven.apache.org</url>
　　
　　
　　<properties>
		<springframework.version>5.0.6.RELEASE</springframework.version>
		<hibernate.version>5.2.16.Final</hibernate.version>
		<mysql.connector.version>5.1.45</mysql.connector.version>
		<c3po.version>0.9.5.2</c3po.version>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
	</properties>
　　
　　<dependencies>
　　
　　　　<!-- Spring -->
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-webmvc</artifactId>
		<version>${springframework.version}</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-tx</artifactId>
		<version>${springframework.version}</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-orm</artifactId>
		<version>${springframework.version}</version>
	</dependency>
	<!-- Add Jackson for JSON converters -->
	<dependency>
		<groupId>com.fasterxml.jackson.core</groupId>
		<artifactId>jackson-databind</artifactId>
		<version>2.9.5</version>
	</dependency>
	<!-- Hibernate -->
	<dependency>
		<groupId>org.hibernate</groupId>
		<artifactId>hibernate-core</artifactId>
		<version>${hibernate.version}</version>
	</dependency>
	<!-- MySQL -->
	<dependency>
		<groupId>mysql</groupId>
		<artifactId>mysql-connector-java</artifactId>
		<version>${mysql.connector.version}</version>
	</dependency>
	<!-- C3PO -->
	<dependency>
		<groupId>com.mchange</groupId>
		<artifactId>c3p0</artifactId>
		<version>${c3po.version}</version>
	</dependency>
	<!-- Servlet+JSP+JSTL -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>javax.servlet-api</artifactId>
		<version>3.1.0</version>
	</dependency>
	<dependency>
		<groupId>javax.servlet.jsp</groupId>
		<artifactId>javax.servlet.jsp-api</artifactId>
		<version>2.3.1</version>
	</dependency>
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
		<version>1.2</version>
	</dependency>
	<!-- to compensate for java 9 not including jaxb -->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api</artifactId>
		<version>2.3.0</version>
	</dependency>
　	
　	<!-- JUnit dependency -->
　　　　<dependency>
　　　　　　　　<groupId>junit</groupId>
　　　　　　　　<artifactId>junit</artifactId>
　　　　　　　　<version>3.8.1</version>
　　　　　　　　<scope>test</scope>
　　　　</dependency>
　　　
　　</dependencies>
　
　　<build>
　　　　<finalName>SearchFieldExample</finalName>
　　</build>
</project>

إنشاء صنف التكوين
نحن نقوم بتنفيذ التكوين القائم على التعليقات، وليس XML. لذلك، قمنا بإنشاء كلاً من الصنفين ونحدد فيهما التكوين المطلوب.

DemoAppConfig.java

مثال

باقة	com.w3codebox.searchfieldexample.config;
import java.beans.PropertyVetoException;
import java.util.Properties;
import javax.sql.DataSource;
import org.hibernate.SessionFactory;
import　org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.orm.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.LocalSessionFactoryBean;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import com.mchange.v2.c3p0.ComboPooledDataSource;
@Configuration
@EnableWebMvc
@EnableTransactionManagement
@ComponentScan("com.w3codebox.searchfieldexample")
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:application.properties" })
public class DemoAppConfig implements WebMvcConfigurer {
	@Autowired
	private　Environment　env;
	@Bean
	public　DataSource　myDataSource()　{
		//　create　connection　pool
		ComboPooledDataSource　myDataSource　=　new　ComboPooledDataSource();
		//　set　the　jdbc　driver
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch　(PropertyVetoException　exc)　{
			throw　new　RuntimeException(exc);
		}
		//　set　database　connection　props
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		//　set　connection　pool　props
		myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize"));
		myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize"));
		myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize"));		
		myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime"));
		تسليم	myDataSource;
	}
	private	خصائص	hibernateProperties()
		//	ضبط	hibernate	خصائص
		خصائص	props	=	new	خصائص();
		props.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect"));
		props.setProperty("hibernate.show_sql", env.getProperty("hibernate.show_sql"));
		props.setProperty("hibernate.format_sql", env.getProperty("hibernate.format_sql"));
		props.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl"));
		return props;				
	}
	// need a helper method　
		// read environment property and convert to int
		private int getIntProperty(String propName) {
			String propVal = env.getProperty(propName);
			// now convert to int
			int intPropVal = Integer.parseInt(propVal);
			return intPropVal;
		}
		@Bean
		public LocalSessionFactoryBean sessionFactory(){
			// create session factorys
			LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
			// set the properties
			sessionFactory.setDataSource(myDataSource());
			sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
			sessionFactory.setHibernateProperties(getHibernateProperties());
			تعود	sessionFactory;
		}
		@Bean
		@Autowired
		public	HibernateTransactionManager	transactionManager(SessionFactory	SessionFactory)	{
			//	setup	transaction	manager	based	 على	SessionFactory
			HibernateTransactionManager	txManager	=	new	HibernateTransactionManager();
			txManager.setSessionFactory(sessionFactory);
			تعود	txManager;
		}	
}

MySpringMvcDispatcherServletInitializer.java

مثال

باقة	com.w3codebox.searchfieldexample.config;
إيراد	org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public	class	MySpringMvcDispatcherServletInitializer	extends	AbstractAnnotationConfigDispatcherServletInitializer	{
	@Override
	protected	Class<?>[]	getRootConfigClasses()	{
		//	TOdo	Auto-generated	method	stub
		إرجاعُ null;
	}
	@Override
	protected	Class<?>[]	getServletConfigClasses()	{
		تعود	new	Class[]	{	DemoAppConfig.class	};
	}
	@Override
	protected	String[]	getServletMappings()	{
		تعود	new	String[]	{	"/"	};
	}
}

إنشاء فئة الكيان
في هذا السياق، سنقوم بإنشاء فئة Entity/POJO (مثل الأجسام القديمة في Java)。

User.java

مثال

باقة	com.w3codebox.searchfieldexample.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name="user")
public class User {
	@Id
	@GeneratedValue(strategy=GenerationType.AUTO)
	@Column(name="userId")
	private int userId;
	@Column(name="name")
	private String name;
	@Column(name="email_id")
	public String emailId;
	@Column(name="qualification")
	public String qualification;
	public User() {}
	public User(int userId, String name, String emailId, String qualification) {
		super();
		this.userId = userId;
		this.name = name;
		this.emailId = emailId;
		this.qualification = qualification;
	}
	public int getUserId() {
		return userId;
	}
	public void setUserId(int userId) {
		this.userId = userId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmailId() {
		return emailId;
	}
	public void setEmailId(String emailId) {
		this.emailId = emailId;
	}
	public String getQualification() {
		return qualification;
	}
	public void setQualification(String qualification) {
		this.qualification = qualification;
	}
	@Override
	
		return "User [userId=
				+ "]";
	}
}

创建DAO界面
在这里，我们正在创建DAO界面以执行与数据库相关的操作。

UserDAO.java

مثال

package com.w3codebox.searchfieldexample.DAO.interfaces;
import　java.util.List;
import　com.w3codebox.searchfieldexample.entity.User;
public interface UserDAO {
	العموميةُ int حفظالمستخدم(User user);
	العموميةُ List<User> الحصولعلىبياناتالمصفية(User user);
}

创建DAO接口实现类

UserDAOImpl.java

مثال

package com.w3codebox.searchfieldexample.DAO.implementation;
import java.util.ArrayList;
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;
إدراجُ com.w3codebox.searchfieldexample.DAO.المواجهات.UserDAO;
import　com.w3codebox.searchfieldexample.entity.User;
@Repository("userDAO")
public class UserDAOImpl implements UserDAO {
	@Autowired
	SessionFactory sessionFactory;
	العموميةُ int حفظالمستخدم(User user)　{
		Session session = null;
		try {
			session = sessionFactory.getCurrentSession();
			int userId = (Integer) session.save(user);
			return userId;
		}
		catch(الاستثناء استثناء)
		{
			System.out.println("Exception while saving data into DB " + exception);
			return 0;
		}
		في نهاية الأمر
		{
			جلسة_التحميل.التحميل;
		}
	}
	العموميةُ List<User> الحصولعلىبياناتالمصفية(User user) {
		Session session = null;
		try
		{
			session = sessionFactory.getCurrentSession();
			ArrayList<Object> list_field = new ArrayList<Object>();
			ArrayList<Object> list_value = new ArrayList<Object>();
			if (user.getName() == null || user.getName() == "") {} else { list_field.add("name"); list_value.add(user.getName()); }
			if (user.getEmailId() == null || user.getEmailId() == "") {} else { list_field.add("emailId"); list_value.add(user.getEmailId()); }
			switch (list_field.size()) {
			case 0:
					Query<User> query0 = session.createQuery("from User");
					return query0.list();
			case 1:
				Query query1 = session.createQuery("from User where " + list_field.get(0) + " = :value0");
				query1.setParameter("value0", list_value.get(0));
				return query1.list();
			case 2:
				Query query2 = session.createQuery("from User where " + list_field.get(0) + " = :value0 and " + list_field.get(1) + " = :value1");
				query2.setParameter("value0", list_value.get(0));
				query2.setParameter("value1", list_value.get(1));
				return query2.list();
			}　
			إرجاعُ null;
		}
		catch(الاستثناء استثناء)
		{
			System.out.println("خطأ أثناء الحصول على بيانات المصفية :: " + استثناء.الحصولعلىالرسالة());
			إرجاعُ null;
		}
		في نهاية الأمر
		{
			جلسة_التحميل.التحميل;
		}
	}
}

إنشاء كلاس_الخدمة_التحقيق;
في هذا المكان، سنقوم بإنشاء كلاس_الخدمة_التحقيق، الذي يعتبر جسراً بين كلاس_التحقيق و كلاس_الشخصية.

UserService.java

مثال

بكيتكوم.و3كوديدبكس.سيارچفيلدإكزامبل.خدمة.تحقيق.المواجهات;
import　java.util.List;
import　com.w3codebox.searchfieldexample.entity.User;
العموميةُ interface UserService {
	العموميةُ int حفظالمستخدم(User user);
	العموميةُ List<User> الحصولعلىبياناتالمصفية(User user);
}

إنشاء كلاس_الخدمة_التحقيق;

UserService.java

مثال

بكيتكوم.و3كوديدبكس.سيارچفيلدإكزامبل.خدمة.تحقيق;
import　java.util.List;
إدراجُ javax.transaction.Transactional;
import　org.springframework.beans.factory.annotation.Autowired;
إدراجُ org.springframework.stereotype.Service;
إدراجُ com.w3codebox.searchfieldexample.DAO.المواجهات.UserDAO;
import　com.w3codebox.searchfieldexample.entity.User;
import　com.w3codebox.searchfieldexample.service.interfaces.UserService;
@Service("userService")
العموميةُ class UserServiceImpl implements UserService {
	@Autowired
	UserDAO userDAO;
	@Transactionالإجرائية;
	العموميةُ int حفظالمستخدم(User user)　{
		إرجاعُ userDAO.حفظالمستخدم(user)　;
	}
	@Transactionالإجرائية;
	العموميةُ List<User> الحصولعلىبياناتالمصفية(User user) {
		إرجاعُ userDAO.الحصولعلىبياناتالمصفية(user);
	}
}

إنشاء كلاس_التحكم;

كلاس_المستخدمير;

مثال

بكيتكوم.و3كوديدبكس.سيارچفيلدإكزامبل.ريستكонтرولير;
import　java.util.List;
import　org.springframework.beans.factory.annotation.Autowired;
import　org.springframework.web.bind.annotation.CrossOrigin;
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　com.w3codebox.searchfieldexample.entity.User;
import　com.w3codebox.searchfieldexample.service.interfaces.UserService;
@RestController
@RequestMapping("/api")
@CrossOrigin(origins　=　"http://localhost:4200",　allowedHeaders　=　"*",　exposedHeaders　=　"Authorization")
public　class　UserController　{
	@Autowired　
	private　UserService　userService;
	@PostMapping("/saveUser")
	public　int　saveAdminDetail(@RequestBody　User　user)　{
		return　userService.SaveUser(user);
	}
	@PostMapping("/filterData")
	public　List<User>　getFilteredData(@RequestBody　User　user)　{
		return userService.getFilteredData(user);
	}
}

إنشاء ملفات الخصائص
في هذا المكان، نحن نصنع في مشروعنا src/main/resources إنشاء ملفات الخصائص الداخلية.

persistence-mysql.properties

مثال

## إعدادات صلة JDBC
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/searchfieldexample?useSSL=false
jdbc.user=root
jdbc.password=
## إعدادات مسار الصلة
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## إعدادات Hibernate
<!-- hibernate.dialect=org.hibernate.dialect.MySQLDialect -->
hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql=true
hibernate.format_sql=true
hibernate.hbm2ddl=update
hibernate.packagesToScan=com.w3codebox.searchfieldexample.entity

مodule Angular

دعونا نرى بنية الملفات الخاصة بAngular:

إنشاء مشروع Angular

استخدام الأمر التالي لإنشاء مشروع Angular:

ng new SearchFieldExample

في هذا المكان، SearchFieldExample اسم المشروع هو.

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

استخدام الأمر التالي لتركيب البرنامج الإرشادي في المشروع.

npm install [email protected] --save

الآن، شملوا النص التالي في ملفات الستايل الخاصة بك.

مثال

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

إنشاء المكون
فتح المشروع في Visual Studio ثم استخدم الأمر التالي لإنشاء مكونات Angular:
ng g c ShowData

ونحن نستخدم الأمر التالي أيضًا: -

ng gs services/User

تحرير ملف app.module.ts جلب HttpModule -في هذا المكان، قمنا بجلب HttpModule HttpModule ، وقم بتحديد هذا في قائمة imports. تسجيل فئة الخدمة-في هذا المكان، ذكرنا فئة الخدمة في قائمة providers. جلب ReactiveFormsModule -في هذا المكان، سنقوم بجلب ReactiveFormsModule للبنية التفاعلية، وقم بتحديد هذا في قائمة imports.

مثال

import　{　BrowserModule　}　from　'@angular/platform-browser';
import　{　NgModule　}　from　'@angular/core';
//　import　ReactiveFormsModule　for　reactive　form
import　{　ReactiveFormsModule　}　from　'@angular/forms';
//　import　Http　module
import　{　HttpModule　}　from　'@angular/http';
import　{　AppComponent　}　from　'./app.component';
import　{　ShowDataComponent　}　from　'./show-data/show-data.component';
import　{　UserService　}　from　'./services/user.service';
@NgModule({
　　declarations:　[
　　　　AppComponent,
　　　　ShowDataComponent
　　],
　　imports:　[
　　　　BrowserModule,
　　　　ReactiveFormsModule,
　　　　HttpModule
　　],
　　providers:　[UserService],
　　bootstrap:　[AppComponent]
})}}
export　class　AppModule　{　}

تحرير app.component.html ملف

مثال

<app-show-data></app-show-data>

إنشاء User.ts كلاس

لنستخدم الأمر التالي لإنشاء كائن: -

ng g كلاس class/User

الآن، في User تحديد الحقول الإلزامية في الكائن.

مثال

export　class　User　{
　　　　name　:　string;
　　　　emailId　:　string;
　　　　qualification　:　string;
}

هذا النوع من الكائن يهدف إلى ربط الحقول المحددة بحقول كائن Spring.

تحرير user.service.ts ملف

مثال

import　{　Injectable　}　from　'@angular/core';
import　{　User　}　from　'../classes/user';
import　{　Http　}　from　'@angular/http';
@Injectable({
　　providedIn:　'root'
})}}
export　class　UserService　{
　　private　baseUrl　=　"http://localhost:8080/SearchFieldExample/api/";
　　constructor(private　http　:　Http)　{　}
　　getData(user　:　User)
　　{
　　　　let　url　=　this.baseUrl　+　"filterData";
　　　　return　　this.http.post(url　,　user);
　　}
}

تحرير show-data.component.ts ملف

مثال

import　{　Component,　OnInit　}　from　'@angular/core';
import　{　User　}　from　'../classes/user';
import　{　UserService　}　from　'../services/user.service';
import　{　FormGroup,　FormControl　}　from　'@angular/forms';
@Component({
　　selector:　'app-show-data',
　　templateUrl:　'./show-data.component.html',
　　styleUrls:　['./show-data.component.css']
})}}
export　class　ShowDataComponent　implements　OnInit　{
　　private　user　=　new　User();
　　private　data;
　　constructor(private　userService　:　UserService)　{　}
　　ngOnInit()　{
　　　　this.getData(this.user);
　　}
　　form　=　new　FormGroup({
　　　　name　:　new　FormControl()
　　　　email　:　new　FormControl()
　　});
　　getData(user)
　　{
　　　　　　this.userService.getData(user).subscribe(
　　　　　　　　response　=>　{
　　　　　　　　　　this.data　=　response.json();
　　　　　　　　},
　　　　　　　　error　=>　{
　　　　　　　　　　console.log("error　while　getting　user　Details");
　　　　　　　　}
　　　　　　);
　　}
　　searchForm(searchInfo)
　　{
　　　　　　　　this.user.name　=　this.Name.value;
　　　　　　　　this.user.emailId　=　this.Email.value;
　　　　　　　　this.getData(this.user);
　　}
　　get　Name()
　　{
　　　　return　this.form.get('name');
　　}
　　get　Email()
　　{
　　　　return　this.form.get('email');
　　}
}

تحرير show-data.component.html ملف

مثال

<br><br>
<div class="row">
　　　　<div class="col-md-offset-4 col-md-4">　
　　　　　　　　<form　[formGroup]="form"　#searchInfo　(ngSubmit)="searchForm(searchInfo)"><table>
　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="name"　placeholder="Enter　name"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="email"　placeholder="Enter　EmailId"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td><button class="btn btn-primary hidden-xs">البحث</button></td>
　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　</table>
　　　　　　　　</form>
　　　　</div>
</div>
<br><br>
<div class="row">
　　　　<div class="col-md-offset-4 col-md-4">
　　　　　　　　<table class="table table-bordered table-striped table-responsive">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　<th>الاسم</th>
　　　　　　　　　　　　　　　　<th>البريد الإلكتروني</th>
　　　　　　　　　　　　　　　　<th>الشرف</th>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<ng-container *ngFor="let item of data">　
　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　<td>{{item.name}}</td>
　　　　　　　　　　　　　　　　　　　　<td>{{item.emailId}}</td>
　　　　　　　　　　　　　　　　　　　　<td>{{item.qualification}}</td>
　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　</ng-container>
　　　　　　　　</table>
　　　　</div>
</div>

بعد إكمال العمل، أدخل URL في الويب http: //localhost: 4200/متصفح. سيظهر الصفحة التالية:

الآن، يمكننا البحث عن البيانات من خلال تقديم كلمة مفتاحية محددة في حقل البحث.

البحث عن طريق الاسم:

البحث عن طريق معرف البريد الإلكتروني:

دخول Angular Spring وإلغاء التسجيل

دليل Spring

تطبيق Spring Angular مع حقل البحث

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

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

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

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

مodule Spring

مodule Angular

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