电商网站前台功能模块,如何做一个内部网站,网站建站平台是什么,四川手机网站开发基于ElasticSearchVue实现简易搜索
一、模拟数据
产品名称描述价格库存数量品牌名称智能手表智能手表#xff0c;具有健康跟踪和通知功能。199.991000TechWatch4K智能电视4K分辨率智能电视#xff0c;提供出色的画质。699.99500VisionTech无线耳机降噪无线耳机#xff0c;…基于ElasticSearchVue实现简易搜索
一、模拟数据
产品名称描述价格库存数量品牌名称智能手表智能手表具有健康跟踪和通知功能。199.991000TechWatch4K智能电视4K分辨率智能电视提供出色的画质。699.99500VisionTech无线耳机降噪无线耳机提供高品质音频体验。149.99800AudioMasters笔记本电脑高性能笔记本电脑配备快速处理器。999.99300TechLaptops数码相机高分辨率数码相机支持多种拍摄模式。449.99200PhotoPro便携式充电器便携式充电器为移动设备提供电力。29.992000PowerBoost无线路由器高速无线路由器适用于大型网络。79.99400NetSpeed游戏机游戏机支持多种游戏和娱乐功能。399.99100GameZone手机壳手机壳适用于各种手机型号。19.991500PhoneGuard运动鞋高性能运动鞋适用于各种运动。79.99800SportsTech4K超高清显示器4K超高清显示器提供卓越的图像质量。599.99150UltraView智能家居设备智能家居设备实现智能化家居控制。249.99300SmartLiving
二、python导入脚本
# codinggbk
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(orientrecords)# 逐个文档导入数据到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], indexindex_action[_index]))success 1except Exception as e:print(fFailed to index document {index_action[_id]}: {e})failed 1print(fSuccessfully indexed {success} documents, failed to index {failed} documents.)三、vue代码
!DOCTYPE html
htmlheadmeta charsetUTF-8!-- Import CSS --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.cssstyle* {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
/headbodydiv idapp stylewidth: 80%; margin: 0 auto; margin-top: 20px;h3基于ElasticSearchVue实现简易搜索/h3el-input v-modelcontent placeholder请输入内容 inputsearchProducts/el-inputbrbrhr!-- 显示搜索结果 --div idsearchResultsel-card v-forresult in searchResults :keyresult._id classcard-containerdiv slotheaderstrong v-htmlresult.highlightedProductName classhighlight-text/strong/divdiv classproduct-info产品名称: {{ result.productName }}/divdiv classproduct-info描述: {{ result.productDescription }}/divdiv classproduct-info价格: {{ result.productPrice }}/divdiv classproduct-info库存数量: {{ result.productStock }}/divdiv classproduct-info品牌名称: {{ result.productBrand }}/div/el-card/div/div
/body
!-- Import Vue before Element --
script srchttps://unpkg.com/vue2/dist/vue.js/script
!-- Import Element UI --
script srchttps://unpkg.com/element-ui/lib/index.js/script
scriptnew 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
四、效果图
