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

Tutoriais do Spring

Aplicação de campo de busca Spring Angular

Nesta seção, criaremos uma aplicação Web de campo de busca. A aplicação inclui dados em formato de tabela com campos de busca. Nesta integração, usamos o Spring para o lado de backend, e o Angular para o lado de frontend.

Aplicação de trabalho

Depois de deployarmos a aplicação no servidor, será gerado um formulário que contém dados em formato de tabela e alguns campos de busca. Agora, podemos buscar dados existentes nestes campos na tabela. Aqui, usamos dois campos de busca-Nome e ID de e-mail. Para buscar dados, é necessário fornecer a palavra-chave completa em qualquer campo de busca.

Ferramentas a usar

Use qualquer IDE para desenvolver projetos Spring e Hibernate. Pode ser o MyEclipse/Eclipse/Netbeans. Aqui, estamos usando o Eclipse. Para o banco de dados MySQL. Use qualquer IDE para desenvolver projetos Angular. Pode ser o Visual Studio Code/Sublime. Aqui, estamos usando o Visual Studio Code. Servidor: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Tecnologias que usamos

Aqui, estamos usando as seguintes tecnologias:

Spring5 hibernate5 ângulo6 MYSQL

Criar banco de dados

Vamos criar o banco de dados searchfieldexample 。Devido ao Hibernate criar automaticamente as tabelas, não é necessário criar tabelas. Aqui, precisamos fornecer explicitamente os dados na tabela para que possam aparecer na tela para executar operações de busca. Mas também podemos importar dados de arquivos existentes em links de download.

Módulo do Spring

Vamos ver a estrutura de diretórios do Spring que devemos seguir:

Para desenvolver uma aplicação de campo de busca, siga os seguintes passos: -

Adicionar dependências ao arquivo 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>
	<!--　Adicionar Jackson para conversores 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>
	<!--　para compensar java　9　não incluindo jaxb　-->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api</artifactId>
		<version>2.3.0</version>
	</dependency>
　	
　	<!--　　Dependency do JUnit　-->
　　　　<dependency>
　　　　　　　　<groupId>junit</groupId>
　　　　　　　　<artifactId>junit</artifactId>
　　　　　　　　<version>3.8.1</version>
　　　　　　　　<scope>test</scope>
　　　　</dependency>
　　　
　　</dependencies>
　
　　<build>
　　　　<finalName>SearchFieldExample</finalName>
　　</build>
</project>

Criar classe de configuração
Nós executamos configuração baseada em comentários, em vez de XML. Portanto, criamos duas classes e especificamos a configuração necessária nelas.

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() {
		//　criar pool de conexões
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　definir o 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;				
	}
	//　preciso de um método auxiliar　
		//　ler propriedade do ambiente e converter para int
		private int getIntProperty(String propName) {
			String propVal = env.getProperty(propName);
			//　agora converter para int
			int intPropVal = Integer.parseInt(propVal);
			return intPropVal;
		}
		@Bean
		public LocalSessionFactoryBean sessionFactory(){
			//　criar fábricas de sessão
			LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
			//　definir as propriedades
			sessionFactory.setDataSource(myDataSource());
			sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
			sessionFactory.setHibernateProperties(getHibernateProperties());
			return sessionFactory;
		}
		@Bean
		@Autowired
		public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
			//　configurar gerenciador de transações com base no fábrica de sessão
			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-esqueleto de método gerado
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] {"/"};
	}
}

Criar classe de entidade
Aqui, criaremos um Entity/Classe POJO (Objeto Java comum antigo).

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

Criar interface DAO
Aqui, estamos criando a interface DAO para executar operações relacionadas ao banco de dados.

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

Criar a implementação da 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("Excção ao salvar dados no 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("value",1", list_value.get(1));
				return query2.list();
			}　
			return null;
		}
		catch(Exception exception)
		{
			System.out.println("Erro ao obter Dados Filtrados :: ");　+　exception.getMessage());
			return null;
		}
		finally
		{
			session.flush();
		}
	}
}

Criar interface de camada de serviço
Aqui, criaremos uma interface de camada de serviço que atua como ponte entre a classe DAO e a classe 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);
}

Criar classe de implementação da camada de serviço

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

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

criando o arquivo de propriedades
Aqui, estamos no projeto src/main/resources Internal property file creation.

persistence-mysql.properties 

## Propriedades de conexão JDBC #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/searchfieldexample?useSSL=false
jdbc.user=root
jdbc.password=
## Propriedades do pool de conexões #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Propriedades do 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 Arquivo 

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

Criar User.ts Classe

Vamos usar o seguinte comando para criar uma classe: -

ng g classe class/User

Agora, no User Especificar os campos obrigatórios na classe.

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

Este tipo de classe tem como objetivo mapear os campos especificados com os campos das classes de entidade do Spring.

editar user.service.ts Arquivo 

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 Arquivo 

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("erro ao obter detalhes do usuário");
　　　　　　　　}
　　　　　　);
　　}
　　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 Arquivo 

<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="Insira　nome"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="email"　placeholder="Insira　EmailId"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td><button class="btn btn-primary hidden-xs">Procurar</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-tabela limitada-tabela estratificada-responsive">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　<th>Nome</th>
　　　　　　　　　　　　　　　　<th>E-mail</th>
　　　　　　　　　　　　　　　　<th>Qualificação</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>

Após concluir, insira a URL http: no Web //localhost: 4200/Navegador. Aparece a seguinte página:

Agora, podemos procurar dados fornecendo uma palavra-chave específica no campo de pesquisa.

Procurar por Nome:

Procurar por ID de E-mail:

Login e Logout Angular do Spring