目录
(1)依赖
com.alibaba fastjson 1.2.75 org.jsoup jsoup 1.11.3 org.springframework.boot spring-boot-starter-data-elasticsearch org.springframework.boot spring-boot-starter-web org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test
- package com.xzj.utils;
-
- import com.xzj.entity.Product;
- import org.jsoup.Jsoup;
- import org.jsoup.nodes.Document;
- import org.jsoup.nodes.Element;
- import org.jsoup.select.Elements;
-
- import java.net.URL;
- import java.util.ArrayList;
- import java.util.List;
-
- /**
- * @author xuan
- */
- public class HtmlParseUtil {
- public static List
parseJd(String keyword) throws Exception{ - String path ="https://search.jd.com/Search?keyword="+keyword;
- Document document = Jsoup.parse(new URL(path), 30000);
- Element j_goodsList = document.getElementById("J_goodsList");
- Elements li = j_goodsList.getElementsByTag("li");
- List
list = new ArrayList<>(); - for (Element element :li){
- String price = element.getElementsByClass("p-price").eq(0).text();
- String pname = element.getElementsByClass("p-name").eq(0).text();
- String img = element.getElementsByTag("img").eq(0).attr("data-lazy-img");
- list.add(new Product(pname,price,img));
- }
- return list;
- }
- }
- package com.xzj.controller;
-
- import com.xzj.service.ProductService;
- import com.xzj.utils.CommonResult;
- import org.springframework.beans.factory.annotation.Autowired;
- import org.springframework.web.bind.annotation.*;
-
- /**
- * @author xuan
- */
- @RestController
- @RequestMapping("/product")
- @CrossOrigin
- public class ProductController {
- @Autowired
- private ProductService productService;
- @GetMapping("/exprot/{keyword}")
- public CommonResult exprot(@PathVariable String keyword) throws Exception{
- return productService.exprot(keyword);
- }
- @GetMapping("/search/{currentPage}/{pageSize}/{keyword}")
- public CommonResult search(@PathVariable Integer currentPage,@PathVariable Integer pageSize,@PathVariable String keyword)throws Exception{
- return productService.search(currentPage,pageSize,keyword);
- }
- }
- package com.xzj.entity;
-
- import lombok.AllArgsConstructor;
- import lombok.Data;
- import lombok.NoArgsConstructor;
-
- /**
- * @author xuan
- */
- @Data
- @AllArgsConstructor
- @NoArgsConstructor
- public class Product {
- private String title;
- private String price;
- private String imgUrl;
- }
- package com.xzj.service;
-
- import com.alibaba.fastjson.JSON;
- import com.sun.xml.internal.bind.v2.model.core.BuiltinLeafInfo;
- import com.xzj.entity.Product;
- import com.xzj.utils.CommonResult;
- import com.xzj.utils.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.text.Text;
- import org.elasticsearch.common.xcontent.XContentType;
- import org.elasticsearch.index.query.MatchQueryBuilder;
- import org.elasticsearch.index.query.QueryBuilders;
- import org.elasticsearch.search.SearchHit;
- import org.elasticsearch.search.SearchHits;
- import org.elasticsearch.search.builder.SearchSourceBuilder;
- import org.elasticsearch.search.fetch.subphase.highlight.HighlightBuilder;
- import org.elasticsearch.search.fetch.subphase.highlight.HighlightField;
- import org.springframework.beans.factory.annotation.Autowired;
- import org.springframework.stereotype.Service;
-
- import java.util.ArrayList;
- import java.util.HashMap;
- import java.util.List;
- import java.util.Map;
-
- /**
- * @author xuan
- */
- @Service
- public class ProductService {
- @Autowired
- private RestHighLevelClient client;
- //批量添加
- public CommonResult exprot(String keyword)throws Exception {
- BulkRequest bulkRequest = new BulkRequest("jd");
- List
list = HtmlParseUtil.parseJd(keyword); - for (Product product:list){
- IndexRequest indexRequest = new IndexRequest();
- indexRequest.source(JSON.toJSONString(product),XContentType.JSON);
- bulkRequest.add(indexRequest);
- }
- BulkResponse bulk = client.bulk(bulkRequest, RequestOptions.DEFAULT);
- if (bulk.hasFailures()){
- return new CommonResult(5000,"批量添加失败",null);
- }else {
- return new CommonResult(2000,"批量添加成功",null);
- }
-
- }
-
- public CommonResult search(Integer currentPage,Integer pageSize,String keyword)throws Exception {
- SearchRequest searchRequest = new SearchRequest();
-
- SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
- MatchQueryBuilder matchQuery = QueryBuilders.matchQuery("title", keyword);
- sourceBuilder.from((currentPage-1)*pageSize);
- sourceBuilder.size(pageSize);
- sourceBuilder.query(matchQuery);
-
- //设置高亮
- HighlightBuilder highlightBuilder = new HighlightBuilder();
- highlightBuilder.field("title");
- highlightBuilder.preTags("");
- highlightBuilder.postTags("");
- sourceBuilder.highlighter(highlightBuilder);
-
- searchRequest.source(sourceBuilder);
- SearchResponse search = client.search(searchRequest, RequestOptions.DEFAULT);
-
- SearchHits hits= search.getHits();
-
- long total = hits.getTotalHits().value;
-
- List
-
- SearchHit[] hits1 = hits.getHits();
- for (SearchHit hit :hits1){
- Map
map = hit.getSourceAsMap(); - //获取高亮
- Map
highlightFields = hit.getHighlightFields(); - HighlightField title = highlightFields.get("title");
- Text[] fragments = title.getFragments();
- StringBuilder sb = new StringBuilder();
- for(Text text :fragments){
- sb.append(text);
- }
- map.put("title",sb);
- map.put("total",total);
- list.add(map);
- }
- return new CommonResult(2000,"搜索成功",list);
- }
- }
- <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 ">
-
- <h1 id="mallLogo">
- 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">
- <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>老闫说Javaa>li>
- <li><a>老闫说前端a>li>
- <li><a>老闫说Linuxa>li>
- <li><a>老闫说大数据a>li>
- <li><a>老闫聊理财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="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.title"> a>
- p>
-
- <div class="productShop">
- <span>店铺: 老闫说Java span>
- div>
-
- <p class="productStatus">
- <span>月成交<em>999笔em>span>
- <span>评价 <a>3a>span>
- p>
- div>
- div>
- div>
- div>
-
-
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="currentPage"
- :page-sizes="pageSizes"
- :page-size="pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total">
- el-pagination>
-
- div>
- div>
-
-
- div>
- template>
-
- <script>
- export default {
- name: "jd",
- data(){
- return {
- keyword: '', // 搜索的关键字
- results:[], // 后端返回的结果
- //分页
- //当前显示的页面变量
- currentPage: 1,
- //当页显示条数
- pageSizes: [5,10,20,30],
- //
- pageSize: 5,
- //总条数
- total: 0,
- }
- },
- methods:{
-
-
- searchKey(){
- var keyword = this.keyword;
- this.$http.get('http://localhost:8080/product/search/'+'/'+this.currentPage+'/'+this.pageSize+'/'+keyword).then(response=>{
- console.log(response.data.data);
- this.results=response.data.data;
-
- this.total=response.data.data[0].total;
- })
- },
- //每页显示的条数大小改变时触发的方法
- handleSizeChange(val) {
- this.pageSize = val;
- this.searchKey();
- },
- //页码改变时触发的方法
- handleCurrentChange(val) {
- this.currentPage = 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}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>
(1)index.js

(2) app.vue

(3)main.js

分词

