Angular + Spring搜索字段示例

本文将介绍如何使用Angular和Spring实现搜索字段功能。

Angular前端

在Angular中，可以使用HttpClient类发送HTTP请求。我们将发送搜索词到后端，并接收返回结果。

以下是一个Angular组件的代码示例：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  query = '';
  searchResult = null;

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  search() {
    this.http.get('/api/search?query=' + encodeURIComponent(this.query))
      .subscribe(data => {
        this.searchResult = data;
      });
  }
}

此示例中，我们使用了Angular的HttpClient类，并在search()方法中发送HTTP GET请求。我们将搜索字符串编码为URL参数，并将其发送给后端的/api/search端点。我们使用subscribe方法处理响应，并将结果存储在searchResult变量中。

Spring后端

在Spring后端，我们需要创建一个REST控制器来处理请求。该控制器应该有一个方法可以响应GET请求，并将搜索查询字符串传递给服务层。服务层应该处理该请求并返回相应的结果。

以下是示例REST控制器和服务的代码：

@RestController
public class SearchController {

    @Autowired
    private SearchService searchService;

    @GetMapping("/api/search")
    public List<String> search(@RequestParam("query") String query) {
        return searchService.search(query);
    }
}

@Service
public class SearchServiceImpl implements SearchService {

    @Override
    public List<String> search(String query) {
        // 这里可以实现搜索逻辑
    }
}

public interface SearchService {
    List<String> search(String query);
}

在上面的示例中，我们创建了一个名为SearchController的REST控制器。这个控制器接收一个名为query的请求参数，并将其传递给具有相同名称的搜索服务。该服务返回一个名为List<String>的结果（此处仅做示例）。

服务层的实现类SearchServiceImpl中，我们可以编写实际的搜索逻辑。在该例中，我们只是返回了一个空列表。

页面展示

最后，我们需要在页面上显示搜索结果。可以使用Angular指令来简化此过程。以下是示例组件的HTML代码：

<input type="text" [(ngModel)]="query" (keyup.enter)="search()">
<button (click)="search()">搜索</button>

<div *ngIf="searchResult?.length">
  <h2>搜索结果：</h2>
  <ul>
    <li *ngFor="let result of searchResult">{{result}}</li>
  </ul>
</div>

在这个示例中，我们绑定了一个输入框，用于输入搜索查询字符串。我们在按钮和输入框上使用search()方法。我们还使用了*ngIf指令，当搜索结果不为空时，显示搜索结果列表。

结论

本文提供了一个简单的Angular和Spring搜索字段示例。这可以帮助程序员了解如何使用这两个框架来构建一个功能齐全的搜索功能。