1.分析解决办法
kibana发送请求,在全部索引数据中查询所有包含"你好"的数据,并高亮显示
查看结果
我们发现含有高亮的标签并不在"_source"里面,而是在"highlight"里面。
如果我们想只通过"_source"数据直接展示,那么方法很简单就是拿"highlight"里面的"name",去覆盖"_source"里面的"name"
2.js代码实现覆盖
data部分
data() {
return {
total: 0,
dataList: [],
highLightList: [],
}
}
请求体
let listQuery = {
query: {
query_string: {
query: "你好"
}
},
from: 0,
size: 10,
highlight: {
pre_tags: "<span style='color:red'>",
post_tags: "</span>",
fields: {
"*" :{}
}
}
}
let esURL = 'http://192.168.0.1:9200'
方法实现
axios.get(`${esURL}/_search`, {
params: {
source: JSON.stringify(listQuery),
source_content_type: 'application/json'
}
}, ).then(({
data
}) =>
//获取total总数
this.total = data.hits.total.value
//用dataList存放数据
this.dataList = data.hits.hits\
//判断total总数是否大于10,因为我要拿去分页,而我的分页size是10
//遍历数据,给source下的每一条数据进行替换
for (let i = 0; i < (this.total > 10 ? 10 : this.total); i++) {
this.highLightList=[]
if (typeof data.hits.hits[i]._source === "undefined" ) {
break;
}
//遍历第i条highlight,取出其key放入highLightList数组
for (var key in data.hits.hits[i].highlight) {
this.highLightList.push(key)
}
//遍历highLightList数组
for (var a = 0; a < this.highLightList.length; a++) {
//如果highLightList数组里面有的字段,而source里面没有,则continue这次循环
if (typeof this.dataList[i]._source[this.highLightList[a]] === "undefined" ) {
continue
} else {
//将highLightList数组的高亮部分重新覆盖到source里面
this.dataList[i]._source[this.highLightList[a]] =
this.dataList[i].highlight[this.highLightList[a]]
}
}
}
})
最终效果
因每个人需求不同,仅提供思路,代码只展示了实现方法部分不包含html