ElasticSearch入门项目--仿京东搜索(关键字高亮)

ElasticSearch入门,仿京东搜索实战

项目源码已上传至Github,点此访问

项目介绍

此项目是跟随狂神ES课程入门所做的SpringBoot+ES+Vue实战项目,在视频的基础上,已实现前后端分离。功能比较简单,实现的基本的爬取+储存+搜索+高亮,未实现分页,若对ES已有一定的基础,可自己改进,也可发起PR,若发现问题,望及时提醒。

此项目涉及以下功能

  • ES创建索引
  • ES删除索引
  • ES批量插入文档
  • ES查询并高亮显示
  • 最基础的JAVA爬虫(Jsoup)
  • Vue基本操作

运行环境

前期准备

  • 安装ElasticSearch、Kibana、ik分词器,注意这三个版本必须保持一致
  • 启动ElasticSearch,端口 9200,9300

最终效果

同时支持中文搜索、英文搜索
在这里插入图片描述
在这里插入图片描述

注意事项

  • 由于前后端分离,Controller上记得加注解@CrossOrigin(allowedHeaders = "*")允许跨域。

  • 安装IK分词器是为了解决中文查询时,默认分词器会将关键词其分割,导致查询不出结果。

  • 此页面是我在京东搜索原网页的基础上删减得到的,所以可能有些多余的标签,可以自己试着改,由于我对前端不太熟悉,所以并未有太多的删减。

  • Jsoup解析网页出错或未获取到数据,最好打开浏览器开发者模式,通过检查元素查看标签结构,在控制台用JS操作先试试能否获取到结果,若发现与代码中涉及的标签和属性等不一致,请自己修改。

  • 京东页面所用的cssjs包括一些图片都是异步加载的,其中涉及到的cssjs我自己下载好了,京东logo和购物车图标的显示也是http请求获取到的,不是本地图标,这里我没改是因为我用的VSCode,装了插件LiveServer,所以能够正常显示,所以你能看到我的浏览器地址是 localhost:52330/itemlist.htm,而不是本地协议。

  • 使用file协议也可正常运行,也就是直接选择用浏览器打开itemlist.htm,功能不受影响,只不过可能就看不到logo,大概像这样。
    在这里插入图片描述

posted @ 2020-07-10 15:53  无代码,非程序  阅读(711)  评论(0编辑  收藏  举报