Приложение Spring Angular с полем поиска

В данном разделе мы создадим веб-приложение Search Field. Приложение включает данные в виде таблицы с полями поиска. В этой интеграции мы используем 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 Сон 5 Угол 6 MYSQL

Создание базы данных

Давайте создадим базу данных searchfieldexample .Поскольку Hibernate автоматически создает таблицы, создавать их не нужно. Здесь нам нужно явно предоставить данные в таблице, чтобы они могли отображаться на экране для выполнения поиска. Но мы также можем импортировать данные из файлов, существующих по ссылкам для загрузки.

Модули 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() {
		// создать пул соединений
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		// установить jdbc драйвер
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			throw new RuntimeException(exc);
		}
		// установить свойства подключения к базе данных
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		// установить свойства пулов соединений
		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() {
		// установить свойства 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;				
	}
	// необходим метод помощника　
		// прочитать свойство окружения и преобразовать в int
		private int get_intProperty(String propName) {
			String propVal = env.getProperty(propName);
			// теперь преобразовать в int
			int intPropVal = Integer.parseInt(propVal);
			return intPropVal;
		}
		@Bean
		public LocalSessionFactoryBean sessionFactory(){
			// создать фабрики сессий
			LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
			// установить свойства
			sessionFactory.setDataSource(myDataSource());
			sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
			sessionFactory.setHibernateProperties(getHibernateProperties());
			возврат sessionFactory;
		}
		@Bean
		@Autowired
		public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
			// настройка менеджера транзакций на основе session factory
			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 Автоматически сгенерированный метод stub
		return 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
	public String toString() {
		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 {
	public int SaveUser(User user);
	public List<User> getFilteredData(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;
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 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("Error while getting Filtered Data :: " + exception.getMessage());
			return null;
		}
		finally
		{
			session.flush();
		}
	}
}

Создание интерфейса слоя служб
Здесь мы создадим интерфейс слоя служб, который действует как мост между классом DAO и классом сущности.

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

Создание класса реализации слоя служб

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

Создание класса контроллера

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

Создание файла свойств
Здесь мы создаем файл свойств в проекте. 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

Модуль 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 и указание его в массиве 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 entity.

Редактировать 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("ошибка　при　получении　деталей　пользователя");
　　　　　　　　}
　　　　　　);
　　}
　　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="Ввести　имя"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="email"　placeholder="Ввести　EmailId"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td><button class="btn btn-primary hidden-xs">Search</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>Email</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 с полем поиска

Рабочее приложение

Инструменты, которые необходимо использовать

Используемые нами технологии

Создание базы данных

Модули Spring

Модуль Angular

Установите CSS-фреймворк Bootstrap