vue加后端实现搜索
实现 Vue 与后端结合的搜索功能
前端部分（Vue）
创建搜索输入框和结果展示组件
<template>
<div>
<input v-model="searchQuery" @input="handleSearch" placeholder="搜索..."/>
<ul v-if="results.length">
<li v-for="item in results" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>设置数据模型和方法
<script>
export default {
data() {
return {
searchQuery: '',
results: [],
timer: null
}
},
methods: {
handleSearch() {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
if (this.searchQuery.trim()) {
this.fetchResults()
} else {
this.results = []
}
}, 300)
},
async fetchResults() {
try {
const response = await axios.get('/api/search', {
params: { q: this.searchQuery }
})
this.results = response.data
} catch (error) {
console.error('搜索出错:', error)
}
}
}
}
</script>后端实现（Node.js示例）
设置路由处理搜索请求
const express = require('express')
const app = express()
app.get('/api/search', async (req, res) => {
const query = req.query.q
if (!query) {
return res.status(400).json({ error: '缺少搜索参数' })
}
try {
const results = await searchDatabase(query)
res.json(results)
} catch (error) {
res.status(500).json({ error: '搜索失败' })
}
})数据库查询函数示例
async function searchDatabase(query) {
// 使用SQL示例
// return await db.query('SELECT * FROM items WHERE name LIKE ?', [`%${query}%`])
// 或MongoDB示例
// return await Item.find({ $text: { $search: query } })
// 模拟返回数据
return [
{ id: 1, name: `${query}结果1` },
{ id: 2, name: `${query}结果2` }
]
}性能优化建议
添加防抖处理 前端代码中已经实现了300毫秒的防抖，避免频繁请求
后端添加缓存
const cache = new Map()
app.get('/api/search', async (req, res) => {
const query = req.query.q
if (cache.has(query)) {
return res.json(cache.get(query))
}
const results = await searchDatabase(query)
cache.set(query, results)
res.json(results)
})安全注意事项
对搜索参数进行消毒处理
function sanitizeInput(input) {
return input.replace(/[^\w\s]/gi, '')
}
// 在路由中使用
const safeQuery = sanitizeInput(req.query.q)限制返回结果数量
const results = await searchDatabase(query)
res.json(results.slice(0, 100)) // 最多返回100条
