当前位置：首页 > VUE

vue和springboot实现搜索

2026-02-21 13:32:15VUE

Vue 和 Spring Boot 实现搜索功能

前端实现（Vue）

安装必要的依赖（如 axios 用于 HTTP 请求）：

npm install axios

创建搜索组件（Search.vue）：

<template>
  <div>
    <input v-model="keyword" @input="search" placeholder="输入关键词...">
    <ul>
      <li v-for="item in results" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      keyword: '',
      results: []
    };
  },
  methods: {
    search() {
      if (this.keyword.trim() === '') {
        this.results = [];
        return;
      }
      axios.get(`http://localhost:8080/api/search?keyword=${this.keyword}`)
        .then(response => {
          this.results = response.data;
        })
        .catch(error => {
          console.error('搜索失败:', error);
        });
    }
  }
};
</script>

后端实现（Spring Boot）

创建实体类（Item.java）：

vue和springboot实现搜索

@Entity
public class Item {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    // 其他字段和 getter/setter
}

创建 Repository 接口（ItemRepository.java）：

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

创建 Controller（SearchController.java）：

vue和springboot实现搜索

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

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

跨域配置（Spring Boot）

在 Spring Boot 应用中添加配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/")
                .allowedOrigins("http://localhost:8081") // Vue 应用端口
                .allowedMethods("*");
    }
}

优化建议

实现防抖（Debounce）减少请求频率：

// 在 Vue 组件中
debouncedSearch: _.debounce(function() {
  this.search();
}, 500)

后端分页支持：

@GetMapping
public Page<Item> search(
    @RequestParam String keyword,
    @PageableDefault(size = 10) Pageable pageable) {
    return itemRepository.findByNameContaining(keyword, pageable);
}