ElasticSearch集成SpringBoot+搜索页面实战（仿京东）

SpringBoot和es相关操作
- es集成SpringBoot
- 使用springboot操作es API
- - 索引相关
  - 文档相关
ES实战
- 数据准备，静态页面解析
- 项目搭建，代码实现

上一篇学习笔记： ElasticSearch核心概念与REST风格说明

SpringBoot和es相关操作

es集成SpringBoot

查看官方文档
1、es客户端

2、es客户端的类别和版本，使用7.14版本，因为这里使用的是java高级客户端，但是7.15不推荐java高级客户端，使用的是客户端

3、使用Java REST Client [7.14]的Java High Level REST Client

4、根据官方文档学习

找到Java High Level REST Client 原生依赖

<dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><version>7.14.2</version>
</dependency>

找对象 RestHighLevelClient

5、开始集成springboot

创建一个空项目
空项目建立完成之后，在这个空项目上增加一个springboot模块，并添加依赖，并为项目配置jdk1.8
检查项目的jdk和js（确保 jdk一定在 1.8以上）
检查项目导入的 es版本要和本地es版本一致，我本地用的是7.6.1
编写es配置类,绑定本地而是客户端，并且将RestHighLevelClient注入到spring容器中，让容器接管，到这一步，springboot和es集成已经完成，接下来可以通过高级客户端进行操作操作了

package com.wangjiale.springboot_es_api.config;import org.apache.http.HttpHost;
import org.elasticsearch.client.RestClient;
import org.elasticsearch.client.RestHighLevelClient;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;/*** @author wangjiale* @description: ElasticsearchConfig* @create 2021-10-06 21:28*/
@Configuration
public class ElasticsearchConfig {@Beanpublic RestHighLevelClient restHighLevelClient(){RestHighLevelClient client = new RestHighLevelClient(RestClient.builder(new HttpHost("127.0.0.1", 9200, "http")));return client;}
}

本地是127.0.0.1:9200

使用springboot操作es API

索引相关

1、创建索引

package com.wangjiale.springboot_es_api;import org.elasticsearch.client.IndicesClient;
import org.elasticsearch.client.RequestOptions;
import org.elasticsearch.client.RestHighLevelClient;
import org.elasticsearch.client.indices.CreateIndexRequest;
import org.elasticsearch.client.indices.CreateIndexResponse;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;import java.io.IOException;@SpringBootTest
class SpringbootEsApiApplicationTests {@Autowiredpublic RestHighLevelClient restHighLevelClient;//测试索引请求request@Testpublic void test1() throws IOException {//创建索引请求CreateIndexRequest indexRequest = new CreateIndexRequest("wangjiale_index");//创建索引客户端IndicesClient indices = restHighLevelClient.indices();//索引客户端执行索引请求 IndicesClientCreateIndexResponse indexResponse = indices.create(indexRequest,RequestOptions.DEFAULT);//RequestOptions.DEFAULT 默认请求参数System.out.println(indexResponse);}}

2、获得索引，判断索引是否存在

