• 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 添加依赖

    1. <properties>
    2.         <java.version>1.8java.version>
    3.         
    4.         <elasticsearch.version>7.6.1elasticsearch.version>
    5.     properties>
    6.     <dependencies>
    7.         <dependency>
    8.             <groupId>org.springframework.bootgroupId>
    9.             <artifactId>spring-boot-starter-webartifactId>
    10.         dependency>
    11.  
    12.         <dependency>
    13.             <groupId>mysqlgroupId>
    14.             <artifactId>mysql-connector-javaartifactId>
    15.             <scope>runtimescope>
    16.         dependency>
    17.         
    18.         <dependency>
    19.             <groupId>org.projectlombokgroupId>
    20.             <artifactId>lombokartifactId>
    21.             <optional>trueoptional>
    22.         dependency>
    23.         <dependency>
    24.             <groupId>org.springframework.bootgroupId>
    25.             <artifactId>spring-boot-starter-testartifactId>
    26.             <scope>testscope>
    27.         dependency>
    28.         
    29.         <dependency>
    30.             <groupId>org.springframework.bootgroupId>
    31.             <artifactId>spring-boot-starter-data-elasticsearchartifactId>
    32.         dependency>
    33.         
    34.         <dependency>
    35.             <groupId>com.alibabagroupId>
    36.             <artifactId>fastjsonartifactId>
    37.             <version>1.2.71version>
    38.         dependency>
    39.     dependencies>

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

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

    1.3 进行相关对ES操作

            这些操作可以在测试类中编写

    1.3.1 操作索引---创建索引

            类型名可以不写，这样的话默认为_doc，这样就不会显示过期提示了。此处图例只是为了举例，更方便理解代码。

    1.      @Autowired
    2.     private RestHighLevelClient restHighLevelClient;
    3.      //PUT  /索引名称
    4.     //索引的操作
    5.     @Test
    6.     void contextLoads() throws IOException {
    7.         //1.创建索引
    8.         CreateIndexRequest createIndexRequest=new CreateIndexRequest("wd_my");
    9.         CreateIndexResponse createIndexResponse=restHighLevelClient.indices().create(createIndexRequest, RequestOptions.DEFAULT);
    10.         //查看创建是否成功,打印结果为true，去客户端查看全部，看是否创建
    11.         System.out.println(createIndexResponse.isAcknowledged());
    12.         restHighLevelClient.close();
    13.     }

     1.3.2 操作索引--删除索引

    1.     @Autowired
    2.     private RestHighLevelClient restHighLevelClient;
    3.  
    4.     @Test
    5.     public void test02() throws IOException {
    6.         //索引的删除
    7.         DeleteIndexRequest deleteIndexRequest=new DeleteIndexRequest("wd_my");
    8.         AcknowledgedResponse delete = restHighLevelClient.indices().delete(deleteIndexRequest, RequestOptions.DEFAULT);
    9.         boolean acknowledged = delete.isAcknowledged();
    10.         System.out.println(acknowledged);
    11.         restHighLevelClient.close();
    12.     }

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

    1.      @Autowired
    2.     private RestHighLevelClient restHighLevelClient;
    3.  
    4.     @Test
    5.     public void test01() throws IOException {
    6.         //索引的获取，并判断其是否存在
    7.         GetIndexRequest indexRequest=new GetIndexRequest("wd_my");
    8.         boolean exists = restHighLevelClient.indices().exists(indexRequest, RequestOptions.DEFAULT);
    9.         System.out.println(exists);
    10.  
    11.         restHighLevelClient.close();
    12.     }

    1.3.4 操作文档---添加文档

    1.     @Autowired
    2.     private RestHighLevelClient restHighLevelClient;
    3.  
    4.     @Test
    5.     public void test03() throws IOException {
    6.         //文档的添加
    7.         IndexRequest indexRequest=new IndexRequest("wd_my");
    8.         indexRequest.id("1");
    9.         User user=new User("肖可可",15);
    10.         indexRequest.source(JSON.toJSONString(user), XContentType.JSON);
    11.         IndexResponse index = restHighLevelClient.index(indexRequest, RequestOptions.DEFAULT);
    12.         System.out.println(index.status());
    13.         System.out.println(index);
    14.  
    15.         restHighLevelClient.close();
    16.     }

    1.3.5 查询文档--id

    1.     @Autowired
    2.     private RestHighLevelClient restHighLevelClient;
    3.  
    4.     @Test
    5.     public void test04() throws IOException {
    6.         //测试获得文档的信息
    7.         GetRequest getRequest=new GetRequest("wd_my","1");
    8.         GetResponse getResponse = restHighLevelClient.get(getRequest, RequestOptions.DEFAULT);
    9.         //打印文档内容
    10.         System.out.println(getResponse);
    11.         //返回的全部内容和命令是一样的
    12.         System.out.println(getRequest);
    13.         restHighLevelClient.close();
    14.     }

    1.3.6  判断文档是否存在

    1. @Autowired
    2.     private RestHighLevelClient restHighLevelClient;
    3.  @Test
    4.     public void test05() throws IOException {
    5.        //文档的获取，并判断是否存在 2返回的是false 1返回的是true
    6.        GetRequest getRequest=new GetRequest("wd_my","2");
    7.         boolean exists = restHighLevelClient.exists(getRequest, RequestOptions.DEFAULT);
    8.         System.out.println(exists);
    9.         restHighLevelClient.close();
    10.     }

    1.3.7 删除文档

    1. @Autowired
    2.     private RestHighLevelClient restHighLevelClient;
    3.  @Test
    4.     public void test07() throws IOException {
    5.         //删除文档
    6.         DeleteRequest deleteRequest=new DeleteRequest("wd_my","1");
    7.         DeleteResponse delete = restHighLevelClient.delete(deleteRequest, RequestOptions.DEFAULT);
    8.         System.out.println(delete.status());
    9.         restHighLevelClient.close();
    10.     }

     1.3.8 修改文档

    1. @Autowired
    2.     private RestHighLevelClient restHighLevelClient;
    3.  @Test
    4.     public void test06() throws IOException {
    5.         //更新文档
    6.         UpdateRequest updateRequest=new UpdateRequest("wd_my","1");
    7.         User user=new User("肖海洋",27);
    8.         updateRequest.doc(JSON.toJSONString(user),XContentType.JSON);
    9.         UpdateResponse update = restHighLevelClient.update(updateRequest, RequestOptions.DEFAULT);
    10.         System.out.println(update.status());
    11.         restHighLevelClient.close();
    12.     }

    1.3.9 批量添加文档

    1.  //批量添加文档
    2.     @Test
    3.     public void testBuck() throws Exception{
    4.         BulkRequest  bulk=new BulkRequest("wd_my");
    5.         List list=new ArrayList<>();
    6.         list.add(new User("2","张三","北京",22));
    7.         list.add(new User("3","李四","上海",20));
    8.         list.add(new User("4","王五","杭州",25));
    9.         list.add(new User("5","赵六","广州",27));
    10.         list.add(new User("6","孙七","南京",29));
    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.     }

    1.3.10 复杂查询

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

    2.实现京东搜索

    2.1 前端页面展示

     2.2 后端结构框架展示

    2.3 后端代码

    2.3.1 对应依赖

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

    2.3.2 CommonResult

    1. @Data
    2. @AllArgsConstructor
    3. @NoArgsConstructor
    4. public class CommonResult {
    5.     private Integer code;
    6.     private String msg;
    7.     private Object data;
    8. }

    2.3.3 util层（ESconfig）

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

    2.3.4 util层（HtmlParseUtil）

    1. public class HtmlParseUtil {
    2.    public static List parseJd(String keyword) throws Exception {
    3.    // public static void main(String[] args) throws Exception{
    4.         String path="https://search.jd.com/Search?keyword="+keyword;
    5.         //Document整个网页对象
    6.        Connection con = Jsoup.connect(path).userAgent(
    7.                "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36")
    8.                .timeout(30000); // 设置连接超时时间
    9.         Document document = con.get();
    10.         //System.out.println(document);
    11.         //查询所有的商品信息
    12.         Element j_goodsList = document.getElementById("J_goodsList");
    13.         //获取某一块的商品信息
    14.         Elements li = j_goodsList.getElementsByTag("li");
    15.  
    16.          List list=new ArrayList<>();
    17.         for (Element element : li) {
    18.             String price = element.getElementsByClass("p-price").eq(0).text();
    19.             //System.out.println(price);
    20.             String pname = element.getElementsByClass("p-name").eq(0).text();
    21.             //System.out.println(pname);
    22.             String img = element.getElementsByTag("img").eq(0).attr("data-lazy-img");
    23.             //System.out.println(img);
    24.             String title = element.getElementsByClass("p-shopnum").eq(0).text();
    25.             //System.out.println(title);
    26.  
    27.            list.add(new Product(pname,price,img,title));
    28.         }
    29.        return list;
    30.  
    31.     }
    32. }

    2.3.5 entity层（Product）

    1. @Data
    2. @AllArgsConstructor
    3. @NoArgsConstructor
    4. public class Product {
    5.     private String pname;
    6.     private String price;
    7.     private String imgUrl;
    8.     private String title;
    9. }

    2.3.6 controller层（JdController）

    1. @RestController
    2. @CrossOrigin//解决跨域问题
    3. @RequestMapping("/jd")
    4. public class JdController {
    5.  
    6.     @Autowired
    7.     private JdService jdService;
    8.  
    9.     @GetMapping("/export/{keyword}")
    10.     public CommonResult export(@PathVariable String keyword) throws Exception{
    11.         return jdService.export(keyword);
    12.     }
    13.  
    14.     @GetMapping("/search/{keyword}/{pageNum}/{pageSize}/{sortType}")
    15.     public CommonResult search(@PathVariable String keyword,@PathVariable Integer pageNum,@PathVariable Integer pageSize,@PathVariable(required = false) String sortType) throws Exception{
    16.         System.out.println(sortType);
    17.         return jdService.search(keyword,pageNum,pageSize,sortType);
    18.     }
    19.  
    20.  
    21. }

    2.3.7 service层（JdService）

    1. @Service
    2. public class JdService {
    3.  
    4.     @Autowired
    5.     private RestHighLevelClient restHighLevelClient;
    6.  
    7.     public CommonResult export(String keyword) throws Exception {
    8.  
    9.         List list = HtmlParseUtil.parseJd(keyword);
    10.         BulkRequest bulkRequest=new BulkRequest("jd-index");
    11.  
    12.         for (Product product : list) {
    13.             IndexRequest indexRequest=new IndexRequest();
    14.             indexRequest.source(JSON.toJSONString(product), XContentType.JSON);
    15.             bulkRequest.add(indexRequest);
    16.         }
    17.  
    18.         BulkResponse bulkResponse=restHighLevelClient.bulk(bulkRequest, RequestOptions.DEFAULT);
    19.         if(bulkResponse.hasFailures()){
    20.             return new CommonResult(5000,"添加文档失败",null);
    21.         }else{
    22.             return new CommonResult(2000,"添加文档成功",null);
    23.         }
    24.     }
    25.  
    26.     public CommonResult search(String keyword,Integer pageNum,Integer pageSize,String name) throws IOException {
    27.         List> list=new ArrayList();
    28.         SearchRequest searchRequest=new SearchRequest("jd-index");
    29.         //放置内容
    30.         SearchSourceBuilder searchSourceBuilder=new SearchSourceBuilder();
    31.         MatchQueryBuilder matchQueryBuilder= QueryBuilders.matchQuery("pname",keyword);
    32.         searchSourceBuilder.query(matchQueryBuilder);
    33.         //排序
    34.         if(name!=null){
    35.             searchSourceBuilder.sort(name, SortOrder.ASC);
    36.         }
    37.         //分页
    38.         searchSourceBuilder.from(pageNum);
    39.         searchSourceBuilder.size(pageSize);
    40.         //高亮
    41.         HighlightBuilder highlightBuilder=new HighlightBuilder();
    42.         highlightBuilder.field("pname");
    43.         highlightBuilder.preTags("");
    44.         highlightBuilder.postTags("");
    45.  
    46.         searchSourceBuilder.highlighter(highlightBuilder);
    47.  
    48.         searchRequest.source(searchSourceBuilder);
    49.  
    50.         SearchResponse searchResponse=restHighLevelClient.search(searchRequest,RequestOptions.DEFAULT);
    51.  
    52.         SearchHit[] hits = searchResponse.getHits().getHits();
    53.         //获取total总数
    54.         Long total = searchResponse.getHits().getTotalHits().value;
    55.         for (SearchHit hit : hits) {
    56.             Map map=hit.getSourceAsMap();
    57.             //获取高亮字段
    58.             Map highlightFields = hit.getHighlightFields();
    59.             HighlightField pname = highlightFields.get("pname");
    60.             //获取对应的文本内容
    61.             Text[] fragments = pname.getFragments();
    62.             StringBuilder stringBuilder=new StringBuilder();
    63.             for (Text fragment : fragments) {
    64.                 stringBuilder.append(fragment);
    65.             }
    66.             map.put("pname",stringBuilder);
    67.             list.add(map);
    68.         }
    69.         HashMap map = new HashMap<>();
    70.         map.put("total",total);
    71.         map.put("data",list);
    72.         return new CommonResult(2000,"查询成功",map);
    73.     }
    74. }

    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

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

    对应样式

    1. <style>
    2.   /*** uncss> filename: http://localhost:9090/css/global.css ***/
    3.   body,button,fieldset,form,h1,input,legend,li,p,ul{
    4.     margin:0;padding:0
    5.   }
    6.   body,button,input{
    7.     font:12px/1.5 tahoma,arial,"\5b8b\4f53";
    8.     -ms-overflow-style:scrollbar
    9.   }
    10.   button,h1,input{
    11.     font-size:100%
    12.   }
    13.   em{
    14.     font-style:normal
    15.   }
    16.   ul{
    17.     list-style:none
    18.   }
    19.   a{
    20.     text-decoration:none;
    21.     cursor: pointer;
    22.   }
    23.   a:hover{
    24.     text-decoration:underline
    25.   }
    26.   legend{
    27.     color:#000
    28.   }
    29.   fieldset,img{
    30.     border:0
    31.   }
    32.   #content,#header{
    33.     margin-left:auto;margin-right:auto
    34.   }
    35.   html{
    36.     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}
    37.   /*** 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}
    38.  
    39. style>

    2.5.2 main.js

  • 相关阅读:
    Solon v1.11.0 发布，Hello Java
    Gatekeeper代码导读
    设计模式（2） - 创建型模式
    vue3在main.js里面定义全局函数，然后其他页面使用
    LeetCode17电话号码的字母组合
    Java高并发（线程创建以及线程池，异步调用，CompletableFuture）
    《MySQL》增删查改(进阶)
    Google 向中国开发者开放数百份 TensorFlow 资源
    苍穹外卖day10（1）Spring Task、 订单状态定时处理
    在Spring Boot应用中实现阿里云短信功能的整合
  • 原文地址：https://blog.csdn.net/qq_50896786/article/details/126365842