创建实体类Content存储数据

  2. 7. @Data
  3. 8. @AllArgsConstructor
  4. 9. @NoArgsConstructor
  5. 10. public class Content {
  6. 11. private  String title;
  7. 12. private  String img;
  8. 13. private  String price;
  9. 14. //可以自己添加数据
  10. 15. }

再创建一个工具类UtilOfKeyWord 并测试

  2. @Component
  3. public class HtmlParseUtil {
  4.     public static List<Content> praseJD(String keywords) throws IOException {
  5.         //获取请求    https://search.jd.com/Search?keyword=java
  6.         //前提，需要联网，
  7.         String url = "https://search.jd.com/Search?keyword="+keywords;
  8.         //解析网页(jsoup返回的Document就是浏览器的Document对象）
  9.         Document document = Jsoup.parse(new URL(url), 3000);
  10.         //所有在js中的方法这里都可以使用
  11.         Element element = document.getElementById("J_goodsList");
  12. //        System.out.println(element.html());
  13.         //获取所有的li元素
  14.         Elements elements = element.getElementsByTag("li");
  15.         ArrayList<Content> goodList = new ArrayList<>();
  16.         //获取元素里面的内容
  17.         for (Element el:elements){
  18.             String img = el.getElementsByTag("img").eq(0).attr("data-lazy-img");
  19.             String price = el.getElementsByClass("p-price").eq(0).text();
  20.             String title = el.getElementsByClass("p-name").eq(0).text();
  21.             Content content = new Content();
  22.             content.setTitle(title);
  23.             content.setPrice(price);
  24.             content.setImg(img);
  25.             goodList.add(content);
  26.         }
  27.         return goodList;
  28.     }
  29. }

11.2.业务编写 - 图1

添加 配置文件 config/ElasticSearchConfig.java

  2. @Configuration
  3. public class ElasticSearchClientConfig {
  5.     @Bean
  6.     public RestHighLevelClient restHighLevelClient(){
  7.         RestHighLevelClient client = new RestHighLevelClient(
  8.                 RestClient.builder(
  9.                         new HttpHost("localhost", 9200, "http")));
  10.         return client;
  11.     }
  12. }

编写业务类

将jd 查询数据存储es中

  1. //1.解析数据，放入es索引中
  2.     public Boolean parseContent(String keywords) throws IOException {
  3.         List<Content> contents = HtmlParseUtil.praseJD(keywords);
  4.         //把查询到的数据放入es中
  5.         BulkRequest bulkRequest = new BulkRequest();
  6.         bulkRequest.timeout("2m");
  7.         for (int i = 0 ;i < contents.size();i++){
  8.             bulkRequest.add(
  9.                     new IndexRequest("kuang_index").id(""+(i+1))
  10.                             .source(JSON.toJSONString(contents.get(i)), XContentType.JSON));
  11.         }
  12.         BulkResponse bulk = restHighLevelClient.bulk(bulkRequest, RequestOptions.DEFAULT);
  13.         return  !bulk.hasFailures();
  14.     }

编写ContentController

  1. /
  2. 7. @RestController
  3. 8. public class ContentController {
  4. 9. 
  5. 10. @Autowired
  6. 11. private ContentService contentService;
  7. 12. 
  8. 13. @GetMapping("/parse/{keyword}")
  9. 14. public Boolean parse(@PathVariable("keyword") String keyword) throws Exception{
  10. 15. return contentService.parseContent(keyword);
  11. 16.     }
  12. 17. }

将京东数据存储es中
访问请求http://localhost:9090/parse/java
es 中显示内容
11.2.业务编写 - 图2