 @Testvoid test2() throws IOException{//获取索引请求GetIndexRequest index = new GetIndexRequest("wangjiale_index");//通过高级客户端创建索引客户端IndicesClient indices = restHighLevelClient.indices();//索引客户端发出索引是否存在boolean exists = indices.exists(index, RequestOptions.DEFAULT);System.out.println(exists);}

3、删除索引

  @Testpublic void test3() throws IOException {//创建删除索引的请求DeleteIndexRequest index = new DeleteIndexRequest("wangjiale_index");//通过高级客户端创建索引客户端IndicesClient indices = restHighLevelClient.indices();//索引客端端 删除索引  AcknowledgedResponse 确认响应AcknowledgedResponse delete = indices.delete(index, RequestOptions.DEFAULT);//输出是否删除System.out.println(delete.isAcknowledged());}

文档相关

使用文档时需要在有索引的基础上，在此之间建立索引“wangjiale_index”

1、创建测试文档；

   // 创建文档  规则 put /wangjiale_index/_doc/doc_1@Testpublic void test4() throws IOException {//获得索引IndexRequest index = new IndexRequest("wangjiale_index");User user1 = new User().setName("王五").setPassword("123456").setSex('男').setAge(3);//设置文档id，也相当于是文档的标识 ， index.id()如果不写参数就会默认生成index.id("doc_1");//设置请求时间index.timeout(TimeValue.timeValueDays(1));// 将我们的数据放入请求 jsonindex.source(JSON.toJSONString(user1), XContentType.JSON);// 客户端发送请求，获取响应结果IndexResponse indexResponse = restHighLevelClient.index(index, RequestOptions.DEFAULT);System.out.println(indexResponse.toString());System.out.println(indexResponse.status());}

2、判断文档是否存在，存在的话不打印_source信息

 // 获取文档，判断是否存在 get /wangjiale_index/_doc/doc_1@Testpublic void test5() throws IOException {//获得get请求 获取索引wangjiale_index 中doc_1 的内容GetRequest getRequest = new GetRequest("wangjiale_index", "doc_1");//这里不打印_source中的内容 ，因为这里主要判断文档是否存在getRequest.fetchSourceContext(new FetchSourceContext(false));getRequest.storedFields("_none_");//判断该文档是否存在boolean exists = restHighLevelClient.exists(getRequest, RequestOptions.DEFAULT);System.out.println(exists);}

3、获取文档信息

    //  获取文档信息 get wangjiale_index/_doc/doc_1@Testpublic void test6() throws IOException {//使用get 获取索引wangjiale_index 中doc_1 的内容GetRequest getRequest = new GetRequest("wangjiale_index", "doc_1");//发送get请求GetResponse documentFields = restHighLevelClient.get(getRequest, RequestOptions.DEFAULT);System.out.println(documentFields);//相当于documentFields.toString()System.out.println(documentFields.toString());// 返回的全部内容和命令是一样的 }

4、更新文档

 //更新文档@Testpublic void test7() throws IOException {//创建更新请求UpdateRequest updateRequest = new UpdateRequest("wangjiale_index", "doc_1");//设置更新超时时间updateRequest.timeout("1s");//数据更新User user1 = new User().setName("王五更新").setAge(13);//更新请求文档updateRequest.doc(JSON.toJSONString(user1), XContentType.JSON);//高级客户端发送更新请求UpdateResponse updateResponse = restHighLevelClient.update(updateRequest, RequestOptions.DEFAULT);//更新状态是否成功System.out.println(updateResponse.status());}

5、删除文档

// 删除文档记录@Testpublic void test8() throws IOException {DeleteRequest deleteRequest = new DeleteRequest("wangjiale_index", "doc_1");DeleteResponse delete = restHighLevelClient.delete(deleteRequest, RequestOptions.DEFAULT);System.out.println(delete.status());}

6、批量插入

    @Testpublic void test9() throws IOException {//设置批量请求BulkRequest bulkRequest = new BulkRequest();//设置时间bulkRequest.timeout("10s");ArrayList<User> users = new ArrayList<>();users.add(new User().setName("张三1").setPassword("123456").setSex('男').setAge(3));users.add(new User().setName("张三2").setPassword("123456").setSex('女').setAge(13));users.add(new User().setName("李四").setPassword("123456").setSex('男').setAge(39));users.add(new User().setName("王五").setPassword("123456").setSex('男').setAge(74));for (int i = 0; i < users.size(); i++) {//批量增加bulkRequest.add(new IndexRequest("wangjiale_index")//索引请求.id("doc_"+(i+1))//文档id.source(JSON.toJSONString(users.get(i)),XContentType.JSON));//文档数据}BulkResponse bulkResponse = restHighLevelClient.bulk(bulkRequest,RequestOptions.DEFAULT);//客户端发送批量请求System.out.println(bulkResponse.hasFailures());//判断是否批量请求是否失败}

7、批量更新

  @Testpublic void test9() throws IOException {//设置批量请求BulkRequest bulkRequest = new BulkRequest();//设置时间bulkRequest.timeout("10s");ArrayList<User> users = new ArrayList<>();users.add(new User().setName("张三1更新").setPassword("123456").setSex('男').setAge(3));users.add(new User().setName("张三e更新").setPassword("123456").setSex('女').setAge(13));users.add(new User().setName("李四更新").setPassword("123456").setSex('男').setAge(39));users.add(new User().setName("王五更新").setPassword("123456").setSex('男').setAge(74));for (int i = 0; i < users.size(); i++) {bulkRequest.add(new UpdateRequest("wangjiale_index", "doc_"+(i+1)).doc(JSON.toJSONString(users.get(i)),XContentType.JSON));}BulkResponse bulkResponse = restHighLevelClient.bulk(bulkRequest,RequestOptions.DEFAULT);//客户端发送批量请求System.out.println(bulkResponse.hasFailures());//判断是否批量请求是否失败}

8、批量删除

  @Testpublic void test9() throws IOException {//设置批量请求BulkRequest bulkRequest = new BulkRequest();//设置时间bulkRequest.timeout("10s");for (int i = 0; i < 4; i++) {bulkRequest.add(new DeleteRequest("wangjiale_index", "doc_"+(i+1)));}BulkResponse bulkResponse = restHighLevelClient.bulk(bulkRequest,RequestOptions.DEFAULT);//客户端发送批量请求System.out.println(bulkResponse.hasFailures());//判断是否批量请求是否失败}

9、复杂搜索
数据准备

  // 查询// SearchRequest 搜索请求// SearchSourceBuilder 条件构造// HighLightBuilder 构建高亮// TermQueryBuilder  精确查询// MatchAllQueryBuilder// xxx QueryBuilder 对应我们刚才看到的命令！@Testpublic void test10() throws IOException {//创建搜索请求SearchRequest searchRequest = new SearchRequest("wangjiale_index");//构建搜索条件 SearchSourceBuilder 我们要的数据都在_source中SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();//创建查询条件，我们使用工具类QueryBuilders//bool查询BoolQueryBuilder boolQuery = QueryBuilders.boolQuery();//“or”查询boolQuery.should(QueryBuilders.matchQuery("name","张三"));boolQuery.should(QueryBuilders.matchQuery("age",74));//分页sourceBuilder.from(0);sourceBuilder.size(10);//将查询条件放入搜索构建器中sourceBuilder.query(boolQuery);//设置查询时间sourceBuilder.timeout(new TimeValue(60));//把搜索构建器放入搜索请求中SearchRequest source = searchRequest.source(sourceBuilder);SearchResponse search = restHighLevelClient.search(source, RequestOptions.DEFAULT);SearchHits hits = search.getHits();SearchHit[] hits1 = hits.getHits();for (SearchHit documentFields : hits1) {System.out.println(documentFields);} }

结果

{"_index" : "wangjiale_index","_type" : "_doc","_id" : "doc_2","_score" : 1.4523083,"_source" : {"age" : 13,"name" : "张三","password" : "123456","sex" : "女"}
}
{"_index" : "wangjiale_index","_type" : "_doc","_id" : "doc_1","_score" : 1.2199391,"_source" : {"age" : 3,"name" : "张三1","password" : "123456","sex" : "男"}
}
{"_index" : "wangjiale_index","_type" : "_doc","_id" : "doc_4","_score" : 1.0,"_source" : {"age" : 74,"name" : "王五","password" : "123456","sex" : "男"}
}

ES实战

静态页面资源提取
链接：链接：https://pan.baidu.com/s/1NxOfgXPOs75Zcn51bc-YLw
提取码：nku8

1、创建项目，步骤如下

2、把准备的静态资源放入项目中

测试将静态资源放入项目中是否成功

数据准备，静态页面解析

数据问题？数据库获取，消息队列中获取，都可以成为数据源，爬虫！
爬取数据：（获取请求返回的页面信息，筛选出我们想要的数据就可以了！）
导入jsoup包

<!--        解析网页jsoup-->
<dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.13.1</version>
</dependency>

编写工具包，并测试是否可以拿到京东静态页面数据

    public static void main(String[] args) throws Exception {//获取请求 keyword参数是关键字搜索String url ="https://search.jd.com/Search?keyword=nars";//使用Jsoup.parse 解析请求，第一个参数是url请求，第二个参数是超时时间// 解析网页。（Jsoup 返回Document就是Document对象）Document parse = Jsoup.parse(new URL(url), 300000);//此时已经获得请求返回也页面的Document对象//通过Document对象获取div(J_goodsList)，搜索商品列表Element j_goodsList = parse.getElementById("J_goodsList");//获得div中的所有列表Elements lis = j_goodsList.getElementsByTag("li");//遍历列表，并取出里面的数据for (Element li : lis) {// 因为京东是延时加载 所以要加载图片是data-lazy-imgString img = li.getElementsByTag("img").eq(0).attr("data-lazy-img");// 获取li下第一张图片//获得价格divString price = li.getElementsByClass("p-price").eq(0).text();//获得名字divString name = li.getElementsByClass("p-name").eq(0).text();System.out.println("图片："+img);System.out.println("价格："+price);System.out.println("name："+name);}}

把工具包封装成一个方法

public class HtmlParseUtil {public static List<Jd_Content> parseJD(String keywords) throws Exception {List<Jd_Content> list = new ArrayList<>();String url ="https://search.jd.com/Search?keyword="+keywords;Document parse = Jsoup.parse(new URL(url), 300000);Element j_goodsList = parse.getElementById("J_goodsList");Elements lis = j_goodsList.getElementsByTag("li");for (Element li : lis) {// 因为京东是延时加载 所以要加载图片是data-lazy-imgString img = li.getElementsByTag("img").eq(0).attr("data-lazy-img");// 获取li下第一张图片//获得价格divString price = li.getElementsByClass("p-price").eq(0).text();//获得名字divString name = li.getElementsByClass("p-name").eq(0).text();Jd_Content jd_content = new Jd_Content();jd_content.setImg(img).setPrice(price).setName(name);list.add(jd_content);}return list;}
}

项目搭建，代码实现

此时项目结构如下图

项目中所有的依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.5</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.wangjiale</groupId><artifactId>jd-springboot-es</artifactId><version>0.0.1-SNAPSHOT</version><name>jd-springboot-es</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--        解析网页jsoup--><dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.13.1</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

实体类：
1、Indexes （es中的索引名字）

package com.wangjiale.jd_springboot_es.entity;/*** @author wangjiale* @description: Indexes* @create 2021-10-13 16:41*/
public class Indexes {public static String NAME ="jd_index";}

2、Jd_Content (京东商品信息）

package com.wangjiale.jd_springboot_es.entity;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;/*** @author wangjiale* @description: Jd_Content* @create 2021-10-13 15:54*/
@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class Jd_Content {private String img;private String price;private String name;
}

配置文件：

package com.wangjiale.jd_springboot_es.config;import org.apache.http.HttpHost;
import org.elasticsearch.client.RestClient;
import org.elasticsearch.client.RestHighLevelClient;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;/*** @author wangjiale* @description: ElasticsearchConfig* @create 2021-10-13 16:56*/
@Configuration
public class ElasticsearchConfig {@Beanpublic RestHighLevelClient restHighLevelClient(){RestHighLevelClient client = new RestHighLevelClient(RestClient.builder(new HttpHost("127.0.0.1", 9200, "http")));return client;}
}

业务逻辑：
1、EsService

package com.wangjiale.jd_springboot_es.service;import com.wangjiale.jd_springboot_es.entity.Jd_Content;import java.io.IOException;
import java.util.List;
import java.util.Map;/*** @author wangjiale* @description: EsService* @create 2021-10-13 16:07*/public interface EsService {public Boolean parseContent(String keywords) throws Exception;public List<Map<String,Object>> secher(String keywords, int pageNo, int pageSize) throws IOException;
}

2、EsServiceImp

package com.wangjiale.jd_springboot_es.service.impl;import com.alibaba.fastjson.JSON;
import com.wangjiale.jd_springboot_es.entity.Indexes;
import com.wangjiale.jd_springboot_es.entity.Jd_Content;
import com.wangjiale.jd_springboot_es.service.EsService;
import com.wangjiale.jd_springboot_es.util.HtmlParseUtil;
import org.elasticsearch.action.bulk.BulkRequest;
import org.elasticsearch.action.bulk.BulkResponse;
import org.elasticsearch.action.index.IndexRequest;
import org.elasticsearch.action.search.SearchRequest;
import org.elasticsearch.action.search.SearchResponse;
import org.elasticsearch.client.RequestOptions;
import org.elasticsearch.client.RestHighLevelClient;
import org.elasticsearch.common.unit.TimeValue;
import org.elasticsearch.common.xcontent.XContentType;
import org.elasticsearch.index.query.MatchQueryBuilder;
import org.elasticsearch.search.SearchHit;
import org.elasticsearch.search.SearchHits;
import org.elasticsearch.search.builder.SearchSourceBuilder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;/*** @author wangjiale* @description: EsServiceImp* @create 2021-10-13 16:09*/
@Service
public class EsServiceImp implements EsService {@AutowiredRestHighLevelClient restHighLevelClient;/*** 1、解析数据放入 es 索引中*/public Boolean parseContent(String keywords) throws Exception {List<Jd_Content> jd_contents = HtmlParseUtil.parseJD(keywords);BulkRequest bulkRequest = new BulkRequest();bulkRequest.timeout("2m");for (Jd_Content jd_content : jd_contents) {bulkRequest.add(new IndexRequest(Indexes.NAME).source(JSON.toJSONString(jd_content),XContentType.JSON));}BulkResponse bulk = restHighLevelClient.bulk(bulkRequest,RequestOptions.DEFAULT);return !bulk.hasFailures();}@Overridepublic List<Map<String,Object>> secher(String keywords, int pageNo, int pageSize) throws IOException {if (pageNo <=1){pageNo =1;}ArrayList<Map<String, Object>> maps = new ArrayList<>();//创建搜索请求SearchRequest searchRequest = new SearchRequest(Indexes.NAME);//构建搜索条件SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();sourceBuilder.query(new MatchQueryBuilder("name",keywords));sourceBuilder.timeout(new TimeValue(10000));//设置分页sourceBuilder.from(pageNo);sourceBuilder.size(pageSize);//把搜索条件放入搜索请求searchRequest.source(sourceBuilder);//执行搜索SearchResponse searchResponse = restHighLevelClient.search(searchRequest,RequestOptions.DEFAULT);SearchHits hits = searchResponse.getHits();for (SearchHit hit : hits) {maps.add(hit.getSourceAsMap());}return maps;}
}

控制器：

package com.wangjiale.jd_springboot_es.controller;import com.wangjiale.jd_springboot_es.entity.Jd_Content;
import com.wangjiale.jd_springboot_es.service.EsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;
import java.util.List;
import java.util.Map;/*** @author wangjiale* @description: EsController* @create 2021-10-13 18:35*/
@RestController
public class EsController {@Autowiredpublic EsService esService;@GetMapping("/parse/{keysword}")public Boolean parse(@PathVariable("keysword") String keysword) throws Exception {return esService.parseContent(keysword);}@GetMapping("/search/{keywords}/{pageNo}/{pageSize}")public List<Map<String,Object>> search(@PathVariable("keywords") String keywords,@PathVariable("pageNo")int pageNo,@PathVariable("pageSize")int pageSize) throws IOException {List<Map<String, Object>> secher = esService.secher(keywords, pageNo, pageSize);return secher;}}

页面显示：使用Vue做前后端分离

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8"/><title>王家乐-仿京东实战</title><link rel="stylesheet" th:href="@{/css/style.css}"/><!--使用Vue做前后端分离--><script th:src="@{/js/axios.min.js}"></script><script th:src="@{/js/vue.min.js}"></script>
</head><body class="pg">
<div class="page" id="app"><div id="mallPage" class=" mallist tmall- page-not-market " ><!-- 头部搜索 --><div id="header" class=" header-list-app" ><div class="headerLayout"><div class="headerCon "><!-- Logo--><h1 id="mallLogo"><img th:src="@{/images/jdlogo.png}" alt=""></h1><div class="header-extra"><!--搜索--><div id="mallSearch" class="mall-search"><form name="searchTop" class="mallSearch-form clearfix"><fieldset><legend>天猫搜索</legend><div class="mallSearch-input clearfix"><div class="s-combobox" id="s-combobox-685"><div class="s-combobox-input-wrap"><!--v-model="keyword" 和 Vue 双向绑定--><input v-model="keyword" type="text" autocomplete="off" value="dd" id="mq"class="s-combobox-input" aria-haspopup="true"></div></div><button type="submit" id="searchbtn" @click.prevent="searchKey" >搜索</button></div></fieldset></form><ul class="relKeyTop"><li><a>6666666</a></li><li><a>7777777</a></li><li><a>8888888</a></li><li><a>9999999</a></li><li><a>1111111</a></li><li><a>2222222</a></li></ul></div></div></div></div></div><!-- 商品详情页面 --><div id="content"><div class="main"><!-- 品牌分类 --><form class="navAttrsForm"><div class="attrs j_NavAttrs" style="display:block"><div class="brandAttr j_nav_brand"><div class="j_Brand attr"><div class="attrKey">品牌</div><div class="attrValues"><ul class="av-collapse row-2"><li><a href="#"> 呀哎呀呀呀 </a></li><li><a href="#"> Java </a></li></ul></div></div></div></div></form><!-- 排序规则 --><div class="filter clearfix"><a class="fSort fSort-cur">综合<i class="f-ico-arrow-d"></i></a><a class="fSort">人气<i class="f-ico-arrow-d"></i></a><a class="fSort">新品<i class="f-ico-arrow-d"></i></a><a class="fSort">销量<i class="f-ico-arrow-d"></i></a><a class="fSort">价格<i class="f-ico-triangle-mt"></i><i class="f-ico-triangle-mb"></i></a></div><!-- 商品详情 --><div class="view grid-nosku"><div class="product" v-for="result in results"><div class="product-iWrap"><!--商品封面--><div class="productImg-wrap"><a class="productImg"><img :src="result.img"></a></div><!--价格--><p class="productPrice"><em>{{result.price}}</em></p><!--标题--><p class="productTitle"><a> {{result.name}} </a></p><!-- 店铺名 --><div class="productShop"><span>店铺： Java </span></div><!-- 成交信息 --><p class="productStatus"><span>月成交<em>999笔</em></span><span>评价 <a>3</a></span></p></div></div></div></div></div></div>
</div><script>//创建Vue对象
new Vue({el: '#app',//绑定数据data : {keyword: '',//搜索的关键字results : []//搜索的结果},methods : {searchKey(){var keyword = this.keyword;// console.log(keyword);//对接后端接口axios.get("search/"+keyword+"/1/15").then(response =>{console.log(response.data);this.results = response.data;//绑定数据})}}
})
</script></body>
</html>

启动类：

package com.wangjiale.jd_springboot_es;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class JdSpringbootEsApplication {public static void main(String[] args) {SpringApplication.run(JdSpringbootEsApplication.class, args);}}

最终效果图：

ElasticSearch集成SpringBoot+实战相关推荐

狂神聊 ElasticSearch(IK分词器+Rest+集成SpringBoot+实战爬虫项目+完整代码及资料)
Bilibili 搜索关注:狂神说 Java(和狂神一起学习,共同进步) 公众号:狂神说(文章日更) 狂神聊 ElasticSearch 版本:ElasticSearch 7.6.1(全网最新了) 6 ...
Elasticsearch集成SpringBoot
一.Spring Data框架集成 1.1 Spring Data框架介绍 Spring Data是一个用于简化数据库.非关系型数据库.索引库访问,并支持云服务的开源框架. 其主要目标是使得对数据的访 ...
elasticsearch整合springBoot
elasticsearch的安装请参考:https://blog.csdn.net/qq_42410605/article/details/97884456 elasticsearch插件head的安 ...
从ElasticSearch 认识到实战（SpringBoot集成ES）
ElasticSearch 认识到实战目录搜索引擎介绍 ElasticSearch知识安装使用restful风格查询ES SpringBoot配置ES SpringBoot集成使用一.搜索引 ...
[Springboot实战] 集成 Caffeine
Caffeine是一个基于Java8的高性能,高命中率,低内存占用的缓存框架(near optimal 的本地缓存)具有较高的命中率和出色的并发能力,号称趋于完美.简单来说它是Guava Cache的 ...
elasticsearch 分页_[Springboot实战系列]整合ElasticSearch实现数据模糊搜索
前言本文介绍了如何整合搜索引擎elasticsearch与springboot,对外提供数据查询接口. 业务介绍我的个人网站需要对mysql数据库内存储的京东商品进行模糊查询(模仿淘宝商品搜索), ...
SpringBoot和Elasticsearch集成
SpringBoot和Elasticsearch的集成: 步骤依赖在Maven的pom文件中 123456789 <!--SpringBoot默认使用SpringData ElasticSe ...
SpringBoot笔记：SpringBoot集成JWT实战
文章目录 JWT 简介概念 JWT 的认证流程优缺点 JWT 消息构成 header playload signature SpringBoot 集成 JWT 实战 maven 依赖 JwtUti ...
第13章 Kotlin 集成 SpringBoot 服务端开发（1）
第13章 Kotlin 集成 SpringBoot 服务端开发本章介绍Kotlin服务端开发的相关内容.首先,我们简单介绍一下Spring Boot服务端开发框架,快速给出一个 Restful He ...

ElasticSearch集成SpringBoot+实战