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

Tutoriales de Spring

Aplicación de campo de búsqueda Spring Angular

En esta sección, crearemos una aplicación web de campo de búsqueda. La aplicación incluye datos en forma de tabla con campos de búsqueda. En esta integración, usamos Spring para el lado de backend, y Angular para el lado de frontend.

Aplicación de trabajo

Una vez que desplegamos la aplicación en el servidor, se generará un formulario que contenga datos en forma de tabla y algunos campos de búsqueda. Ahora, podemos buscar datos existentes en la tabla de estos campos. Aquí, usamos dos campos de búsqueda-Nombre y ID de correo electrónico. Para buscar datos, es necesario proporcionar la palabra clave completa en cualquier campo de búsqueda.

Herramientas a usar

Usar cualquier IDE para desarrollar proyectos Spring y Hibernate. Puede ser MyEclipse/Eclipse/Netbeans. Aquí, estamos utilizando Eclipse。 para la base de datos MySQL. Usar cualquier IDE para desarrollar proyectos Angular. Puede ser Visual Studio Code/Sublime. Aquí, estamos utilizando Visual Studio Code。 Servidor: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere。

Tecnologías que usamos

Aquí, estamos utilizando las siguientes tecnologías:

Spring5 hibernate5 ángulo6 MYSQL

Crear base de datos

Vamos a crear la base de datos searchfieldexample 。Dado que Hibernate crea automáticamente las tablas, no es necesario crearlas. Aquí, necesitamos proporcionar datos explícitamente en la tabla para que puedan aparecer en la pantalla para realizar operaciones de búsqueda. Pero también podemos importar datos de los archivos que existen en los enlaces de descarga.

Módulos de Spring

Vamos a ver la estructura de directorios de Spring que debemos seguir:

Para desarrollar una aplicación de campo de búsqueda, siga los siguientes pasos: -

Añadir dependencias al archivo 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>
	<!--　Añadir Jackson para los convertidores 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>
	<!--　to　compensate　for　java　9　no　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 

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() {
		//　crear un pool de conexiones
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　establecer el driver 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"));
		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());
			return sessionFactory;
		}
		@Bean
		@Autowired
		public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
			//　setup transaction manager based on session factory
			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-planteamiento de método generado automáticamente
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] {"/"};
	}
}

Crear clase de entidad
Aquí, crearemos una Entity/Clase POJO (Objeto Java ordinario y viejo).

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
				+　"]";
	}
}

Crear interfaz DAO
Aquí, estamos creando la interfaz DAO para realizar operaciones relacionadas con la base de datos.

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

create DAO interface implementation class

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("Excption 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 y "　+　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("Error al obtener los datos filtrados :: ");　+　exception.getMessage());
			return null;
		}
		finally
		{
			session.flush();
		}
	}
}

Crear la interfaz de la capa de servicios
Aquí, crearemos una interfaz de capa de servicios que actúa como puente entre las clases DAO y 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);
}

Crear la clase de implementación de la capa de servicios

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

Crear la clase controladora

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:42"00", "allowedHeaders = "*"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);
	}
}

Crear archivo de propiedades
Aquí, estamos creando el archivo de propiedades en el proyecto. src/main/resources Se crea el archivo de propiedades internamente.

persistence-mysql.properties 

## Propiedades de conexión JDBC #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/searchfieldexample?useSSL=false
jdbc.user=root
jdbc.password=
## Propiedades del pool de conexión #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Propiedades de 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　'./mostrar-data/mostrar-data.component';
import　{　UserService　}　from　'./services/user.service';
@NgModule({
　　declarations:　[
　　　　AppComponent,
　　　　ShowDataComponent
　　],
　　imports:　[
　　　　BrowserModule,
　　　　ReactiveFormsModule,
　　　　HttpModule
　　],
　　providers: [UserService],
　　bootstrap: [AppComponent]
})
export class AppModule { }

editar app.component.html Archivo 

<app-mostrar-data></app-mostrar-data>

Crear User.ts Clase

Vamos a usar el siguiente comando para crear una clase: -

ng g clase class/User

Ahora, en User Se especifican los campos obligatorios en la clase.

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

Este tipo de clase tiene como objetivo mapear los campos especificados con los campos de las clases de entidad de Spring.

editar user.service.ts Archivo 

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

editar mostrar-data.component.ts Archivo 

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-mostrar-data',
　　templateUrl: ''./mostrar-data.component.html',}}
　　styleUrls:　['./mostrar-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');
　　}
}

editar mostrar-data.component.html Archivo 

<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="Ingrese　nombre"　class="form-control"> </button>/td>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="email"　placeholder="Ingrese　EmailId"　class="form-control"> </button>/td>
　　　　　　　　　　　　　　　　　　　　<td><button class="btn btn-primary hidden-xs">Buscar/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-tabla bordeada-tabla rayada-responsive">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　<th>Nombre</th>/th>
　　　　　　　　　　　　　　　　<th>Correo electrónico</th>/th>
　　　　　　　　　　　　　　　　<th>Qualificación</th>/th>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<ng-container　*ngFor="let item of data">　
　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　<td>{{item.name}}</td>/td>
　　　　　　　　　　　　　　　　　　　　<td>{{item.emailId}}</td>/td>
　　　　　　　　　　　　　　　　　　　　<td>{{item.qualification}}</td>/td>
　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　</ng-container>
　　　　　　　　</table>
　　　　</div>
</div>

Después de completar, ingrese la URL en la web http: //localhost: 4200/Navegador. Aparece la siguiente página web:

Ahora, podemos buscar datos proporcionando una palabra clave específica en el campo de búsqueda.

Buscar por nombre:

Buscar por ID de correo electrónico:

Iniciar sesión y cerrar sesión en Angular de Spring