vue加后端实现搜索

Vue 前端实现搜索功能

在 Vue 中实现搜索功能通常涉及以下几个步骤：

创建搜索输入框和数据绑定

<template>
  <input v-model="searchQuery" placeholder="搜索..." />
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  }
}
</script>

使用计算属性过滤数据

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

后端 API 实现

后端需要提供搜索接口，以下是 Node.js + Express 的示例：

创建搜索路由

const express = require('express')
const router = express.Router()

router.get('/search', async (req, res) => {
  const { q } = req.query
  // 数据库查询逻辑
  const results = await db.collection('items')
    .find({ $text: { $search: q } })
    .toArray()
  res.json(results)
})

前后端连接

在 Vue 中调用搜索 API：

使用 axios 发送请求

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

性能优化建议

添加防抖处理避免频繁请求

import _ from 'lodash'

methods: {
  performSearch: _.debounce(function() {
    // 搜索逻辑
  }, 300)
}

后端添加索引提高查询效率

// MongoDB 示例
db.collection.createIndex({ name: 'text', description: 'text' })

完整示例结构

前端目录结构

src/
  components/
    SearchBar.vue
  views/
    SearchResults.vue
  api/
    search.js

后端目录结构

server/
  routes/
    search.js
  controllers/
    searchController.js