javascript
ES整合SpringBoot并实现京东搜索
目錄
1.springboot整合ES
1.1 添加依賴
1.2 創建一個配置,獲取ES工具類對象。
1.3 進行相關對ES操作
1.3.1 操作索引---創建索引
1.3.2 操作索引--刪除索引
1.3.3 索引操作--判斷索引是否存在
1.3.4 操作文檔---添加文檔
1.3.5 查詢文檔--id
1.3.6 判斷文檔是否存在
1.3.7 刪除文檔
1.3.8 修改文檔
1.3.9 批量添加文檔
1.3.10 復雜查詢
2.實現京東搜索
2.1 前端頁面展示
2.2 后端結構框架展示
2.3 后端代碼
2.3.1 對應依賴
2.3.2 CommonResult
2.3.3 util層(ESconfig)
2.3.4 util層(HtmlParseUtil)
2.3.5 entity層(Product)
2.3.6 controller層(JdController)
2.3.7 service層(JdService)
2.4 IK分詞
2.5 前端代碼
2.5.1 App.vue
2.5.2 main.js
1.springboot整合ES
1.1 添加依賴
<properties><java.version>1.8</java.version><!-- 統一版本window下載好的版本 --><elasticsearch.version>7.6.1</elasticsearch.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!-- lombok --><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><!--導入elasticsearch--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency><!--導入fastjson、--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.71</version></dependency></dependencies>1.2 創建一個配置,獲取ES工具類對象。
@Configuration public class ElaticsearchConfig { //該對象可以對ES進行相關的操作@Beanpublic RestHighLevelClient restHighLevelClient(){RestHighLevelClient client=new RestHighLevelClient(RestClient.builder(new HttpHost("127.0.0.1",9200,"http")));return client;} }1.3 進行相關對ES操作
????????這些操作可以在測試類中編寫
1.3.1 操作索引---創建索引
????????類型名可以不寫,這樣的話默認為_doc,這樣就不會顯示過期提示了。此處圖例只是為了舉例,更方便理解代碼。
@Autowiredprivate RestHighLevelClient restHighLevelClient;//PUT /索引名稱//索引的操作@Testvoid contextLoads() throws IOException {//1.創建索引CreateIndexRequest createIndexRequest=new CreateIndexRequest("wd_my");CreateIndexResponse createIndexResponse=restHighLevelClient.indices().create(createIndexRequest, RequestOptions.DEFAULT);//查看創建是否成功,打印結果為true,去客戶端查看全部,看是否創建System.out.println(createIndexResponse.isAcknowledged());restHighLevelClient.close();}?1.3.2 操作索引--刪除索引
@Autowiredprivate RestHighLevelClient restHighLevelClient;@Testpublic void test02() throws IOException {//索引的刪除DeleteIndexRequest deleteIndexRequest=new DeleteIndexRequest("wd_my");AcknowledgedResponse delete = restHighLevelClient.indices().delete(deleteIndexRequest, RequestOptions.DEFAULT);boolean acknowledged = delete.isAcknowledged();System.out.println(acknowledged);restHighLevelClient.close();}?1.3.3 索引操作--判斷索引是否存在
@Autowiredprivate RestHighLevelClient restHighLevelClient;@Testpublic void test01() throws IOException {//索引的獲取,并判斷其是否存在GetIndexRequest indexRequest=new GetIndexRequest("wd_my");boolean exists = restHighLevelClient.indices().exists(indexRequest, RequestOptions.DEFAULT);System.out.println(exists);restHighLevelClient.close();}1.3.4 操作文檔---添加文檔
@Autowiredprivate RestHighLevelClient restHighLevelClient;@Testpublic void test03() throws IOException {//文檔的添加IndexRequest indexRequest=new IndexRequest("wd_my");indexRequest.id("1");User user=new User("肖可可",15);indexRequest.source(JSON.toJSONString(user), XContentType.JSON);IndexResponse index = restHighLevelClient.index(indexRequest, RequestOptions.DEFAULT);System.out.println(index.status());System.out.println(index);restHighLevelClient.close();}1.3.5 查詢文檔--id
@Autowiredprivate RestHighLevelClient restHighLevelClient;@Testpublic void test04() throws IOException {//測試獲得文檔的信息GetRequest getRequest=new GetRequest("wd_my","1");GetResponse getResponse = restHighLevelClient.get(getRequest, RequestOptions.DEFAULT);//打印文檔內容System.out.println(getResponse);//返回的全部內容和命令是一樣的System.out.println(getRequest);restHighLevelClient.close();}1.3.6? 判斷文檔是否存在
@Autowiredprivate RestHighLevelClient restHighLevelClient;@Testpublic void test05() throws IOException {//文檔的獲取,并判斷是否存在 2返回的是false 1返回的是trueGetRequest getRequest=new GetRequest("wd_my","2");boolean exists = restHighLevelClient.exists(getRequest, RequestOptions.DEFAULT);System.out.println(exists);restHighLevelClient.close();}1.3.7 刪除文檔
@Autowiredprivate RestHighLevelClient restHighLevelClient;@Testpublic void test07() throws IOException {//刪除文檔DeleteRequest deleteRequest=new DeleteRequest("wd_my","1");DeleteResponse delete = restHighLevelClient.delete(deleteRequest, RequestOptions.DEFAULT);System.out.println(delete.status());restHighLevelClient.close();}?1.3.8 修改文檔
@Autowiredprivate RestHighLevelClient restHighLevelClient;@Testpublic void test06() throws IOException {//更新文檔UpdateRequest updateRequest=new UpdateRequest("wd_my","1");User user=new User("肖海洋",27);updateRequest.doc(JSON.toJSONString(user),XContentType.JSON);UpdateResponse update = restHighLevelClient.update(updateRequest, RequestOptions.DEFAULT);System.out.println(update.status());restHighLevelClient.close();}1.3.9 批量添加文檔
//批量添加文檔@Testpublic void testBuck() throws Exception{BulkRequest bulk=new BulkRequest("wd_my");List<User> list=new ArrayList<>();list.add(new User("2","張三","北京",22));list.add(new User("3","李四","上海",20));list.add(new User("4","王五","杭州",25));list.add(new User("5","趙六","廣州",27));list.add(new User("6","孫七","南京",29));//list.stream().forEach(item->bulk.add(new IndexRequest().id(item.getId()).source(JSON.toJSONString(item),XContentType.JSON)));for(User user:list){IndexRequest indexRequest=new IndexRequest();indexRequest.id(user.getId());indexRequest.source(JSON.toJSONString(user),XContentType.JSON);bulk.add(indexRequest);}BulkResponse bulkResponse = client.bulk(bulk,RequestOptions.DEFAULT);System.out.println(bulkResponse.hasFailures());}1.3.10 復雜查詢
//搜索查詢---GET /索引/_search// {// "query":{// "":{} // },// "from":// "size":// "_source":["",""],// "sort":{}// }//1. 搜索請求對象SearchRequest//2. 構建一個條件對象SearchSourceBuilder//3. 把條件對象放入搜索請求對象中//4. 執行搜索功能@Testpublic void testSearch() throws Exception{//SearchRequest searchRequest=new SearchRequest("wd_my");//創建一個條件對象SearchSourceBuilder sourceBuilder=new SearchSourceBuilder();TermQueryBuilder matchQuery = QueryBuilders.termQuery("name", "張");sourceBuilder.query(matchQuery);//分頁sourceBuilder.from(0);sourceBuilder.size(1);//排序 // sourceBuilder.sort("age");//高亮HighlightBuilder highlightBuilder=new HighlightBuilder();highlightBuilder.field("name");highlightBuilder.preTags("<font color='red'>");highlightBuilder.postTags("</font>");sourceBuilder.highlighter(highlightBuilder);searchRequest.source(sourceBuilder);SearchResponse searchResponse = client.search(searchRequest, RequestOptions.DEFAULT);System.out.println("總條數:"+searchResponse.getHits().getTotalHits().value);SearchHit[] hits = searchResponse.getHits().getHits();Arrays.stream(hits).forEach(item-> System.out.println(item.getSourceAsString()));Arrays.stream(hits).forEach(item-> System.out.println(item.getHighlightFields()));}2.實現京東搜索
2.1 前端頁面展示
?2.2 后端結構框架展示
2.3 后端代碼
2.3.1 對應依賴
<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-web</artifactId></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><!--爬蟲專用--><dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.11.3</version></dependency><!--json依賴--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.75</version></dependency></dependencies>2.3.2 CommonResult
@Data @AllArgsConstructor @NoArgsConstructor public class CommonResult {private Integer code;private String msg;private Object data; }2.3.3 util層(ESconfig)
@Configuration public class ESConfig {@Beanpublic RestHighLevelClient restHighLevelClient(){RestHighLevelClient restHighLevelClient=new RestHighLevelClient(RestClient.builder(new HttpHost("localhost",9200,"http")));return restHighLevelClient;} }2.3.4 util層(HtmlParseUtil)
public class HtmlParseUtil {public static List<Product> parseJd(String keyword) throws Exception {// public static void main(String[] args) throws Exception{String path="https://search.jd.com/Search?keyword="+keyword;//Document整個網頁對象Connection con = Jsoup.connect(path).userAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36").timeout(30000); // 設置連接超時時間Document document = con.get();//System.out.println(document);//查詢所有的商品信息Element j_goodsList = document.getElementById("J_goodsList");//獲取某一塊的商品信息Elements li = j_goodsList.getElementsByTag("li");List<Product> list=new ArrayList<>();for (Element element : li) {String price = element.getElementsByClass("p-price").eq(0).text();//System.out.println(price);String pname = element.getElementsByClass("p-name").eq(0).text();//System.out.println(pname);String img = element.getElementsByTag("img").eq(0).attr("data-lazy-img");//System.out.println(img);String title = element.getElementsByClass("p-shopnum").eq(0).text();//System.out.println(title);list.add(new Product(pname,price,img,title));}return list;} }2.3.5 entity層(Product)
@Data @AllArgsConstructor @NoArgsConstructor public class Product {private String pname;private String price;private String imgUrl;private String title; }2.3.6 controller層(JdController)
@RestController @CrossOrigin//解決跨域問題 @RequestMapping("/jd") public class JdController {@Autowiredprivate JdService jdService;@GetMapping("/export/{keyword}")public CommonResult export(@PathVariable String keyword) throws Exception{return jdService.export(keyword);}@GetMapping("/search/{keyword}/{pageNum}/{pageSize}/{sortType}")public CommonResult search(@PathVariable String keyword,@PathVariable Integer pageNum,@PathVariable Integer pageSize,@PathVariable(required = false) String sortType) throws Exception{System.out.println(sortType);return jdService.search(keyword,pageNum,pageSize,sortType);}}2.3.7 service層(JdService)
@Service public class JdService {@Autowiredprivate RestHighLevelClient restHighLevelClient;public CommonResult export(String keyword) throws Exception {List<Product> list = HtmlParseUtil.parseJd(keyword);BulkRequest bulkRequest=new BulkRequest("jd-index");for (Product product : list) {IndexRequest indexRequest=new IndexRequest();indexRequest.source(JSON.toJSONString(product), XContentType.JSON);bulkRequest.add(indexRequest);}BulkResponse bulkResponse=restHighLevelClient.bulk(bulkRequest, RequestOptions.DEFAULT);if(bulkResponse.hasFailures()){return new CommonResult(5000,"添加文檔失敗",null);}else{return new CommonResult(2000,"添加文檔成功",null);}}public CommonResult search(String keyword,Integer pageNum,Integer pageSize,String name) throws IOException {List<Map<String,Object>> list=new ArrayList();SearchRequest searchRequest=new SearchRequest("jd-index");//放置內容SearchSourceBuilder searchSourceBuilder=new SearchSourceBuilder();MatchQueryBuilder matchQueryBuilder= QueryBuilders.matchQuery("pname",keyword);searchSourceBuilder.query(matchQueryBuilder);//排序if(name!=null){searchSourceBuilder.sort(name, SortOrder.ASC);}//分頁searchSourceBuilder.from(pageNum);searchSourceBuilder.size(pageSize);//高亮HighlightBuilder highlightBuilder=new HighlightBuilder();highlightBuilder.field("pname");highlightBuilder.preTags("<font color='red'>");highlightBuilder.postTags("</font>");searchSourceBuilder.highlighter(highlightBuilder);searchRequest.source(searchSourceBuilder);SearchResponse searchResponse=restHighLevelClient.search(searchRequest,RequestOptions.DEFAULT);SearchHit[] hits = searchResponse.getHits().getHits();//獲取total總數Long total = searchResponse.getHits().getTotalHits().value;for (SearchHit hit : hits) {Map<String,Object> map=hit.getSourceAsMap();//獲取高亮字段Map<String, HighlightField> highlightFields = hit.getHighlightFields();HighlightField pname = highlightFields.get("pname");//獲取對應的文本內容Text[] fragments = pname.getFragments();StringBuilder stringBuilder=new StringBuilder();for (Text fragment : fragments) {stringBuilder.append(fragment);}map.put("pname",stringBuilder);list.add(map);}HashMap<String,Object> map = new HashMap<>();map.put("total",total);map.put("data",list);return new CommonResult(2000,"查詢成功",map);} }2.4 IK分詞
IK分詞器是ES的一個插件,主要用于把一段中文或者英文的劃分成一個個的關鍵字,我們在搜索時候會把自己的信息進行分詞,會把數據庫中或者索引庫中的數據進行分詞,然后進行一個匹配操作,默認的中文分詞器是將每個字看成一個詞,比如"我愛技術"會被分為"我","愛","技","術",這顯然不符合要求,所以我們需要安裝中文分詞器IK來解決這個問題;
IK提供了兩個分詞算法:ik_smart和ik_max_word
ik_smart為最少切分,添加了歧義識別功能,推薦;
ik_max_word為最細切分,能切的都會被切掉;
GET /_analyze
{
? "text":"你愛學習,天天向上",
? "analyzer":"ik_max_word"
}
?GET /_analyze
{
? "text":"你愛學習,天天向上",
? "analyzer":"ik_smart"
}
添加自定義詞語:
在許多情況下會有一些專業數據,例如:
? "于敏為祖國奉獻一生", ik_smart分詞后的結果是:
而于敏是人名,被拆分開來了,需要將其作為一個詞語添加到詞典中;
在IK目錄下有config文件夾,用于存儲詞典;
創建一個文件:?? mydict.dic , 在里面添加"于敏"
然后要是想將多個詞語放置其中,只需要使用entry鍵隔開:
注意:配置完成后,要重啟elasticsearch搜索引擎。
除此之外:要刪除對應的索引,重新創建索引。
2.5 前端代碼
2.5.1 App.vue
<template><div class="page"><div id="app" class=" mallist tmall- page-not-market "><!-- 頭部搜索 --><div id="header" class=" header-list-app"><div class="headerLayout"><div class="headerCon "><!-- Logo--><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"><input v-model="keyword" type="text" autocomplete="off" id="mq"class="s-combobox-input" aria-haspopup="true"></div></div><button type="submit" @click.prevent="searchKey" id="searchbtn">搜索</button></div></fieldset></form><ul class="relKeyTop"><li><a @click="search('java')">java</a></li><li><a @click="search('vue')">vue</a></li><li><a @click="search('c#')">c#</a></li><li><a @click="search('c++')">c++</a></li><li><a @click="search('javascript')">javascript</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="#"> vue </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" @click="sort('price')">價格<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="item in results"><div class="product-iWrap"><!--商品封面--><div class="productImg-wrap"><a class="productImg"><img :src="item.imgUrl"></a></div><!--價格--><p class="productPrice"><em>{{item.price}}</em></p><!--標題--><p class="productTitle"><a v-html="item.pname"> </a></p><!-- 店鋪名 --><div class="productShop"><a v-html="item.title"> </a></div><!-- 成交信息 --><p class="productStatus"><span>月成交<em>999筆</em></span><span>評價 <a>3</a></span></p></div></div></div></div></div><!--分頁--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="pageSizes":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="tal"></el-pagination></div></div> </template><script>export default {name: "jd",data(){return {keyword: '', // 搜索的關鍵字results:[], // 后端返回的結果sortType:'',//分頁pageNum:1,pageSize:5,pageSizes:[],tal:0,}},methods:{search(keyword){this.keyword = keyword;this.searchKey();},sort(sortType){this.sortType = sortType;this.searchKey();},searchKey(){var keyword = this.keyword;this.$http.get('/jd/search/'+keyword+"/"+this.pageNum+"/"+this.pageSize+"/price").then(response=>{this.results=response.data.data.data;console.log(this.results);let sizes = [];this.tal = response.data.data.total;let page = this.tal%5 === 0 ? this.tal/5 : this.tal/5+1;sizes.push(1);for(let i=1; i<=page; i++){sizes.push(5*i);}this.pageSizes = sizes;})},//分頁部分內容handleSizeChange(val) {this.pageSize = val;this.searchKey();},handleCurrentChange(val) {this.pageNum = val;this.searchKey();},}} </script>對應樣式
<style>/*** uncss> filename: http://localhost:9090/css/global.css ***/body,button,fieldset,form,h1,input,legend,li,p,ul{margin:0;padding:0}body,button,input{font:12px/1.5 tahoma,arial,"\5b8b\4f53";-ms-overflow-style:scrollbar}button,h1,input{font-size:100%}em{font-style:normal}ul{list-style:none}a{text-decoration:none;cursor: pointer;}a:hover{text-decoration:underline}legend{color:#000}fieldset,img{border:0}#content,#header{margin-left:auto;margin-right:auto}html{zoom:expression(function(ele){ ele.style.zoom = "1"; document.execCommand("BackgroundImageCache", false, true); }(this))}@font-face{font-family:mui-global-iconfont;src:url(//at.alicdn.com/t/font_1401963178_8135476.eot);src:url(//at.alicdn.com/t/font_1401963178_8135476.eot?#iefix) format('embedded-opentype'),url(//at.alicdn.com/t/font_1401963178_8135476.woff) format('woff'),url(//at.alicdn.com/t/font_1401963178_8135476.ttf) format('truetype'),url(//at.alicdn.com/t/font_1401963178_8135476.svg#iconfont) format('svg')}#mallPage{width:auto;min-width:990px;background-color:transparent}#content{width:990px;margin:auto}#mallLogo{float:left;z-index:9;padding-top:28px;width:280px;height:64px;line-height:64px;position:relative}.page-not-market #mallLogo{width:400px}.clearfix:after,.clearfix:before,.headerCon:after,.headerCon:before{display:table;content:"";overflow:hidden}#mallSearch legend{display:none}.clearfix:after,.headerCon:after{clear:both}.clearfix,.headerCon{zoom:1}#mallPage #header{margin-top:-30px;width:auto;margin-bottom:0;min-width:990px;background:#fff}#header{height:122px;margin-top:-26px!important;background:#fff;min-width:990px;width:auto!important;position:relative;z-index:1000}#mallSearch #mq,#mallSearch fieldset,.mallSearch-input{position:relative}.headerLayout{width:990px;padding-top:26px;margin:0 auto}.header-extra{overflow:hidden}#mallSearch{float:right;padding-top:25px;width:390px;overflow:hidden}.mallSearch-form{border:solid #FF0036;border-width:3px 0 3px 3px}.mallSearch-input{background:#fff;height:30px}#mallSearch #mq{color:#000;margin:0;z-index:2;width:289px;height:20px;line-height:20px;padding:5px 3px 5px 5px;outline:0;border:none;font-weight:900;background:url(data:image/gif;base64,R0lGODlhAQADAJEAAObm5t3d3ff39wAAACH5BAAAAAAALAAAAAABAAMAAAICDFQAOw==) repeat-x;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}#mallSearch button{position:absolute;right:0;top:0;width:90px;border:0;font-size:16px;letter-spacing:4px;cursor:pointer;color:#fff;background-color:#FF0036;height:30px;overflow:hidden;font-family:'\5FAE\8F6F\96C5\9ED1',arial,"\5b8b\4f53"}#mallSearch .s-combobox{height:30px}#mallSearch .s-combobox .s-combobox-input:focus{outline:0}button::-moz-focus-inner{border:0;padding:0;margin:0}.page-not-market #mallSearch{width:540px!important}.page-not-market #mq{width:439px!important}/*** uncss> filename: http://localhost:9090/css/test.css ***/#mallSearch{float:none}.page-not-market #mallLogo{width:280px}.header-list-app #mallSearch{width:448px!important}.header-list-app #mq{width:347px!important}@media (min-width:1210px){#header .headerCon,#header .headerLayout,.main{width:1190px!important}.header-list-app #mallSearch{width:597px!important}.header-list-app #mq{width:496px!important}}@media (min-width:600px) and (max-width:800px) and (orientation:portrait){.pg .page{min-width:inherit!important}.pg #mallPage,.pg #mallPage #header{min-width:740px!important}.pg #header .headerCon,.pg #header .headerLayout,.pg .main{width:740px!important}.pg #mallPage #mallLogo{width:260px}.pg #header{min-width:inherit}.pg #mallSearch .mallSearch-input{padding-right:95px}.pg #mallSearch .s-combobox{width:100%!important}.pg #mallPage .header-list-app #mallSearch{width:auto!important}.pg #mallPage .header-list-app #mallSearch #mq{width:100%!important;padding:5px 0 5px 5px}}i{font-style:normal}.main,.page{position:relative}.page{overflow:hidden}@font-face{font-family:tm-list-font;src:url(//at.alicdn.com/t/font_1442456441_338337.eot);src:url(//at.alicdn.com/t/font_1442456441_338337.eot?#iefix) format('embedded-opentype'),url(//at.alicdn.com/t/font_1442456441_338337.woff) format('woff'),url(//at.alicdn.com/t/font_1442456441_338337.ttf) format('truetype'),url(//at.alicdn.com/t/font_1442456441_338337.svg#iconfont) format('svg')}::selection{background:rgba(0,0,0,.1)}*{-webkit-tap-highlight-color:rgba(0,0,0,.3)}b{font-weight:400}.page{background:#fff;min-width:990px}#content{margin:0!important;width:100%!important}.main{margin:auto;width:990px}.main img{-ms-interpolation-mode:bicubic}.fSort i{background:url(//img.alicdn.com/tfs/TB1XClLeAY2gK0jSZFgXXc5OFXa-165-206.png) 9999px 9999px no-repeat}#mallSearch .s-combobox{width:auto}::-ms-clear,::-ms-reveal{display:none}.attrKey{white-space:nowrap;text-overflow:ellipsis}.attrs{border-top:1px solid #E6E2E1}.attrs a{outline:0}.attr{background-color:#F7F5F5;border-color:#E6E2E1 #E6E2E1 #D1CCC7;border-style:solid solid dotted;border-width:0 1px 1px}.attr ul:after,.attr:after{display:block;clear:both;height:0;content:' '}.attrKey{float:left;padding:7px 0 0;width:10%;color:#B0A59F;text-indent:13px}.attrKey{display:block;height:16px;line-height:16px;overflow:hidden}.attrValues{position:relative;float:left;background-color:#FFF;width:90%;padding:4px 0 0;overflow:hidden}.attrValues ul{position:relative;margin-right:105px;margin-left:25px}.attrValues ul.av-collapse{overflow:hidden}.attrValues li{float:left;height:22px;line-height:22px}.attrValues li a{position:relative;color:#806F66;display:inline-block;padding:1px 20px 1px 4px;line-height:20px;height:20px;white-space:nowrap}.attrValues li a:hover{color:#ff0036;text-decoration:none}.brandAttr .attr{border:2px solid #D1CCC7;margin-top:-1px}.brandAttr .attrKey{padding-top:9px}.brandAttr .attrValues{padding-top:6px}.brandAttr .av-collapse{overflow:hidden;max-height:60px}.brandAttr li{margin:0 8px 8px 0}.brandAttr li a{text-overflow:ellipsis;overflow:hidden}.navAttrsForm{position:relative}.relKeyTop{padding:4px 0 0;margin-left:-13px;height:16px;overflow:hidden;width:100%}.relKeyTop li{display:inline-block;border-left:1px solid #ccc;line-height:1.1;padding:0 12px}.relKeyTop li a{color:#999}.relKeyTop li a:hover{color:#ff0036;text-decoration:none}.filter i{display:inline-block;overflow:hidden}.filter{margin:10px 0;padding:5px;position:relative;z-index:10;background:#faf9f9;color:#806f66}.filter i{position:absolute}.filter a{color:#806f66;cursor:pointer}.filter a:hover{color:#ff0036;text-decoration:none}.fSort{float:left;height:22px;line-height:20px;line-height:24px\9;border:1px solid #ccc;background-color:#fff;z-index:10}.fSort{position:relative}.fSort{display:inline-block;margin-left:-1px;overflow:hidden;padding:0 15px 0 5px}.fSort:hover,a.fSort-cur{color:#ff0036;background:#F1EDEC}.fSort i{top:6px;right:5px;width:7px;height:10px;line-height:10px}.fSort .f-ico-arrow-d{background-position:-22px -23px}.fSort-cur .f-ico-arrow-d,.fSort:hover .f-ico-arrow-d{background-position:-30px -23px}i.f-ico-triangle-mb,i.f-ico-triangle-mt{border:4px solid transparent;height:0;width:0}i.f-ico-triangle-mt{border-bottom:4px solid #806F66;top:2px}i.f-ico-triangle-mb{border-top:4px solid #806F66;border-width:3px\9;right:6px\9;top:12px}:root i.f-ico-triangle-mb{border-width:4px\9;right:5px\9}i.f-ico-triangle-mb,i.f-ico-triangle-mt{border:4px solid transparent;height:0;width:0}i.f-ico-triangle-mt{border-bottom:4px solid #806F66;top:2px}i.f-ico-triangle-mb{border-top:4px solid #806F66;border-width:3px\9;right:6px\9;top:12px}:root i.f-ico-triangle-mb{border-width:4px\9;right:5px\9}.view:after{clear:both;content:' '}.productImg,.productPrice em b{vertical-align:middle}.product{position:relative;float:left;padding:0;margin:0 0 20px;line-height:1.5;overflow:visible;z-index:1}.product:hover{overflow:visible;z-index:3;background:#fff}.product-iWrap{position:absolute;background-color:#fff;margin:0;padding:4px 4px 0;font-size:0;border:1px solid #f5f5f5;border-radius:3px}.product-iWrap *{font-size:12px}.product:hover .product-iWrap{height:auto;margin:-3px;border:4px solid #ff0036;border-radius:0;-webkit-transition:border-color .2s ease-in;-moz-transition:border-color .2s ease-in;-ms-transition:border-color .2s ease-in;-o-transition:border-color .2s ease-in;transition:border-color .2s ease-in}.productPrice,.productShop,.productStatus,.productTitle{display:block;overflow:hidden;margin-bottom:3px}.view:after{display:block}.view{margin-top:10px}.view:after{height:0}.productImg-wrap{display:table;table-layout:fixed;height:210px;width:100%;padding:0;margin:0 0 5px}.productImg-wrap a,.productImg-wrap img{max-width:100%;max-height:210px}.productImg{display:table-cell;width:100%;text-align:center}.productImg img{display:block;margin:0 auto}.productPrice{font-family:arial,verdana,sans-serif!important;color:#ff0036;font-size:14px;height:30px;line-height:30px;margin:0 0 5px;letter-spacing:normal;overflow:inherit!important;white-space:nowrap}.productPrice *{height:30px}.productPrice em{float:left;font-family:arial;font-weight:400;font-size:20px;color:#ff0036}.productPrice em b{margin-right:2px;font-weight:700;font-size:14px}.productTitle{display:block;color:#666;height:14px;line-height:12px;margin-bottom:3px;word-break:break-all;font-size:0;position:relative}.productTitle *{font-size:12px;font-family:\5FAE\8F6F\96C5\9ED1;line-height:14px}.productTitle a{color:#333}.productTitle a:hover{color:#ff0036!important}.productTitle a:visited{color:#551A8B!important}.product:hover .productTitle{height:14px}.productShop{position:relative;height:22px;line-height:20px;margin-bottom:5px;color:#999;white-space:nowrap;overflow:visible}.productStatus{position:relative;height:32px;border:none;border-top:1px solid #eee;margin-bottom:0;color:#999}.productStatus span{float:left;display:inline-block;border-right:1px solid #eee;width:39%;padding:10px 1px;margin-right:6px;line-height:12px;text-align:left;white-space:nowrap}.productStatus a,.productStatus em{margin-top:-8px;font-family:arial;font-size:12px;font-weight:700}.productStatus em{color:#b57c5b}.productStatus a{color:#38b}.productImg-wrap{position:relative}.product-iWrap{min-height:98%;width:210px}.view{padding-left:5px;padding-right:5px}.view{width:1023px}.view .product{width:220px;margin-right:33px}@media (min-width:1210px){.view{width:1210px;padding-left:5px;padding-right:5px}.view .product{width:220px;margin-right:20px}}@media (min-width:600px) and (max-width:800px) and (orientation:portrait){.view{width:775px;padding-left:5px;padding-right:5px}.view .product{width:220px;margin-right:35px}}.product{height:372px}.grid-nosku .product{height:333px}</style>2.5.2 main.js
總結
以上是生活随笔為你收集整理的ES整合SpringBoot并实现京东搜索的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTML JS 动态日历表
- 下一篇: emc存储java打开后报错,EMC存储