实现搜索功能(高亮）

3.1 编写搜索业务方法
ContentService层代码

  1. package cn.ither.esjd.service;
  4. import cn.ither.esjd.pojo.Content;
  5. import cn.ither.esjd.utils.HtmlParseUtil;
  6. import com.alibaba.fastjson.JSON;
  7. import org.elasticsearch.action.bulk.BulkRequest;
  8. import org.elasticsearch.action.bulk.BulkResponse;
  9. import org.elasticsearch.action.index.IndexRequest;
  10. import org.elasticsearch.action.search.SearchRequest;
  11. import org.elasticsearch.action.search.SearchResponse;
  12. import org.elasticsearch.client.RequestOptions;
  13. import org.elasticsearch.client.RestHighLevelClient;
  14. import org.elasticsearch.common.text.Text;
  15. import org.elasticsearch.common.unit.TimeValue;
  16. import org.elasticsearch.common.xcontent.XContentType;
  17. import org.elasticsearch.index.query.QueryBuilders;
  18. import org.elasticsearch.index.query.TermQueryBuilder;
  19. import org.elasticsearch.search.SearchHit;
  20. import org.elasticsearch.search.builder.SearchSourceBuilder;
  21. import org.elasticsearch.search.fetch.subphase.highlight.HighlightBuilder;
  22. import org.elasticsearch.search.fetch.subphase.highlight.HighlightField;
  23. import org.springframework.beans.factory.annotation.Autowired;
  24. import org.springframework.stereotype.Service;
  26. import java.io.IOException;
  27. import java.util.ArrayList;
  28. import java.util.List;
  29. import java.util.Map;
  30. import java.util.concurrent.TimeUnit;
  32. /**
  33.  * @Author: zhanghuan
  34.  * @date: 2020/9/28 15:54
  35.  * @description:
  36.  */
  37. @Service
  38. public class ContentServiceImpl implements IContentService{
  40.     @Autowired
  41.     private RestHighLevelClient restHighLevelClient;
  43.     //1.解析数据，放入es索引中
  44.     public Boolean parseContent(String keywords) throws IOException {
  45.         List<Content> contents = HtmlParseUtil.praseJD(keywords);
  46.         //把查询到的数据放入es中
  47.         BulkRequest bulkRequest = new BulkRequest();
  48.         bulkRequest.timeout("2m");
  49.         for (int i = 0 ;i < contents.size();i++){
  50.             bulkRequest.add(
  51.                     new IndexRequest("kuang_index").id(""+(i+1))
  52.                             .source(JSON.toJSONString(contents.get(i)), XContentType.JSON));
  53.         }
  54.         BulkResponse bulk = restHighLevelClient.bulk(bulkRequest, RequestOptions.DEFAULT);
  55.         return  bulk.hasFailures();
  56.     }
  60.     //2.获取这些数据实现搜索功能（分页查询）
  61.     public List<Map<String,Object>> searchPage(String keyword, int pageNo, int pageSize) throws IOException {
  62.         if (pageNo <=0){
  63.             pageNo = 1;
  64.         }
  65.         //条件搜索
  66.         SearchRequest searchRequest = new SearchRequest("kuang_index");
  67.         SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
  69.         //分页
  70.         searchSourceBuilder.from(pageNo);
  71.         searchSourceBuilder.size(pageSize);
  72.         //精准匹配
  73.            //查询条件
  74.         TermQueryBuilder termQueryBuilder = QueryBuilders.termQuery("title", keyword);
  75.         searchSourceBuilder.query(termQueryBuilder);
  76. //        searchSourceBuilder.timeout(new TimeValue(60,TimeUnit.SECONDS));
  77.         //执行搜索
  79.         searchRequest.source(searchSourceBuilder);
  80.         SearchResponse searchResponse = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);
  81.         //解析结果
  82.         ArrayList<Map<String,Object>> list = new ArrayList<>();
  83.         for(SearchHit documentFields:searchResponse.getHits().getHits()){
  84.             list.add(  documentFields.getSourceAsMap());
  86.         }
  87.         return list;
  88.     }
  89.     //3.获取这些数据实现搜索功能（高亮）
  90.     public List<Map<String,Object>> searchPageHighlightBuilder(String keyword, int pageNo, int pageSize) throws IOException {
  91.         if (pageNo <=0){
  92.             pageNo = 1;
  93.         }
  94.         //条件搜索
  95.         SearchRequest searchRequest = new SearchRequest("kuang_index");
  96.         SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
  98.         //分页
  99.         searchSourceBuilder.from(pageNo);
  100.         searchSourceBuilder.size(pageSize);
  101.         //精准匹配
  102.         //查询条件
  103.         TermQueryBuilder termQueryBuilder = QueryBuilders.termQuery("title", keyword);
  104.         searchSourceBuilder.query(termQueryBuilder);
  105.         searchSourceBuilder.timeout(new TimeValue(60, TimeUnit.SECONDS));
  107.         //高亮
  108.         // 高亮
  109.         HighlightBuilder highlightBuilder = new HighlightBuilder();
  110.         highlightBuilder.field("title");//设置标题高亮
  111.         highlightBuilder.requireFieldMatch(false);//关闭多个高亮显示
  112.         highlightBuilder.preTags("<span style ='color:red;font-weight: bold'>"); //设置标签头
  113.         highlightBuilder.postTags("</span>"); //设置标签尾
  114.         searchSourceBuilder.highlighter(highlightBuilder);
  115.         //执行搜索
  116.         searchRequest.source(searchSourceBuilder);
  117.         SearchResponse searchResponse = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);
  118.         ArrayList<Map<String,Object>> list = new ArrayList<>();
  119.         for (SearchHit documentFields: searchResponse.getHits().getHits()){
  120.             Map<String, HighlightField> highlightFields = documentFields.getHighlightFields();
  121.             HighlightField title = highlightFields.get("title");
  122.             Map<String, Object> sourceAsMap = documentFields.getSourceAsMap();//获取原来的结果
  123.             //解析高亮的字段,将原来的字段换为高亮字段即可
  125.             if(title != null){
  126.                 Text[] fragments = title.fragments();
  127.                 String n_title="";
  128.                 for (Text text: fragments) {//获取高亮的字段
  129.                     n_title+=text;
  130.                 }
  131.                 sourceAsMap.put("title",n_title);//高亮字段替换为原来内容即可
  132.             }
  133.             list.add(sourceAsMap);
  134.         }
  135.         return list;
  136.     }
  137. }


