在Vue.js应用中实现分布式搜索和全文搜索

npm install -g @vue/cli

vue create my-search-app

cd my-search-app

sudo apt-get update
sudo apt-get install elasticsearch

sudo service elasticsearch start

npm install elasticsearch

<template>
  <div>
    <input v-model="query" @input="search" placeholder="输入搜索查询" />
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script>
import { Client } from 'elasticsearch';

export default {
  data() {
    return {
      query: '',
      searchResults: [],
    };
  },
  methods: {
    search() {
      // 创建Elasticsearch客户端
      const client = new Client({
        host: 'http://localhost:9200', // Elasticsearch服务器地址
      });

      // 执行全文搜索
      client
        .search({
          index: 'your_index_name', // 替换为您的索引名称
          body: {
            query: {
              match: {
                content: this.query, // 替换为您要搜索的字段名称
              },
            },
          },
        })
        .then((response) => {
          this.searchResults = response.hits.hits.map((hit) => hit._source);
        })
        .catch((error) => {
          console.error('搜索失败:', error);
        });
    },
  },
};
</script>

<template>
  <div id="app">
    <Search />
  </div>
</template>

<script>
import Search from '@/components/Search.vue';

export default {
  components: {
    Search,
  },
};
</script>

npm run serve