在Vue应用中实现分布式搜索，通常需要一个后端服务来与Elasticsearch进行通信，并提供一个API接口供Vue前端调用。以下是一个简单的示例，展示如何在Vue中实现这一功能。
- 后端设置（使用Node.js和Elasticsearch）:
安装必要的包:
npm install express elasticsearch创建一个简单的后端服务器，提供搜索API:
const express = require('express');
const { Client } = require('@elastic/elasticsearch');
const app = express();
const client = new Client({ node: 'http://localhost:9200' });
const searchApi = '/api/search';
app.get(searchApi, async (req, res) => {
const { q } = req.query;
try {
const { body } = await client.search({
index: 'your_index',
body: {
query: {
match: {
_all: q
}
}
}
});
res.json(body.hits.hits.map(hit => hit._source));
} catch (error) {
console.error(error);
res.status(500).send('Internal server error');
}
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});- Vue前端发起请求:
安装axios:
npm install axios在Vue组件中发起搜索请求:
<template>
<div>
<input v-model="searchQuery" @input="search">
<ul>
<li v-for="result in searchResults" :key="result.id">
{{ result.title }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
searchQuery: '',
searchResults: []
};
},
methods: {
async search() {
try {
const response = await axios.get('http://localhost:3000/api/search', {
params: { q: this.searchQuery }
});
this.searchResults = response.data;
} catch (error) {
console.error(error);
this.searchResults = [];
}
}
}
};
</script>在这个例子中，当用户在输入框中输入时，search 方法会被触发，通过axios向后端发起GET请求，并将搜索词(search query)作为参数传递。后端服务器收到请求后，将搜索词(search query)发送给Elasticsearch，然后返回匹配结果。这个过程可以是实时的，也可以是延迟加载的，取决于你的应用需求。