当前位置：首页 > VUE

vue后台实现搜索

2026-03-07 19:54:07VUE

Vue后台实现搜索功能

在Vue后台系统中实现搜索功能，通常需要结合前端和后端逻辑。以下是一个完整的实现方案：

前端实现

创建搜索组件，包含输入框和搜索按钮：

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @keyup.enter="handleSearch"
      placeholder="输入关键词..."
    />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.searchQuery)
    }
  }
}
</script>

API接口调用

在父组件中处理搜索逻辑，调用API接口：

vue后台实现搜索

methods: {
  async performSearch(query) {
    try {
      const response = await axios.get('/api/search', {
        params: {
          q: query,
          page: 1,
          limit: 10
        }
      })
      this.searchResults = response.data
    } catch (error) {
      console.error('搜索失败:', error)
    }
  }
}

后端接口实现

Node.js示例（使用Express）：

router.get('/api/search', async (req, res) => {
  const { q, page, limit } = req.query
  const skip = (page - 1) * limit

  try {
    const results = await Model.find({
      $or: [
        { title: { $regex: q, $options: 'i' } },
        { description: { $regex: q, $options: 'i' } }
      ]
    }).skip(skip).limit(limit)

    res.json(results)
  } catch (err) {
    res.status(500).json({ error: err.message })
  }
})

性能优化

实现防抖功能，避免频繁请求：

vue后台实现搜索

import { debounce } from 'lodash'

export default {
  methods: {
    handleSearch: debounce(function() {
      this.performSearch(this.searchQuery)
    }, 500)
  }
}

高级功能

添加搜索建议（自动完成）：

watch: {
  searchQuery(newVal) {
    if (newVal.length > 2) {
      this.fetchSuggestions(newVal)
    }
  }
},
methods: {
  async fetchSuggestions(query) {
    const response = await axios.get('/api/suggestions', { params: { q: query } })
    this.suggestions = response.data
  }
}

结果展示

搜索结果列表组件示例：

<template>
  <ul class="result-list">
    <li v-for="item in results" :key="item.id">
      <h4>{{ item.title }}</h4>
      <p>{{ item.description }}</p>
    </li>
  </ul>
</template>