Angular + Spring搜索字段示例

在开发Web应用程序时，常常需要添加搜索功能以查找特定数据。本示例介绍如何使用Angular和Spring构建一个可以在前端进行输入并在后端进行搜索的搜索字段。

Angular应用程序步骤

1. 创建Angular应用程序

使用Angular CLI创建一个新应用程序：

ng new my-app

2. 添加搜索表单

在应用程序组件的HTML中，添加一个搜索表单：

<form (submit)="search()" #searchForm="ngForm">
  <input type="text" name="searchTerm" [(ngModel)]="searchTerm" placeholder="Search...">
  <button type="submit">Search</button>
</form>

该表单包含一个文本框和一个搜索按钮，点击搜索按钮时，将调用名为search()的方法。

3. 创建搜索方法

在应用程序组件的TypeScript文件中，创建search()方法：

search(): void {
  // 在此处实现搜索逻辑
}

4. 发送搜索请求

使用Angular的HttpClient服务向后端发送搜索请求：

import { HttpClient } from '@angular/common/http';

// 在组件构造函数中注入HttpClient
constructor(private http: HttpClient) {}

// 在search()方法中，发送搜索请求
search(): void {
  this.http.get('/api/search?term=' + this.searchTerm).subscribe(result => {
    // 在此处处理搜索结果
  });
}

5. 处理搜索结果

在search()方法中，处理从后端收到的搜索结果：

searchResult: any[];

search(): void {
  this.http.get('/api/search?term=' + this.searchTerm).subscribe((result: any[]) => {
    this.searchResult = result;
  });
}

在组件的HTML中，使用ngFor指令渲染搜索结果：

<ul>
  <li *ngFor="let item of searchResult">{{item.name}}</li>
</ul>

Spring应用程序步骤

1. 创建Spring应用程序

使用Spring Initializr创建一个新项目，包括Spring Web和Spring Data JPA依赖项。

2. 创建数据实体和仓库

创建一个数据实体和一个Spring Data JPA仓库，以便于在数据库中存储和检索数据。

@Entity
public class Item {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;

  private String name;

  // getter和setter
}

public interface ItemRepository extends JpaRepository<Item, Long> {
  List<Item> findByNameContaining(String term);
}

3. 创建搜索控制器

创建一个Spring MVC控制器，处理搜索请求并调用ItemRepository进行查询：

@RestController
@RequestMapping("/api")
public class SearchController {
  @Autowired
  private ItemRepository itemRepository;

  @GetMapping("/search")
  public List<Item> search(@RequestParam("term") String term) {
    return itemRepository.findByNameContaining(term);
  }
}

4. 运行应用程序

使用Maven构建并运行应用程序：

mvn spring-boot:run

效果图

以上就是本示例的完整实现。当用户在前端输入搜索关键字并点击搜索按钮时，Angular应用程序将发送搜索请求到Spring后端应用程序。Spring应用程序将检索数据库并返回与搜索关键字匹配的所有记录。最后，Angular应用程序将渲染搜索结果。