Vue连接ElasticSearch使用search功能

 const elasticsearch = require('elasticsearch');
// instantiate an Elasticsearch client
const client = new elasticsearch.Client({
  hosts: [ 'http://******:9200']
})
client.search({
          index: 'recommender', //elasticSearch的索引
          type: 'Movie',  //索引储存的数据类型
          body: {
            query: {
              match: {
                name: query //匹配的字段
              }
            }
          }
        }).then(function (resp) {
          var hits = resp.hits.hits; //返回的响应数据
          console.log(hits)
          
        }, function (err) {
          console.trace(err.message);
        });

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个流行的前端框架,而 Elasticsearch 是一个用于实时搜索和分析的开源搜索引擎。它们可以很好地结合在一起使用。 在 Vue.js 中使用 Elasticsearch,你可以通过 Elasticsearch 的 REST API 与其进行通信。你可以使用 Vue.js 的 Ajax 请求来发送搜索请求并接收 Elasticsearch 返回的结果。 以下是一个使用 Vue.js 和 Elasticsearch 进行搜索的简单示例: 1. 安装 Elasticsearch: 首先,你需要安装并配置 Elasticsearch。你可以从官方网站下载并按照文档进行安装。 2. 创建 Vue.js 项目: 使用 Vue CLI 创建一个新的 Vue.js 项目。在终端中运行以下命令: ``` vue create my-project ``` 3. 安装 axios: 在终端中进入项目目录,并安装 axios 依赖: ``` cd my-project npm install axios ``` 4. 创建搜索组件: 在 Vue.js 项目中创建一个名为 `Search.vue` 的组件。在该组件中,你可以定义一个搜索输入框和一个按钮,并通过调用 Elasticsearch 的 REST API 来发送搜索请求。 ```html <template> <div> <input type="text" v-model="query" placeholder="Enter your search query"> <button @click="search">Search</button> <ul> <li v-for="result in results" :key="result.id">{{ result.title }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { query: '', results: [], }; }, methods: { search() { axios.get('http://localhost:9200/index-name/_search', { params: { q: this.query, }, }) .then(response => { this.results = response.data.hits.hits.map(hit => hit._source); }) .catch(error => { console.error(error); }); }, }, }; </script> ``` 这个组件中的 `search` 方法会发送一个 GET 请求到 Elasticsearch 的搜索 API,并将结果赋值给 `results` 数组。你可以根据你的 Elasticsearch 索引和你的搜索需求来修改 URL。 5. 在 Vue.js 应用中使用搜索组件: 在你的 Vue.js 应用中使用这个搜索组件。你可以在任何需要搜索功能的页面中引入和使用 `Search` 组件。 ```html <template> <div> <h1>My Search Page</h1> <Search /> </div> </template> <script> import Search from './components/Search.vue'; export default { components: { Search, }, }; </script> ``` 这只是一个简单的示例,你可以根据你的具体需求来进行扩展和定制。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值