• SpringBoot整合ElasticSearch,抓取JD数据案例

    (1)创建一个Springboot工程并加入相关的依赖

    (1条消息) SpringBoot架构_lqh12138的博客-CSDN博客

    1. <dependencies>
    2.         <dependency>
    3.             <groupId>com.alibabagroupId>
    4.             <artifactId>fastjsonartifactId>
    5.             <version>1.2.75version>
    6.         dependency>
    7.         <dependency>
    8.             <groupId>org.springframework.bootgroupId>
    9.             <artifactId>spring-boot-starter-data-elasticsearchartifactId>
    10.         dependency>
    11.         <dependency>
    12.             <groupId>org.springframework.bootgroupId>
    13.             <artifactId>spring-boot-starter-webartifactId>
    14.         dependency>
    15.  
    16.         <dependency>
    17.             <groupId>org.projectlombokgroupId>
    18.             <artifactId>lombokartifactId>
    19.             <optional>trueoptional>
    20.         dependency>
    21.         <dependency>
    22.             <groupId>org.springframework.bootgroupId>
    23.             <artifactId>spring-boot-starter-testartifactId>
    24.             <scope>testscope>
    25.         dependency>
    26.     dependencies>

    (2) 创建一个配置，获取ES工具类对象。

    1. @Configuration
    2. public class ESConfig {
    3.  
    4.     //该对象可以对我们的ES进行相关的操作
    5.     @Bean
    6.     public RestHighLevelClient restHighLevelClient(){
    7.         RestHighLevelClient client = new RestHighLevelClient(
    8.                 RestClient.builder(new HttpHost("127.0.0.1",9200,"http")));
    9.         return client;
    10.     }
    11. }

    (3)进行相关对ElasticSearch操作

    3.1 操作索引---创建索引

    1.     //PUT  /索引名称
    2.     @Test
    3.     void testCreateIndex() throws Exception {
    4.         //该类把创建索引的信息都封装到该类中
    5.         CreateIndexRequest createIndexRequest=new CreateIndexRequest("qy151-index");
    6.         CreateIndexResponse createIndexResponse = client.indices().create(createIndexRequest, RequestOptions.DEFAULT);
    7.         System.out.println(createIndexResponse.isAcknowledged());
    8.     }

    3.2 操作索引--删除索引

    1.  @Test
    2.     public void testDeleteIndex() throws Exception {
    3.         DeleteIndexRequest deleteIndexRequest=new DeleteIndexRequest("qy151-index");
    4.         AcknowledgedResponse delete = client.indices().delete(deleteIndexRequest, RequestOptions.DEFAULT);
    5.         System.out.println(delete.isAcknowledged());
    6.     }

    3.3 索引操作--判断索引是否存在

    1. @Test
    2.     public void testIndexExists() throws Exception{
    3.         GetIndexRequest getIndexRequest=new GetIndexRequest("qy151-index");
    4.         boolean exists = client.indices().exists(getIndexRequest, RequestOptions.DEFAULT);
    5.         System.out.println(exists);
    6.     }

    （4）操作文档---添加文档

    1.     //添加文档--PUT /索引/1 {name:"",age:"",address:""}
    2.     @Test
    3.     public void testInsertDoc() throws Exception{
    4.         IndexRequest indexRequest=new IndexRequest("qy151-index");
    5.         indexRequest.id("1");//指定文档的id
    6.         //指定文档的内容:String文档的json内容，XContentType xContentType：以什么格式
    7.         indexRequest.source(JSON.toJSONString(new User("张三","北京",22)), XContentType.JSON);
    8.  
    9.         IndexResponse indexResponse = client.index(indexRequest, RequestOptions.DEFAULT);
    10.         System.out.println(indexResponse.getResult());
    11.     }

    （5）查询文档--id

    1.  //获取文档 GET /索引/_doc/1
    2.     @Test
    3.     public void testGetDoc() throws Exception{
    4.         GetRequest indexRequest=new GetRequest("qy151-index");
    5.         indexRequest.id("1");
    6.         GetResponse getResponse = client.get(indexRequest, RequestOptions.DEFAULT);
    7.         String string = getResponse.getSourceAsString();
    8.         User user = JSON.parseObject(string, User.class);
    9.  
    10.         Map map = getResponse.getSourceAsMap();
    11.         System.out.println(map.get("address"));
    12.     }

    (6)判断文档是否存在

    1.  
    2.     //判断索引文档是否存在
    3.     @Test
    4.     public void testDocExist() throws Exception{
    5.         GetRequest indexRequest=new GetRequest("qy151-index");
    6.         indexRequest.id("2");
    7.         boolean exists = client.exists(indexRequest, RequestOptions.DEFAULT);
    8.         System.out.println(exists);
    9.     }

    （7）删除文档

    1. //文档操作---删除文档
    2.     @Test
    3.     public void testDeleteDoc() throws Exception{
    4.         DeleteRequest deleteRequest=new DeleteRequest("qy151-index");
    5.         deleteRequest.id("1");
    6.         DeleteResponse delete = client.delete(deleteRequest,RequestOptions.DEFAULT);
    7.  
    8.         System.out.println(delete.getResult());
    9.     }

    （8）修改文档

    1.  @Test
    2.     public void testUpdateDoc()throws  Exception{
    3.         UpdateRequest updateRequest=new UpdateRequest("qy151-index","1");
    4.         User user = new User();
    5.         user.setName("刘德华");
    6.         updateRequest.doc(JSON.toJSONString(user), XContentType.JSON);
    7.         UpdateResponse update = client.update(updateRequest, RequestOptions.DEFAULT);
    8.         System.out.println(update.getResult());
    9.     }

    （9）批量添加文档

    1.  //批量添加文档
    2.     @Test
    3.     public void testBuck() throws Exception{
    4.         BulkRequest  bulk=new BulkRequest("qy151-index");
    5.         List list=new ArrayList<>();
    6.         list.add(new User("2","张三","北京",22));
    7.         list.add(new User("3","张三他爸","上海",22));
    8.         list.add(new User("4","李四","杭州",22));
    9.         list.add(new User("5","李四他妈","广州",22));
    10.         list.add(new User("6","王五","南京",22));
    11.  
    12.         //list.stream().forEach(item->bulk.add(new IndexRequest().id(item.getId()).source(JSON.toJSONString(item),XContentType.JSON)));
    13.         for(User user:list){
    14.              IndexRequest indexRequest=new IndexRequest();
    15.              indexRequest.id(user.getId());
    16.              indexRequest.source(JSON.toJSONString(user),XContentType.JSON);
    17.              bulk.add(indexRequest);
    18.         }
    19.  
    20.  
    21.  
    22.         BulkResponse bulkResponse = client.bulk(bulk,RequestOptions.DEFAULT);
    23.         System.out.println(bulkResponse.hasFailures());
    24.     }

    （10）复杂查询

    1.  
    2.     //搜索查询---GET /索引/_search
    3.     // {
    4.     //     "query":{
    5.     //         "":{}
    6. //          },
    7.        //  "from":
    8.      //    "size":
    9.     //     "_source":["",""],
    10.     //     "sort":{}
    11.  
    12.     // }
    13.  
    14.     //1. 搜索请求对象SearchRequest
    15.     //2. 构建一个条件对象SearchSourceBuilder
    16.     //3. 把条件对象放入搜索请求对象中
    17.     //4. 执行搜索功能
    18.  
    19.     @Test
    20.     public void testSearch() throws Exception{
    21.         //
    22.         SearchRequest searchRequest=new SearchRequest("qy151-index");
    23.         //创建一个条件对象
    24.         SearchSourceBuilder sourceBuilder=new SearchSourceBuilder();
    25.         TermQueryBuilder matchQuery = QueryBuilders.termQuery("name", "张");
    26.         sourceBuilder.query(matchQuery);
    27.  
    28.         //分页
    29.         sourceBuilder.from(0);
    30.         sourceBuilder.size(1);
    31.  
    32.         //排序
    33. //        sourceBuilder.sort("age");
    34.  
    35.         //高亮
    36.         HighlightBuilder highlightBuilder=new HighlightBuilder();
    37.         highlightBuilder.field("name");
    38.         highlightBuilder.preTags("");
    39.         highlightBuilder.postTags("");
    40.         sourceBuilder.highlighter(highlightBuilder);
    41.  
    42.         searchRequest.source(sourceBuilder);
    43.  
    44.  
    45.         SearchResponse searchResponse = client.search(searchRequest, RequestOptions.DEFAULT);
    46.  
    47.         System.out.println("总条数:"+searchResponse.getHits().getTotalHits().value);
    48.         SearchHit[] hits = searchResponse.getHits().getHits();
    49.  
    50.         Arrays.stream(hits).forEach(item-> System.out.println(item.getSourceAsString()));
    51.         Arrays.stream(hits).forEach(item-> System.out.println(item.getHighlightFields()));
    52.     }

    综合案例--京东搜索

    后端数据

    所需的包目录

    pom.xml

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     <modelVersion>4.0.0modelVersion>
    5.     <parent>
    6.         <groupId>org.springframework.bootgroupId>
    7.         <artifactId>spring-boot-starter-parentartifactId>
    8.         <version>2.3.12.RELEASEversion>
    9.         <relativePath/> 
    10.     parent>
    11.     <groupId>com.lqhgroupId>
    12.     <artifactId>day0816-JDartifactId>
    13.     <version>0.0.1-SNAPSHOTversion>
    14.     <name>day0816-JDname>
    15.     <description>day0816-JDdescription>
    16.     <properties>
    17.         <java.version>1.8java.version>
    18.     properties>
    19.     <dependencies>
    20.         <dependency>
    21.             <groupId>org.springframework.bootgroupId>
    22.             <artifactId>spring-boot-starter-data-elasticsearchartifactId>
    23.         dependency>
    24.         <dependency>
    25.             <groupId>org.springframework.bootgroupId>
    26.             <artifactId>spring-boot-starter-webartifactId>
    27.         dependency>
    28.  
    29.         <dependency>
    30.             <groupId>org.projectlombokgroupId>
    31.             <artifactId>lombokartifactId>
    32.             <optional>trueoptional>
    33.         dependency>
    34.         <dependency>
    35.             <groupId>org.springframework.bootgroupId>
    36.             <artifactId>spring-boot-starter-testartifactId>
    37.             <scope>testscope>
    38.         dependency>
    39.  
    40.  
    41.         <dependency>
    42.             <groupId>org.jsoupgroupId>
    43.             <artifactId>jsoupartifactId>
    44.             <version>1.11.3version>
    45.         dependency>
    46.  
    47.         <dependency>
    48.             <groupId>com.alibabagroupId>
    49.             <artifactId>fastjsonartifactId>
    50.             <version>2.0.5version>
    51.         dependency>
    52.  
    53.     dependencies>
    54.  
    55.     <build>
    56.         <plugins>
    57.             <plugin>
    58.                 <groupId>org.springframework.bootgroupId>
    59.                 <artifactId>spring-boot-maven-pluginartifactId>
    60.                 <configuration>
    61.                     <excludes>
    62.                         <exclude>
    63.                             <groupId>org.projectlombokgroupId>
    64.                             <artifactId>lombokartifactId>
    65.                         exclude>
    66.                     excludes>
    67.                 configuration>
    68.             plugin>
    69.         plugins>
    70.     build>
    71.  
    72. project>

     HttpParseUtil类 抓取京东的商品数据

    1. package com.lqh.utils;
    2.  
    3. import com.lqh.entity.Product;
    4. import org.jsoup.Jsoup;
    5. import org.jsoup.nodes.Document;
    6. import org.jsoup.nodes.Element;
    7. import org.jsoup.select.Elements;
    8.  
    9. import java.net.URL;
    10. import java.util.ArrayList;
    11. import java.util.List;
    12.  
    13. public class HttpParseUtil {
    14.     public static List searchGoods(String goods){
    15.         String url="https://search.jd.com/Search?keyword="+goods;
    16.         try {
    17.             Document document = Jsoup.parse(new URL(url), 30000);
    18.             //获取所搜索的整个网页
    19.             //System.out.println(document);
    20.  
    21.  
    22.             Element goodsList = document.getElementById("J_goodsList");
    23.             //获取所搜内容的部分
    24.             //System.out.println(goodsList);
    25.  
    26.             Elements li = goodsList.getElementsByTag("li");
    27.             //System.out.println(li);
    28.  
    29.             List list = new ArrayList<>();
    30.             for (Element element : li) {
    31.                 String price = element.getElementsByClass("p-price").eq(0).text();
    32.                 String name = element.getElementsByClass("p-name").eq(0).text();
    33.                 String img = element.getElementsByTag("img").eq(0).attr("data-lazy-img");
    34.  
    35.                 list.add(new Product(name, price, img));
    36.             }
    37.             return list;
    38.         }catch (Exception e){
    39.             e.printStackTrace();
    40.         }
    41.         return null;
    42.     }
    43.  
    44.     public static void main(String[] args) {
    45.         List list = HttpParseUtil.searchGoods("华为");
    46.         System.out.println(list);
    47.     }
    48. }

    CommonResult类

    1. package com.lqh.utils;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @AllArgsConstructor
    9. @NoArgsConstructor
    10. public class CommonResult {
    11.     private Integer code;
    12.     private String msg;
    13.     private Object data;
    14. }

    application.yml 配置文件

    1. server:
    2.   port: 8001

    ProductController类

    1. package com.lqh.controller;
    2.  
    3. import com.lqh.server.ProductServer;
    4. import com.lqh.utils.CommonResult;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.*;
    7.  
    8. import java.util.List;
    9. import java.util.Map;
    10.  
    11. @RestController
    12. @RequestMapping("/product")
    13. @CrossOrigin
    14. public class ProductController {
    15.  
    16.     @Autowired
    17.     private ProductServer productServer;
    18.  
    19.     @GetMapping("/export/{keyword}")
    20.     public CommonResult exportProduct(@PathVariable String keyword) throws Exception{
    21.         String result = productServer.exportGoods(keyword);
    22.         if(result.contains("成功")) {
    23.             return new CommonResult(200, result, null);
    24.         }else return new CommonResult(500,result,null);
    25.     }
    26.  
    27.     @GetMapping("/search/{currentPage}/{pageSize}/{keyword}")
    28.     public CommonResult searchProduct(@PathVariable Integer currentPage,@PathVariable Integer pageSize,@PathVariable String keyword) throws Exception{
    29.         List> list = productServer.searchGoods(currentPage,pageSize,keyword);
    30.         if(list!=null){
    31.             return new CommonResult(200,"商品搜索成功",list);
    32.         }else{
    33.             return new CommonResult(500,"没有查到该商品",null);
    34.         }
    35.     }
    36.  
    37. }

    Product 实体类 这里只要商品的名字、价格、图片

    1. package com.lqh.entity;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @AllArgsConstructor
    9. @NoArgsConstructor
    10. public class Product {
    11.     private String name;
    12.     private String price;
    13.     private String imgUrl;
    14. }

    ProductServer

    1. package com.lqh.server;
    2.  
    3. import com.alibaba.fastjson.JSON;
    4. import com.lqh.entity.Product;
    5. import com.lqh.utils.HttpParseUtil;
    6. import org.elasticsearch.action.bulk.BulkRequest;
    7. import org.elasticsearch.action.bulk.BulkResponse;
    8. import org.elasticsearch.action.index.IndexRequest;
    9. import org.elasticsearch.action.search.SearchRequest;
    10. import org.elasticsearch.action.search.SearchResponse;
    11. import org.elasticsearch.client.RequestOptions;
    12. import org.elasticsearch.client.RestHighLevelClient;
    13. import org.elasticsearch.common.text.Text;
    14. import org.elasticsearch.common.xcontent.XContentType;
    15. import org.elasticsearch.index.query.MatchQueryBuilder;
    16. import org.elasticsearch.index.query.QueryBuilders;
    17. import org.elasticsearch.search.SearchHit;
    18. import org.elasticsearch.search.SearchHits;
    19. import org.elasticsearch.search.builder.SearchSourceBuilder;
    20. import org.elasticsearch.search.fetch.subphase.highlight.HighlightBuilder;
    21. import org.elasticsearch.search.fetch.subphase.highlight.HighlightField;
    22. import org.springframework.beans.factory.annotation.Autowired;
    23. import org.springframework.stereotype.Service;
    24.  
    25. import java.util.ArrayList;
    26. import java.util.HashMap;
    27. import java.util.List;
    28. import java.util.Map;
    29.  
    30. @Service
    31. public class ProductServer {
    32.  
    33.     @Autowired
    34.     private RestHighLevelClient client;
    35.  
    36.     public String exportGoods(String keyword) throws Exception{
    37.  
    38.         BulkRequest request=new BulkRequest("lqh-jd");
    39.  
    40.         List list = HttpParseUtil.searchGoods(keyword);
    41.  
    42.         for (Product product : list) {
    43.             IndexRequest indexRequest=new IndexRequest();
    44.             indexRequest.source(JSON.toJSONString(product), XContentType.JSON);
    45.             request.add(indexRequest);
    46.         }
    47.  
    48.  
    49.         BulkResponse response = client.bulk(request, RequestOptions.DEFAULT);
    50.  
    51.         if(response.hasFailures()){
    52.             return "批量添加失败";
    53.         }else{
    54.             return "批量添加成功";
    55.         }
    56.     }
    57.  
    58.     public List> searchGoods(Integer currentPage,Integer pageSize,String keyword) throws Exception{
    59.  
    60.         //exportGoods(keyword);
    61.  
    62.         SearchRequest request=new SearchRequest("lqh-jd");
    63.  
    64.         SearchSourceBuilder sourceBuilder=new SearchSourceBuilder();
    65.         MatchQueryBuilder matchQuery = QueryBuilders.matchQuery("name", keyword);
    66.         sourceBuilder.query(matchQuery);
    67.  
    68.         sourceBuilder.from(currentPage);
    69.         sourceBuilder.size(pageSize);
    70.  
    71.         HighlightBuilder highlightBuilder=new HighlightBuilder();
    72.         highlightBuilder.field("name");
    73.         highlightBuilder.preTags("");
    74.         highlightBuilder.postTags("");
    75.         sourceBuilder.highlighter(highlightBuilder);
    76.  
    77.         request.source(sourceBuilder);
    78.  
    79.         SearchResponse response = client.search(request, RequestOptions.DEFAULT);
    80.  
    81.         SearchHits hits = response.getHits();
    82.         SearchHit[] searchHits = hits.getHits();
    83.         List> list=new ArrayList<>();
    84.         long total = hits.getTotalHits().value;
    85.         /*Map value=new HashMap<>();
    86.         value.put("total",total);
    87.         list.add(value);*/
    88.  
    89.         for (SearchHit hit : searchHits) {
    90.             Map map = hit.getSourceAsMap();
    91.             Map highlightFields = hit.getHighlightFields();
    92.             HighlightField name = highlightFields.get("name");
    93.             Text[] fragments = name.getFragments();
    94.             StringBuilder string=new StringBuilder();
    95.             for (Text text : fragments) {
    96.                 string.append(text);
    97.             }
    98.             map.put("name",string);
    99.             map.put("total",total);
    100.  
    101.             list.add(map);
    102.         }
    103.         return list;
    104.     }
    105. }

    前端数据

    页面

    1. <template>
    2.     <div class="page">
    3.         <div id="app" class=" mallist tmall- page-not-market ">
    4.             
    5.             <div id="header" class=" header-list-app">
    6.                 <div class="headerLayout">
    7.                     <div class="headerCon ">
    8.                         
    9.                         <h1 id="mallLogo">
    11.                         h1>
    12.                         <div class="header-extra">
    13.                             
    14.                             <div id="mallSearch" class="mall-search">
    15.                                 <form name="searchTop" class="mallSearch-form clearfix">
    16.                                     <fieldset>
    17.                                         <legend>天猫搜索legend>
    18.                                         <div class="mallSearch-input clearfix">
    19.                                             <div class="s-combobox" id="s-combobox-685">
    20.                                                 <div class="s-combobox-input-wrap">
    21.                                                     <input v-model="keyword"  type="text" autocomplete="off" id="mq"
    22.                                                            class="s-combobox-input"  aria-haspopup="true">
    23.                                                 div>
    24.                                             div>
    25.                                             <button type="submit" @click.prevent="searchKey" id="searchbtn">搜索button>
    26.                                         div>
    27.                                     fieldset>
    28.                                 form>
    29.                                 <ul class="relKeyTop">
    30.                                     <li><a>老闫说Javaa>li>
    31.                                     <li><a>老闫说前端a>li>
    32.                                     <li><a>老闫说Linuxa>li>
    33.                                     <li><a>老闫说大数据a>li>
    34.                                     <li><a>老闫聊理财a>li>
    35.                                 ul>
    36.                             div>
    37.                         div>
    38.                     div>
    39.                 div>
    40.             div>
    41.             
    42.             <div id="content">
    43.                 <div class="main">
    44.                     
    45.                     <form class="navAttrsForm">
    46.                         <div class="attrs j_NavAttrs" style="display:block">
    47.                             <div class="brandAttr j_nav_brand">
    48.                                 <div class="j_Brand attr">
    49.                                     <div class="attrKey">
    50.                                         品牌
    51.                                     div>
    52.                                     <div class="attrValues">
    53.                                         <ul class="av-collapse row-2">
    54.                                             <li><a href="#"> 老闫说 a>li>
    55.                                             <li><a href="#"> Java a>li>
    56.                                         ul>
    57.                                     div>
    58.                                 div>
    59.                             div>
    60.                         div>
    61.                     form>
    62.                     
    63.                     <div class="filter clearfix">
    64.                         <a class="fSort fSort-cur">综合<i class="f-ico-arrow-d">i>a>
    65.                         <a class="fSort">人气<i class="f-ico-arrow-d">i>a>
    66.                         <a class="fSort">新品<i class="f-ico-arrow-d">i>a>
    67.                         <a class="fSort">销量<i class="f-ico-arrow-d">i>a>
    68.                         <a class="fSort">价格<i class="f-ico-triangle-mt">i><i class="f-ico-triangle-mb">i>a>
    69.                     div>
    70.                     
    71.                     <div class="view grid-nosku" >
    72.                         <div class="product" v-for="item in results">
    73.                             <div class="product-iWrap">
    74.                                 
    75.                                 <div class="productImg-wrap">
    76.                                     <a class="productImg">
    77.                                         <img :src="item.imgUrl">
    78.                                     a>
    79.                                 div>
    80.                                 
    81.                                 <p class="productPrice">
    82.                                     <em>{{item.price}}em>
    83.                                 p>
    84.                                 
    85.                                 <p class="productTitle">
    86.                                     <a v-html="item.name">  a>
    87.                                 p>
    88.                                 
    89.                                 <div class="productShop">
    90.                                     <span>店铺： 老闫说Java span>
    91.                                 div>
    92.                                 
    93.                                 <p class="productStatus">
    94.                                     <span>月成交<em>999笔em>span>
    95.                                     <span>评价 <a>3a>span>
    96.                                 p>
    97.                             div>
    98.                         div>
    99.                     div>
    100.                 div>
    101.               <el-pagination
    102.                   @size-change="handleSizeChange"
    103.  
    104.                   @current-change="handleCurrentChange"
    105.  
    106.                   :current-page="currentPage"
    107.  
    108.                   :page-sizes="pageSizes"
    109.  
    110.                   :page-size="pageSize"
    111.                   layout="total, sizes, prev, pager, next, jumper"
    112.                   :total="total">
    113.               el-pagination>
    114.             div>
    115.         div>
    116.     div>
    117. template>
    118.  
    119. <script>
    120.     export default {
    121.         name: "jd",
    122.         data(){
    123.              return {
    124.                   keyword: '', // 搜索的关键字
    125.                   results:[] ,// 后端返回的结果
    126.  
    127.  
    128.                //当前显示的页码变量，默认为第一页
    129.                currentPage:1,
    130.  
    131.                //
    132.                pageSizes:[5,10,20,30,40],
    133.  
    134.                //进入页面时，每页显示5条数据
    135.                pageSize:5,
    136.  
    137.                //
    138.                total:0,
    139.              }
    140.         },
    141.         methods:{
    142.             searchKey(){
    143.                 var keyword = this.keyword;
    144.                 this.$http.get('/product/search/'+this.currentPage+"/"+this.pageSize+"/"+this.keyword).then(response=>{
    145.                     /*this.total=response.data.data[0].total
    146.                     var splice = response.data.data.splice(1,response.data.data.length);
    147.                     this.results=splice*/
    148.                   console.log(response.data.data)
    149.                   this.total=response.data.data[0].total
    150.                   this.results=response.data.data
    151.                 })
    152.             },
    153.           /*每页显示的条数大小改变时触发的方法*/
    154.           handleSizeChange(val) {
    155.             this.pageSize=val;
    156.             this.searchKey()
    157.             console.log('每页 '+val +'条');
    158.           },
    159.  
    160.           /*页码改变时触发的方法*/
    161.           handleCurrentChange(val) {
    162.             this.currentPage=val
    163.             this.searchKey()
    164.             console.log('当前页:'+ val);
    165.           },
    166.         }
    167.  
    168.     }
    169. script>
    170.  
    171. <style>
    172.     /*** 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}
    173.     /*** 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}
    174.  
    175. style>

    测试结果

  • 相关阅读:
    8 个精彩的免费 G​​IS 软件资源分享
    ChatGPT引领：打造独具魅力的论文
    为什么需要在微服务中使用链路追踪？Spring Cloud 可以选择哪些微服务链路追踪方案？
    RocketMQ源码阅读（十一）AllocateMessageQueueConsistentHash一致性hash
    计组 | 交叉编址 & 流水线
    Deformable Convolutional Networks 可变形卷积网络论文精读与解析
    ES6 从入门到精通 # 18：使用 Promise 封装 ajax
    Seaborn数据可视化综合应用Basemap和Seaborn在线闯关_头歌实践教学平台
    海量数据处理面试题
    枪出惊龙，众“锁”周之
  • 原文地址：https://blog.csdn.net/m0_58212960/article/details/126449922