ContentController层代码

  1. import cn.ither.esjd.service.IContentService;
  2. import org.springframework.beans.factory.annotation.Autowired;
  3. import org.springframework.web.bind.annotation.GetMapping;
  4. import org.springframework.web.bind.annotation.PathVariable;
  5. import org.springframework.web.bind.annotation.RestController;
  7. import java.io.IOException;
  8. import java.util.List;
  9. import java.util.Map;
  11. /**
  12.  * @Author: zhanghuan
  13.  * @date: 2020/9/28 15:54
  14.  * @description:
  15.  */
  16. @RestController
  17. public class ContentController {
  18.     @Autowired
  19.     private IContentService contentService;
  21.     @GetMapping("/parse/{keywords}")
  22.     public Boolean parse(@PathVariable("keywords") String keywords) throws IOException {
  23.        return contentService.parseContent(keywords);
  24.     }
  26.     @GetMapping("/search/{keywords}/{pageNo}/{pageSize}")
  27.     public List<Map<String,Object>> search(@PathVariable("pageNo") int pageNo,
  28.                                            @PathVariable("pageSize")int pageSize,
  29.                                            @PathVariable("keywords") String keywords) throws IOException {
  31.         return contentService.searchPage(keywords,pageNo,pageSize);
  32.     }
  33. }

前后的交互

