vue+springboot实现搜索功能

要实现搜索功能，需要在前端使用Vue框架实现搜索页面，并且通过Ajax请求发送搜索关键词到后端的Spring Boot应用程序，然后在后端使用Spring Boot框架实现搜索功能。

以下是实现搜索功能的具体步骤：

1. 前端Vue页面的实现

在Vue页面中创建一个搜索表单，用户可以在表单中输入搜索关键字，并且在提交表单时触发Ajax请求，将搜索关键字发送到Spring Boot应用程序。

例如：

<template>
  <div>
    <form @submit.prevent="search">
      <input type="text" v-model="keyword" />
      <button>搜索</button>
    </form>
    <ul>
      <li v-for="item in searchResult">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      searchResult: [],
    };
  },
  methods: {
    search() {
      axios
        .get("/api/search", { params: { keyword: this.keyword } })
        .then((response) => {
          this.searchResult = response.data;
        });
    },
  },
};
</script>

在上面的代码中，我们使用了axios库来发送Ajax请求，调用了/search接口，并且将搜索关键字作为参数传递给后端。

2. 后端Spring Boot应用程序的实现

在后端Spring Boot应用程序中，我们需要实现一个/search接口来接收前端发送过来的搜索关键字，并且执行搜索功能，最后将搜索结果返回给前端。

例如：

@RestController
@RequestMapping("/api")
public class SearchController {
  
  @Autowired
  private SearchService searchService;

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

@Service
public class SearchServiceImpl implements SearchService {

  @Autowired
  private ArticleRepository articleRepository;

  @Override
  public List<SearchResult> search(String keyword) {
    List<Article> articles = articleRepository.findByTitleContaining(keyword);
    return articles.stream().map(article -> new SearchResult(article.getId(), article.getTitle())).collect(Collectors.toList());
  }

}

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

public class SearchResult {
  private Long id;
  private String title;
  // getter and setter
}

在上面的代码中，我们使用了Spring Boot框架来实现了一个/search接口，使用了@RequestParam注解来接收前端发送过来的搜索关键字，同时使用了@Autowired注解来注入SearchService组件。

在SearchServiceImpl类中，我们使用了ArticleRepository组件来查询数据库中包含指定关键字的文章。最后，我们将查询结果转换为SearchResult对象，并且返回给前端。

注意：ArticleRepository是一个JpaRepository，并且已经继承了Spring Data JPA中的一些基本查询方法，findByTitleContaining()是其中一个方法，可以根据文章标题模糊查询。