本文概述

• 准备工作
• 使用工具
• 我们使用的技术
• 创建数据库
• Spring模块
• Angular模块
• 安装Bootstrap CSS框架

在本节中, 我们将创建一个Search Field Web应用程序。该应用程序包括具有搜索字段的表格形式的数据。在这种集成中, 我们使用Spring处理后端部分, 使用Angular处理前端部分。
准备工作

• 一旦将应用程序部署到服务器上, 就会生成一个表单, 其中包含表格形式的数据以及一些搜索字段。
• 现在, 我们可以从这些字段中搜索表中存在的数据。在这里, 我们使用两个搜索字段-名称和电子邮件ID。
• 要搜索数据, 需要在任何搜索字段中提供完整的关键字。

使用工具

• 使用任何IDE来开发Spring和Hibernate项目。可能是MyEclipse / Eclipse / Netbeans。在这里, 我们正在使用Eclipse。
• MySQL用于数据库。
• 使用任何IDE来开发Angular项目。它可能是Visual Studio代码/ Sublime。在这里, 我们正在使用Visual Studio Code。
• 服务器：Apache Tomcat / JBoss / Glassfish / Weblogic / Websphere。

我们使用的技术 在这里, 我们使用以下技术：

• Spring5
• 休眠5
• Angular6
• 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.srcmini< /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

package com.srcmini.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.srcmini.searchfieldexample") @PropertySource(value = http://www.srcmini.com/{"classpath:persistence-mysql.properties" }) @PropertySource(value = http://www.srcmini.com/{"classpath:persistence-mysql.properties" }) @PropertySource(value = http://www.srcmini.com/{"classpath:application.properties" }) public class DemoAppConfig implements WebMvcConfigurer { @Autowired private Environment env; @Bean public DataSource myDataSource() {// create connection pool ComboPooledDataSource myDataSource = new ComboPooledDataSource(); // set the jdbc driver 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.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl")); return props; } // need a helper method // read environment property and convert to intprivate 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.srcmini.searchfieldexample.config; import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer; public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer { @Override protected Class< ?> [] getRootConfigClasses() { // TODO Auto-generated method stub return null; } @Override protected Class< ?> [] getServletConfigClasses() { return new Class[] { DemoAppConfig.class }; } @Override protected String[] getServletMappings() { return new String[] { "/" }; } }

• 创建实体类
  在这里, 我们正在创建一个Entity / POJO(普通的旧Java对象)类。

User.java

package com.srcmini.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 + "]"; } }

• 创建DAO界面
  在这里, 我们正在创建DAO接口以执行与数据库相关的操作。

UserDAO.java

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

• 创建DAO接口实现类

UserDAOImpl.java

package com.srcmini.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.srcmini.searchfieldexample.DAO.interfaces.UserDAO; import com.srcmini.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 = http://www.srcmini.com/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和Entity类之间的桥梁。

UserService.java

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

• 创建服务层实现类

UserServiceImpl.java

package com.srcmini.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.srcmini.searchfieldexample.DAO.interfaces.UserDAO; import com.srcmini.searchfieldexample.entity.User; import com.srcmini.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.srcmini.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.srcmini.searchfieldexample.entity.User; import com.srcmini.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 connection properties # jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/searchfieldexample?useSSL=false jdbc.user=root jdbc.password=# # Connection pool properties # connection.pool.initialPoolSize=5 connection.pool.minPoolSize=5 connection.pool.maxPoolSize=20 connection.pool.maxIdleTime=3000# # Hibernate properties # < !-- 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.srcmini.searchfieldexample.entity

Angular模块 让我们看看我们需要遵循的Angular目录结构：

文章图片

• 创建一个Angular项目

让我们使用以下命令创建一个Angular项目：
新的SearchFieldExample

文章图片

文章图片
在这里, SearchFieldExample是项目的名称。
安装Bootstrap CSS框架 使用以下命令在项目中安装引导程序。
npm install bootstrap@3.3.7-保存
现在, 在style.css文件中包含以下代码。

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

• 生成组件
  在Visual Studio中打开项目, 然后使用以下命令生成Angular组件：
  g c ShowData的

文章图片
我们还使用以下命令创建服务类：-
服务数量/用户

文章图片

• 编辑app.module.ts文件
  • Import 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类

让我们使用以下命令创建一个类：-
的g个类/用户

文章图片
现在, 在User类中指定必填字段。

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

该类的目的是将指定的字段与Spring实体类的字段进行映射。

• 编辑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"; returnthis.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 = http://www.srcmini.com/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'); }}

• 编辑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="Enter name" class="form-control"> < /td> < td> < input type="text" formControlName="email" placeholder="Enter 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> Name< /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>

完成后, 在Web浏览器中输入URL http：// localhost：4200 /。出现以下网页：

文章图片
现在, 我们可以通过在搜索字段中提供特定的关键字来搜索数据。
【Spring Angular搜索属性应用实例图解】按名称搜索：

文章图片
通过电子邮件ID搜索：

文章图片
下载此示例

推荐阅读

• 

  南京有哪些医院 南京各大医院特色专科
• 

  夏黑是提子吗
• 

  安卓抓包工具怎么用,ios有什么用抓包工具?
• 

  空腹不能吃柿子吗 柿子为什么吃了麻口
• 

  皮肤过敏能喝珍珠奶茶吗
• 

  宁夏是北方还是南方 宁夏属于南方还是北方呢
• 

  现实生活和职场小说一样吗？
• 

  如何用命令查看电脑的配置？电脑查配置的命令是什么？
• 

  抗原检测二维码用什么扫码
• 

  WPS表格中控件工具箱的巧妙用处_WPS office
• 

  什么样的护肤品是纯天然的
• 

  你们小时候有没有经历过觉得恐怖的事情？
• 

  如何炒茄子好吃又简单 如何炒茄子好吃，如何炒茄子好吃视频
• 

  博物多闻是什么意思啊 博物多闻是什么意思
• 

  num函数c语言 num函数c语言怎么算
• 

  mongodb配置数据库的步骤 mongodb搭建数据库
• 

  太平洋上的叫台风大西洋叫飓风吗 台风和飓风的区别
• 

  上传图片
• 

  在错误中进步
• 

  腻的拼音和组词语部首 腻的拼音和组词语

• AndroidRecyclerView网格布局
• Spring Angular文件上传应用程序示例图解
• Spring Angular CRUD应用实例图解
• Spring Angular登录和注销应用程序示例
• Spring Xstream示例详解
• Spring Java邮件教程入门详解
• Spring和Struts 2集成详细步骤和示例
• Spring Castor用法示例详解
• Spring通过HTTP Invoker进行远程处理示例