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

Tutoriel Spring

Application de champ de recherche Spring Angular

Dans cette section, nous allons créer une application Web de champ de recherche. Cette application comprend des données sous forme de tableau avec des champs de recherche. Dans cette intégration, nous utilisons Spring pour la partie backend, et Angular pour la partie frontend.

Application de travail

Une fois l'application déployée sur le serveur, un formulaire est généré contenant des données sous forme de tableau ainsi que quelques champs de recherche. Maintenant, nous pouvons rechercher des données existantes dans la table à partir de ces champs. Ici, nous utilisons deux champs de recherche-Nom et ID e-mail. Pour rechercher des données, vous devez fournir le mot-clé complet dans n'importe quel champ de recherche.

Outils à utiliser

Utilisez n'importe quel IDE pour développer des projets Spring et Hibernate. Il peut s'agir de MyEclipse/Eclipse/Netbeans. Ici, nous utilisons Eclipse. Pour la base de données MySQL. Utilisez n'importe quel IDE pour développer un projet Angular. Il peut s'agir de Visual Studio Code/Sublime. Ici, nous utilisons Visual Studio Code. Serveur: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Les technologies que nous utilisons

Ici, nous utilisons les technologies suivantes:

Spring5 Hibernate5 Angle6 MYSQL

Créer une base de données

Créons une base de données searchfieldexample 。Du fait que Hibernate crée automatiquement les tables, il n'est pas nécessaire de les créer. Ici, nous devons fournir explicitement des données dans la table afin qu'elles puissent apparaître sur l'écran pour effectuer des opérations de recherche. Cependant, nous pouvons également importer des données à partir de fichiers existants dans les liens de téléchargement.

Module Spring

Voyons la structure de répertoire Spring que nous devons suivre:

Pour développer une application de champ de recherche, suivez les étapes suivantes: -

Ajouter les dépendances au fichier 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>
	<!--　Ajouter Jackson pour les convertisseurs JSON　-->
	<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>
	<!--　pour compenser java　9　ne pas inclure jaxb　-->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api</artifactId>
		<version>2.3.0</version>
	</dependency>
　	
　	<!--　　Dépendance JUnit　-->
　　　　<dependency>
　　　　　　　　<groupId>junit</groupId>
　　　　　　　　<artifactId>junit</artifactId>
　　　　　　　　<version>3.8.1</version>
　　　　　　　　<scope>test</scope>
　　　　</dependency>
　　　
　　</dependencies>
　
　　<build>
　　　　<finalName>SearchFieldExample</finalName>
　　</build>
</project>

Création de la classe de configuration
Nous exécutons une configuration basée sur les annotations,而非XML. Par conséquent, nous créons deux classes et y spécifions la configuration nécessaire.

DemoAppConfig.java 

package 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() {
		//　créer un pool de connexions
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　définir le pilote jdbc
		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"));
		return myDataSource;
	}
	private Properties getHibernateProperties() {
		//　set hibernate properties
		Properties props = new Properties();
		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.hbm}}2ddl.auto", env.getProperty("hibernate.hbm2ddl"));
		retourner props;				
	}
	//　Besoin d'une méthode d'aide　
		//　Lire la propriété d'environnement et la convertir en int
		private int getIntProperty(String propName) {
			String propVal = env.getProperty(propName);
			//　Actuellement, convertissez en int
			int intPropVal = Integer.parseInt(propVal);
			retourner intPropVal;
		}
		@Bean
		public LocalSessionFactoryBean sessionFactory(){
			//　Créer des factorys de session
			LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
			//　Définir les propriétés
			sessionFactory.setDataSource(myDataSource());
			sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
			sessionFactory.setHibernateProperties(getHibernateProperties());
			retourner sessionFactory;
		}
		@Bean
		@Autowired
		public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
			//　Configurer la gestionnaire de transactions basée sur la factory de session
			HibernateTransactionManager txManager = new HibernateTransactionManager();
			txManager.setSessionFactory(sessionFactory);
			return txManager;
		}	
}

MySpringMvcDispatcherServletInitializer.java 

package com.w3codebox.searchfieldexample.config;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
	@Override
	protected Class<?>[] getRootConfigClasses() {
		//　TOdo Auto-généré par stub de méthode
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] { "/};
	}
}

Créer la classe d'entité
Ici, nous allons créer une Entity/Classe POJO (ancien objet Java ordinaire).

User.java 

package 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
	public String toString() {
		return "User [userId="　+　userId　+　", name="　+　name　+　", emailId="　+　emailId　+　", qualification="　+　qualification
				+　"]";
	}
}

Création de l'interface DAO
Ici, nous créons une interface DAO pour exécuter des opérations liées à la base de données.

UserDAO.java 

package com.w3codebox.searchfieldexample.DAO.interfaces;
import java.util.List;
import com.w3codebox.searchfieldexample.entity.User;
public interface UserDAO {}}
	public int SaveUser(User user);
	public List<User> getFilteredData(User user);
}

