vue后台实现搜索

Vue 后台实现搜索功能

基础搜索实现

在 Vue 后台系统中实现搜索功能通常需要结合前端和后端协作。前端负责收集用户输入并发送请求，后端处理查询并返回结果。

创建搜索输入框组件：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." @input="handleSearch"/>
    <button @click="handleSearch">搜索</button>
  </div>
</template>

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

API 请求封装

使用 axios 或其他 HTTP 客户端封装搜索请求：

import axios from 'axios'

export function searchItems(query) {
  return axios.get('/api/items', {
    params: {
      q: query
    }
  })
}

列表组件集成

在列表页面集成搜索功能：

<template>
  <div>
    <SearchBar @search="onSearch"/>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import SearchBar from './SearchBar'
import { searchItems } from '@/api'

export default {
  components: { SearchBar },
  data() {
    return {
      items: [],
      searchQuery: ''
    }
  },
  methods: {
    onSearch(query) {
      this.searchQuery = query
      this.fetchItems()
    },
    fetchItems() {
      searchItems(this.searchQuery).then(res => {
        this.items = res.data
      })
    }
  },
  created() {
    this.fetchItems()
  }
}
</script>

高级搜索功能

实现更复杂的搜索功能可以添加筛选条件：

<template>
  <div>
    <input v-model="filters.name" placeholder="名称"/>
    <select v-model="filters.category">
      <option value="">所有分类</option>
      <option v-for="cat in categories" :value="cat.id">{{ cat.name }}</option>
    </select>
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        name: '',
        category: ''
      },
      categories: []
    }
  },
  methods: {
    search() {
      this.$emit('search', this.filters)
    }
  }
}
</script>

性能优化

添加防抖减少请求频率：

import _ from 'lodash'

export default {
  methods: {
    handleSearch: _.debounce(function() {
      this.$emit('search', this.searchQuery)
    }, 500)
  }
}

后端接口示例

Node.js Express 后端处理搜索请求：

router.get('/api/items', (req, res) => {
  const { q } = req.query
  let query = {}

  if(q) {
    query.$or = [
      { name: new RegExp(q, 'i') },
      { description: new RegExp(q, 'i') }
    ]
  }

  Item.find(query)
    .then(items => res.json(items))
    .catch(err => res.status(500).json(err))
})

本地搜索实现

对于小型数据集，可以完全在前端实现搜索：

filterItems() {
  return this.allItems.filter(item => {
    return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
  })
}

分页支持

结合分页实现搜索：

searchItems(query, page = 1) {
  return axios.get('/api/items', {
    params: {
      q: query,
      page,
      limit: 10
    }
  })
}