YouVideo-ElasticSearch实现搜索和关键字高亮显示

YouVideo-ElasticSearch实现搜索和关键字高亮显示 数据显示

进入门户主站后，点击视频列表,列表为空

视频信息需要从ElasticSearch中获取，打开es

同时打开logstash，用来采集对应的MySQL video_pub中的数据到es的yv_video索引中

打开header插件,可视化es数据

npm run start

> elasticsearch-head@0.0.0 start D:elasticsearch-head
> grunt server

Running "connect:server" (connect) task
Waiting forever...
Started connect web server on http://localhost:9100

成功写入es！

此时Vue从es拿到数据，这里设置每页两个，

 data(){
      return {
       videolist: {},
        first_category:{},
        second_category:{},
        mt:'',
        st:'',
        grade:'',
        keyword:'',
        imgUrl:config.imgUrl,
        total:0,//总记录数
        page:1,//页码
        page_size:2//每页显示个数
      }
    },

模糊搜索

Vue中搜索框对应的代码

 methods:{
      search() {
        if (this.keyword === '') {
          this.$router.push(`/video/search`)
        } else {
          let keyword = encodeURIComponent(this.keyword)
          this.$router.push(`/video/search?keyword=`+keyword)
        }
      },

高亮

搜索Python会有红色高亮显示

服务端代码

修改service的搜索方法，添加高亮设置：

 VideoPub videoPub = new VideoPub();
                //源文档
                Map sourceAsMap = hit.getSourceAsMap();
                //取出id
                String id = (String)sourceAsMap.get("id");
                videoPub.setId(id);
                //取出name
                String name = (String) sourceAsMap.get("name");
                //取出高亮字段name
                Map highlightFields = hit.getHighlightFields();
                if(highlightFields!=null){
                    HighlightField highlightFieldName = highlightFields.get("name");
                    if(highlightFieldName!=null){
                        Text[] fragments = highlightFieldName.fragments();
                        StringBuffer stringBuffer = new StringBuffer();
                        for(Text text:fragments){
                            stringBuffer.append(text);
                        }
                        name = stringBuffer.toString();
                    }

                }