大前端

前端学习之家-大前端

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<String, Object> sourceAsMap = hit.getSourceAsMap();
                //取出id
                String id = (String)sourceAsMap.get("id");
                videoPub.setId(id);
                //取出name
                String name = (String) sourceAsMap.get("name");
                //取出高亮字段name
                Map<String, HighlightField> 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();
                    }

                }

发表评论:

Copyright Your WebSite.Some Rights Reserved.