Accesso e disconnessione Angular di Spring

Applicazione di ricerca Spring Angular

In questa sezione, creeremo un'applicazione Web di Search Field. L'applicazione include dati in forma tabellare con campi di ricerca. In questa integrazione, utilizziamo Spring per il lato back-end e Angular per il lato front-end.

Applicazione in funzione

Una volta che abbiamo deployato l'applicazione sul server, viene generato un modulo che contiene dati in forma tabellare e alcuni campi di ricerca. Ora, possiamo cercare i dati esistenti in questi campi. In questo caso, utilizziamo due campi di ricerca - nome e ID email. Per cercare dati, è necessario fornire una parola chiave completa in qualsiasi campo di ricerca.

Strumenti da utilizzare

Utilizzare qualsiasi IDE per sviluppare progetti Spring e Hibernate. Potrebbe essere MyEclipse/Eclipse/Netbeans. In questo caso, stiamo utilizzando Eclipse. Utilizzato per il database MySQL. Utilizza qualsiasi IDE per sviluppare progetti Angular. Può essere Visual Studio Code/Sublime. Qui stiamo utilizzando Visual Studio Code. Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Le tecnologie che utilizziamo

Ecco le tecnologie che stiamo utilizzando:

Spring 5 Hibernate 5 Angolo 6 MYSQL

Creazione del database

Creiamo il database searchfieldexample .Poiché Hibernate crea automaticamente le tabelle, non è necessario crearle. Qui, dobbiamo fornire esplicitamente i dati nella tabella in modo che possano apparire sullo schermo per eseguire l'operazione di ricerca. Ma possiamo anche importare i dati dai file esistenti nel link di download.

Modulo Spring

Ecco la struttura dei directory di Spring che dobbiamo seguire:

Per sviluppare un'applicazione di ricerca dei campi, segui i seguenti passaggi: -

Aggiungi le dipendenze al file pom.xml.

pom.xml

Esempio

<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

Esempio

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() {
		// creare il pool di connessioni
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		// impostare il driver jdbc
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			throw new RuntimeException(exc);
		}
		// impostare le proprietà della connessione database
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		// impostare le proprietà del pool di connessione
		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() {
		// impostare le proprietà hibernate
		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.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl"));
		return props;				
	}
	// need a helper method　
		// read environment property and convert to int
		private int get_intProperty(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());
			return sessionFactory;
		}
		@Bean
		@Autowired
		public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
			// configurazione del gestore delle transazioni basata sulla sessionFactory
			HibernateTransactionManager txManager = new HibernateTransactionManager();
			txManager.setSessionFactory(sessionFactory);
			return txManager;
		}	
}

MySpringMvcDispatcherServletInitializer.java

Esempio

package com.w3codebox.searchfieldexample.config;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
	@Override
	protected Class<?>[] getRootConfigClasses() {
		// TODO metodo generato automaticamente
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[]{ DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[]{ "/" };
	}
}

Creazione della classe entità
Qui creeremo una classe Entity/POJO (Oggetto Java Ordinario)

User.java

Esempio

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 "Utente [userId=" + userId + ", name=" + name + ", emailId=" + emailId + ", qualification=" + qualification
				+ "]";
	}
}

Creare l'interfaccia DAO
In questo caso, stiamo creando un'interfaccia DAO per eseguire operazioni relative al database.

UserDAO.java

Esempio

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

Creare la classe di implementazione dell'interfaccia DAO

UserDAOImpl.java

Esempio

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("Eccezione durante il salvataggio dei dati nel 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 and " + list_field.get(1) + " = :value1");
				query2.setParameter("value0", list_value.get(0));
				query2.setParameter("value1", list_value.get(1));
				return query2.list();
			}　
			return null;
		}
		catch(Exception exception)
		{
			System.out.println("Errore durante l'ottenimento dei dati filtrati :: " + exception.getMessage());
			return null;
		}
		finally
		{
			session.flush();
		}
	}
}

Creare l'interfaccia di livello di servizio
Qui creeremo un'interfaccia di livello di servizio che funge da ponte tra l'interfaccia DAO e le classi Entity.

UserService.java

Esempio

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

Creare la classe di implementazione del livello di servizio

UserServiceImpl.java

Esempio

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

Creare la classe del controller

UserController.java

Esempio

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

Creare il file di proprietà
Qui, stiamo creando il file di proprietà nel progetto. src/main/resources Creare file di proprietà interni.

persistence-mysql.properties

Esempio

## Proprietà di connessione JDBC #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/searchfieldexample?useSSL=false
jdbc.user=root
jdbc.password=
## Proprietà del pool di connessione #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Proprietà 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

Modulo Angular

Vediamo la struttura dei directory di Angular:

Creare un progetto Angular

Utilizza il seguente comando per creare un progetto Angular:

ng new SearchFieldExample

In questo caso, SearchFieldExample è il nome del progetto.

Installare il framework CSS Bootstrap

Utilizza il seguente comando per installare il framework di guida nel progetto.

installa [email protected] con il comando npm install --save

Ora, includere il codice nei file di stili contenuti nei seguenti file di stile.

Esempio

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

Generare componenti
Aprire il progetto in Visual Studio e utilizzare il seguente comando per generare i componenti Angular:
ng g c ShowData

Utilizzando il seguente comando: -

ng gs services/User

Modificare il file app.module.ts Importare HttpModule -In questo caso, esportiamo per le richieste del server HttpModule e specificarlo nell'array imports. Registrare la classe di servizio-In questo caso, menzioniamo la classe di servizio nel array providers. Importare ReactiveFormsModule -In questo caso, esporteremo ReactiveFormsModule Utilizzato per i moduli reattivi e specificato nell'array imports.

Esempio

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　{　}

Modifica app.component.html File

Esempio

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

Creazione User.ts Classe

Usiamo il seguente comando per creare una classe: -

ng g classe class/User

Ora, in User Specificare i campi obbligatori nella classe.

Esempio

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

L'obiettivo di questa classe è mappare i campi specificati con i campi delle entità Spring.

Modifica user.service.ts File

Esempio

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

Modifica show-data.component.ts File

Esempio

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("errore　nell'ottenimento　delle　dettagli　utente");
　　　　　　　　}
　　　　　　);
　　}
　　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');
　　}
}

Modifica show-data.component.html File

Esempio

<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="Inserisci　nome"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="email"　placeholder="Inserisci　EmailId"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td><button class="btn btn-primary hidden-xs">Cerca</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>Nome</th>
　　　　　　　　　　　　　　　　<th>Email</th>
　　　　　　　　　　　　　　　　<th>Qualifica</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>

Dopo aver completato, inserisci l'URL http: //localhost: 4200/nel browser. Comparirà la seguente pagina web:

Ora, possiamo cercare i dati fornendo una parola chiave specifica nel campo di ricerca.

Cerca per nome:

Cerca tramite ID e-mail:

Accesso e disconnessione Angular di Spring

Corso di Spring

Applicazione di ricerca Spring Angular

Applicazione in funzione

Strumenti da utilizzare

Le tecnologie che utilizziamo

Creazione del database

Modulo Spring

Modulo Angular

Installare il framework CSS Bootstrap