基于ElasticSearch+Vue实现简易搜索

基于ElasticSearch+Vue实现简易搜索

一、模拟数据

产品名称描述价格库存数量品牌名称
智能手表智能手表,具有健康跟踪和通知功能。199.991000TechWatch
4K智能电视4K分辨率智能电视,提供出色的画质。699.99500VisionTech
无线耳机降噪无线耳机,提供高品质音频体验。149.99800AudioMasters
笔记本电脑高性能笔记本电脑,配备快速处理器。999.99300TechLaptops
数码相机高分辨率数码相机,支持多种拍摄模式。449.99200PhotoPro
便携式充电器便携式充电器,为移动设备提供电力。29.992000PowerBoost
无线路由器高速无线路由器,适用于大型网络。79.99400NetSpeed
游戏机游戏机,支持多种游戏和娱乐功能。399.99100GameZone
手机壳手机壳,适用于各种手机型号。19.991500PhoneGuard
运动鞋高性能运动鞋,适用于各种运动。79.99800SportsTech
4K超高清显示器4K超高清显示器,提供卓越的图像质量。599.99150UltraView
智能家居设备智能家居设备,实现智能化家居控制。249.99300SmartLiving

二、python导入脚本

# coding=gbk
import pandas as pd
from elasticsearch import Elasticsearch
from elasticsearch.helpers import streaming_bulk# 连接到Elasticsearch
es = Elasticsearch([{'host': 'localhost', 'port': 9200}])# 检查是否成功连接
if es.ping():print("Connected to Elasticsearch")
else:print("Failed to connect to Elasticsearch")# 读取Excel文件
data = pd.read_excel('demoData.xls')# 将DataFrame转换为字典格式
documents = data.to_dict(orient='records')# 逐个文档导入数据到Elasticsearch
success, failed = 0, 0
total_documents = len(documents)
for doc in documents:index_action = {'_index': 'ecommerce',  # 修改为你的索引名称'_id': doc['产品名称'],  # 使用产品名称作为文档ID'_source': doc}try:result = next(streaming_bulk(es, [index_action], index=index_action['_index']))success += 1except Exception as e:print(f"Failed to index document {index_action['_id']}: {e}")failed += 1print(f'Successfully indexed {success} documents, failed to index {failed} documents.')

三、vue代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- Import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>* {margin: 0;padding: 0;}body {background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);}/* 添加上边距样式 */.card-container {margin-top: 20px;}/* 设置高亮文字颜色为红色 */.highlight-text em {color: red;}/* 样式用于显示产品信息字段 */.product-info {margin-top: 10px;font-weight: bold;}</style>
</head><body><div id="app" style="width: 80%; margin: 0 auto; margin-top: 20px;"><h3>基于ElasticSearch+Vue实现简易搜索</h3><el-input v-model="content" placeholder="请输入内容" @input="searchProducts"></el-input><br><br><hr><!-- 显示搜索结果 --><div id="searchResults"><el-card v-for="result in searchResults" :key="result._id" class="card-container"><div slot="header"><strong v-html="result.highlightedProductName" class="highlight-text"></strong></div><div class="product-info">产品名称: {{ result.productName }}</div><div class="product-info">描述: {{ result.productDescription }}</div><div class="product-info">价格: {{ result.productPrice }}</div><div class="product-info">库存数量: {{ result.productStock }}</div><div class="product-info">品牌名称: {{ result.productBrand }}</div></el-card></div></div>
</body>
<!-- Import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- Import Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>new Vue({el: '#app',data: function () {return {content: "",searchResults: []}},methods: {searchProducts: function () {// 构建Elasticsearch查询const query = {query: {match: {"产品名称": this.content  // 使用正确的字段名}},highlight: {fields: {"产品名称": {}  // 高亮 "产品名称" 字段}}};// 发起HTTP请求搜索文档fetch("http://localhost:9200/ecommerce/_search", {method: "POST",headers: {"Content-Type": "application/json"},body: JSON.stringify(query)}).then(response => response.json()).then(data => {this.displaySearchResults(data);}).catch(error => {console.error("Error:", error);});},displaySearchResults: function (response) {this.searchResults = response.hits.hits.map(function (hit) {return {highlightedProductName: hit.highlight["产品名称"][0],  // 使用正确的字段名productName: hit._source.产品名称,  // 使用正确的字段名productDescription: hit._source.描述,  // 使用正确的字段名productPrice: hit._source.价格,  // 使用正确的字段名productStock: hit._source.库存数量,  // 使用正确的字段名productBrand: hit._source.品牌名称,  // 使用正确的字段名_id: hit._id};});}}})
</script></html>

四、效果图

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/170541.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html iframe 框架有哪些优缺点?

目录 前言&#xff1a; 用法&#xff1a; 理解&#xff1a; 优点&#xff1a; 嵌套外部内容&#xff1a; 独立性&#xff1a; 分离安全性&#xff1a; 跨平台兼容性&#xff1a; 方便维护&#xff1a; 缺点&#xff1a; 性能开销&#xff1a; 用户体验问题&#xf…

【网安大模型专题10.19】※论文5:ChatGPT+漏洞定位+补丁生成+补丁验证+APR方法+ChatRepair+不同修复场景+修复效果(韦恩图展示)

Keep the Conversation Going: Fixing 162 out of 337 bugs for $0.42 each using ChatGPT 写在最前面背景介绍自动程序修复流程Process of APR (automated program repair)1、漏洞程序2、漏洞定位模块3、补丁生成4、补丁验证 &#xff08;可以学习的PPT设计&#xff09;经典的…

独家揭秘微信视频号下载提取器,使用方法!

1&#xff1a;微信视频号下载提取器&#xff0c;需要先确认自己手机电脑版本是否支持视频号的观看和浏览 2:需要下载视频号的作品发给视频下载小助手&#xff0c;聊天窗口 3&#xff1a;打开小助手解析视频号视频链接&#xff0c;保存到手机相册或者电脑上 注意视频号电脑版…

适用于 Linux 和 Unix 的特权访问管理

凭据、SSH 密钥、服务帐户、数字签名、文件系统等内容构成了Linux 环境的关键部分&#xff0c;虽然大多数PAM供应商为基于Windows的环境提供无缝的特权访问管理&#xff0c;但它们的通用性不足以为Linux&#xff0c;Unix和*nix环境扩展相同的功能和功能。 Linux 中的root权限是…

wf-docker集群搭建(未完结)

系列文章目录 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、redis集群二、mysql集群三、nacos集群1. 环境要求2. 拉取镜像2.1. 拉取镜像方式配置集群2.2. 自定义nacos镜像配置集群 3 自定义…

基于PHP的图像分享社交平台

有需要请加文章底部Q哦 可远程调试 基于PHP的图像分享社交平台 一 介绍 此图像分享社交平台基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。平台角色分为用户和管理员。用户可注册登录&#xff0c;发布图像&#xff0c;修改个人信息&#xff0c;评论图像…

分享一下门店服务预约系统怎么做

随着科技的不断发展&#xff0c;越来越多的企业开始注重提高服务质量和效率。其中&#xff0c;门店服务预约系统成为了许多企业的选择。本文将探讨门店服务预约系统的意义、设计思路、实现方法、系统测试以及拓展案例&#xff0c;并总结门店服务预约系统设计和实现的重要性。 一…

国腾GM8775C完全替代CS5518 MIPIDSI转2 PORT LVDS

集睿致远CS5518描述&#xff1a; CS5518是一款MIPI DSI输入、LVDS输出转换芯片。MIPI DSI 支持多达4个局域网&#xff0c;每条通道以最 大 1Gbps 的速度运行。LVDS支持18位或24位像素&#xff0c;25Mhz至154Mhz&#xff0c;采用VESA或JEIDA格 式。它只能使用单个1.8v电源&am…

更改idea的JDK版本

有时候我们需要更改 idea 的 JDK 版本&#xff0c;这里告诉大家更改的方法&#xff0c;非常简单快捷&#xff0c;而且也不需要去找 JDK 的资源 1.在 idea 的左上角找到 File 选择 Peoject Structure 2.在页面左上角找到 Project &#xff0c;点击 SDK 的框&#xff0c;选择 A…

RISC-V架构——中断委托和中断注入

1、中断委托 1.1、中断委托的作用 &#xff08;1&#xff09;默认情况下&#xff0c;所有的陷入&#xff08;中断和异常&#xff09;都是在M模式下处理&#xff0c;然后再返回到发生陷入前的模式&#xff1b; &#xff08;2&#xff09;所有陷入都在M模式处理会涉及到模式切换…

将自己本地项目上传到git,增加IDEA操作

文章目录 一、初始化git仓库二、gitee创建仓库三、输入自己仓库的地址四、在添加所修改的文件可能的错误 五、合并需上传文件六、上传参考文档 一、初始化git仓库 在自己的项目中&#xff0c;命令行中输入 git init二、gitee创建仓库 新建仓库 设置仓库参数&#xff0c;设置…

智安网络|探索语音合成技术的未来:揭秘人工智能配音技术的背后

随着人工智能技术的迅猛发展&#xff0c;配音行业也迎来了人工智能配音技术的崭新时代。人工智能配音技术通过语音合成和自然语言处理等技术手段&#xff0c;实现了逼真的语音合成&#xff0c;为影视、广告和游戏等领域带来了新的可能性。 第一部分&#xff1a;语音合成技术的…

Linux创建临时文件mkstemp()tmpfile()

有些程序需要创建一些临时文件&#xff0c;仅供其在运行期间使用&#xff0c;程序终止后即行删除。 很多编译器程序会在编译过程中创建临时文件。GNU C 语言函数库为此而提供了一系列库函数。&#xff08;之所以有“一系列”的库函数&#xff0c;部分原因是由于这些函数分别继…

LabVIEW在 XY Graph中选择一组点

LabVIEW在 XY Graph中选择一组点 问题&#xff1a;有一个包含许多点的XY Graph&#xff0c;在程序开发中&#xff0c;对于显示XY Graph中的多个点&#xff0c;如何进行选取。最好能像图像处理中的ROI一样&#xff0c;并且它们的颜色可以更改&#xff0c;可以在其中选择一些ROI…

【Docker】Docker数据的存储

默认情况下&#xff0c;在运行中的容器里创建的文件&#xff0c;被保存在一个可写的容器层里&#xff0c;如果容器被删除了&#xff0c;则对应的数据也随之删除了。 这个可写的容器层是和特定的容器绑定的&#xff0c;也就是这些数据无法方便的和其它容器共享。 Docker主要提…

Loop Copilot:AI驱动,小白也能自己生成音乐?

01 项目介绍 Loop Copilot是一个使用自然语言生成音乐的系统。它不仅允许你使用自然语言来生成你想要的音乐风格、节奏或旋律&#xff0c;还支持通过多轮对话对已生成的音乐进行进一步的编辑和修改。包括对生成的音乐进行编辑修改、添加或删除乐器、加入音效等。 02 工作流程…

(三)(Driver)驱动开发之双机调试环境搭建及内核驱动的运行

文章目录 1. 驱动开发环境搭建2. 驱动开发新建项目及项目属性配置和编译3. 双机调试环境搭建3.1 安装虚拟机VMware3.2 配置Dbgview.exe工具3.3 基于Windbg的双机调试 4. 内核驱动的运行4.1 临时关闭系统驱动签名校验4.2 加载驱动 1. 驱动开发环境搭建 请参考另一篇:https://bl…

Stable Diffusion WebUI扩展canvas-zoom详细讲解

canvas-zoom这是什么? 这是一个针对画布做一些操作的工具,比如缩放等。 下面来详细说一下这些操作的热键。 重要的热键: 缩放(Alt+滚轮)、移动画布 (F)、全屏 (S) 和重置缩放 (R) (1)Shift + wheel - 缩放画布 按住Shift + 滚轮之后,一点反应都没有,之后按…

上海市道路数据,有63550条数据(shp格式和xlsx格式)

数据地址&#xff1a; 上海市道路https://www.xcitybox.com/datamarketview/#/Productpage?id391 基本信息. 数据名称: 上海市道路数据 数据格式: Shpxlsx 数据时间: 2020年 数据几何类型: 线 数据坐标系: WGS84坐标系 数据来源&#xff1a;网络公开数据 数据字段&am…

lv8 嵌入式开发-网络编程开发 20 域名解析与http服务实现原理

目录 1 域名解析 2 如何实现万维网服务器&#xff1f; 2.1 HTTP 的操作过程 2.2 万维网服务器实现 1 域名解析 域名解析gethostbyname函数 主机结构在 <netdb.h> 中定义如下&#xff1a; struct hostent {char *h_name; /* 官方域名 */char **h_alias…