index.html代码

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta charset="utf-8"/>
  6.     <title>Java-ES仿京东实战</title>
  7.     <link rel="stylesheet" th:href="@{/css/style.css}"/>
  8. </head>
  10. <body class="pg">
  11. <div class="page" id="app">
  12.     <div id="mallPage" class=" mallist tmall- page-not-market ">
  14.         <!-- 头部搜索 -->
  15.         <div id="header" class=" header-list-app">
  16.             <div class="headerLayout">
  17.                 <div class="headerCon ">
  18.                     <!-- Logo-->
  19.                     <h1 id="mallLogo">
  20.                         <img th:src="@{/images/jdlogo.png}" alt="">
  21.                     </h1>
  23.                     <div class="header-extra">
  25.                         <!--搜索-->
  26.                         <div id="mallSearch" class="mall-search">
  27.                             <form name="searchTop" class="mallSearch-form clearfix">
  28.                                 <fieldset>
  29.                                     <legend>天猫搜索</legend>
  30.                                     <div class="mallSearch-input clearfix">
  31.                                         <div class="s-combobox" id="s-combobox-685">
  32.                                             <div class="s-combobox-input-wrap">
  33.                                                 <input v-model="keyword" type="text" autocomplete="off" value="dd" id="mq"
  34.                                                        class="s-combobox-input" aria-haspopup="true">
  35.                                             </div>
  36.                                         </div>
  37.                                         <button type="submit" @click.prevent="searchKey" id="searchbtn">搜索</button>
  38.                                     </div>
  39.                                 </fieldset>
  40.                             </form>
  41.                             <ul class="relKeyTop">
  42.                                 <li><a>小莫Java</a></li>
  43.                                 <li><a>小莫前端</a></li>
  44.                                 <li><a>小莫Linux</a></li>
  45.                                 <li><a>小莫大数据</a></li>
  46.                                 <li><a>小莫聊理财</a></li>
  47.                             </ul>
  48.                         </div>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.         </div>
  54.         <!-- 商品详情页面 -->
  55.         <div id="content">
  56.             <div class="main">
  57.                 <!-- 品牌分类 -->
  58.                 <form class="navAttrsForm">
  59.                     <div class="attrs j_NavAttrs" style="display:block">
  60.                         <div class="brandAttr j_nav_brand">
  61.                             <div class="j_Brand attr">
  62.                                 <div class="attrKey">
  63.                                     品牌
  64.                                 </div>
  65.                                 <div class="attrValues">
  66.                                     <ul class="av-collapse row-2">
  67.                                         <li><a href="#"> 一起武林 </a></li>
  68.                                         <li><a href="#"> Java </a></li>
  69.                                     </ul>
  70.                                 </div>
  71.                             </div>
  72.                         </div>
  73.                     </div>
  74.                 </form>
  76.                 <!-- 排序规则 -->
  77.                 <div class="filter clearfix">
  78.                     <a class="fSort fSort-cur">综合<i class="f-ico-arrow-d"></i></a>
  79.                     <a class="fSort">人气<i class="f-ico-arrow-d"></i></a>
  80.                     <a class="fSort">新品<i class="f-ico-arrow-d"></i></a>
  81.                     <a class="fSort">销量<i class="f-ico-arrow-d"></i></a>
  82.                     <a class="fSort">价格<i class="f-ico-triangle-mt"></i><i class="f-ico-triangle-mb"></i></a>
  83.                 </div>
  85.                 <!-- 商品详情 -->
  86.                 <div class="view grid-nosku">
  88.                     <div class="product" v-for="result in results">
  89.                         <div class="product-iWrap">
  90.                             <!--商品封面-->
  91.                             <div class="productImg-wrap">
  92.                                 <a class="productImg">
  93.                                     <img :src="result.img">
  94.                                 </a>
  95.                             </div>
  96.                             <!--价格-->
  97.                             <p class="productPrice">
  98.                                 <em>{{result.price}}</em>
  99.                             </p>
  100.                             <!--标题-->
  101.                             <p class="productTitle">
  102.                                 <a v-html="result.title"></a>
  103.                             </p>
  104.                             <!-- 店铺名 -->
  105.                             <div class="productShop">
  106.                                 <span>店铺： 小莫Java </span>
  107.                             </div>
  108.                             <!-- 成交信息 -->
  109.                             <p class="productStatus">
  110.                                 <span>月成交<em>999笔</em></span>
  111.                                 <span>评价 <a>3</a></span>
  112.                             </p>
  113.                         </div>
  114.                     </div>
  115.                 </div>
  116.             </div>
  117.         </div>
  118.     </div>
  119. </div>
  121. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  122. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  124. <script>
  125.     new Vue({
  126.         el:"#app",
  127.         data :{
  128.             keyword:"",//搜索关键字
  129.             results:[] //搜索结果
  130.         },
  131.         methods: {
  132.             searchKey() {
  133.                 var keyword = this.keyword;
  134.                 console.log(keyword);
  135.                 //对接后端的接口
  136.                 axios.get('search/'+keyword+"/1/10").then(response=>{
  137.                     console.log(response)
  138.                     this.results=response.data;
  139.                 })
  140.             }
  141.         }
  142.     })
  143. </script>
  145. </body>
  146. </html>

页面展示效果
11.2.业务编写 - 图3

11.2.业务编写 - 图4

11.2.业务编写 - 图5