Créer la classe d'implémentation de l'interface 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;
import com.w3codebox.searchfieldexample.DAO.interfaces.UserDAO;
import com.w3codebox.searchfieldexample.entity.User;
@Repository("userDAO")
public class UserDAOImpl implements UserDAO {
	@Autowired
	SessionFactory sessionFactory;
	public int SaveUser(User user) {
		Session session = null;
		try {
			session = sessionFactory.getCurrentSession();
			int userId = (Integer) session.save(user);
			return userId;
		}
		catch(Exception exception)
		{
			System.out.println("Exception while saving data into DB ");　+　exception);
			return 0;
		}
		finally
		{
			session.flush();
		}
	}
	public List<User> getFilteredData(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 et "　+　list_field.get(1)　+　" = :value1);
				query2.setParameter("value0", list_value.get(0));
				query2.setParameter("value",1", list_value.get(1));
				return query2.list();
			}　
			return null;
		}
		catch(Exception exception)
		{
			System.out.println("Erreur lors de l'obtention des données filtrées :: ");　+　exception.getMessage());
			return null;
		}
		finally
		{
			session.flush();
		}
	}
}

Créer l'interface de couche de service
Ici, nous allons créer une interface de couche de service qui agit comme un pont entre les classes DAO et Entity.

UserService.java 

package com.w3codebox.searchfieldexample.service.interfaces;
import java.util.List;
import com.w3codebox.searchfieldexample.entity.User;
public interface UserService {
	public int SaveUser(User user);
	public List<User> getFilteredData(User user);
}

Créer la classe d'implémentation de couche de service

UserServiceImpl.java 

package com.w3codebox.searchfieldexample.service.implementation;
import java.util.List;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.w3codebox.searchfieldexample.DAO.interfaces.UserDAO;
import com.w3codebox.searchfieldexample.entity.User;
import com.w3codebox.searchfieldexample.service.interfaces.UserService;
@Service("userService")
public class UserServiceImpl implements UserService {
	@Autowired
	UserDAO userDAO;
	@Transactional
	public int SaveUser(User user) {
		return userDAO.SaveUser(user) ;
	}
	@Transactional
	public List<User> getFilteredData(User user) {
		return userDAO.getFilteredData(user);
	}
}

Créer la classe contrôleur

UserController.java 

package com.w3codebox.searchfieldexample.restcontroller;
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);
	}
}

Création de fichiers de propriétés
Ici, nous sommes en train de projet src/main/resources Création interne de fichiers de propriétés.

persistence-mysql.properties 

## Propriétés de connexion JDBC #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/searchfieldexample?useSSL=false
jdbc.user=root
jdbc.password=
## Propriétés du pool de connexions #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Propriétés 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

Angular模块

让我们看看Angular的目录结构:

创建一个Angular项目

使用以下命令创建一个Angular项目:

ng new SearchFieldExample


此处， SearchFieldExample 是项目的名称。

安装Bootstrap CSS框架

使用以下命令在项目中安装引导程序。

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 ，并在imports数组中指定它。 注册服务类-在这里，我们在提供者数组中提到了服务类。 导入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　'./afficher-data/afficher-data.component';
import　{　UserService　}　from　'./services/user.service';
@NgModule({
　　declarations:　[
　　　　AppComponent,
　　　　ShowDataComponent
　　],
　　imports:　[
　　　　BrowserModule,
　　　　ReactiveFormsModule,
　　　　HttpModule
　　],
　　providers: [UserService],
　　bootstrap: [AppComponent]
})
export class AppModule { }

éditer app.component.html Fichier 

<app-afficher-data></app-afficher-data>

Créer User.ts Classe

Utilisons la commande suivante pour créer une classe: -

ng g classe class/User

Maintenant, dans User Spécifiez les champs obligatoires dans la classe.

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

L'objectif de cette classe est de mapper les champs spécifiés avec les champs des classes d'entités Spring.

éditer user.service.ts Fichier 

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

éditer afficher-data.component.ts Fichier 

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-afficher-data',
　　templateUrl: ''./afficher-data.component.html',}}
　　styleUrls:　['./afficher-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("erreur　en　obtenant　les　détails　de　l'utilisateur");
　　　　　　　　}
　　　　　　);
　　}
　　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');
　　}
}

éditer afficher-data.component.html Fichier 

<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="Entrez　le　nom"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="email"　placeholder="Entrez　EmailId"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td><button class="btn btn-primary hidden-xs">Recherche</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-tableau boudé-tableau stripé-responsive">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　<th>Nom</th>
　　　　　　　　　　　　　　　　<th>Email</th>
　　　　　　　　　　　　　　　　<th>Qualification</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>

Après la fin, entrez l'URL http: sur le Web //localhost: 4200/Navigateur. Une page suivante apparaît:

Maintenant, nous pouvons rechercher des données en fournissant un mot-clé spécifique dans le champ de recherche.

Recherche par nom:

Recherche par ID d'e-mail:

Connexion et déconnexion Angular Spring