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
}
})
}
