ES-Springboot整合
springboot操作elasticsearch进行各种操作
·
目录
3.3.2 使用 ik_max_word分词算法，进行细粒度的划分：
4.综合案例---爬取京东信息存入ES并在自己的页面展示这些数据
1.整合准备
1.1 导入依赖
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.78</version>
</dependency>
<!-- elasticsearch相关依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>1.2 创建相关配置类
package com.wt.config;
import org.apache.http.HttpHost;
import org.elasticsearch.client.RestClient;
import org.elasticsearch.client.RestHighLevelClient;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class ESConfig {
//该对象可以对我们的ES进行相关的操作
@Bean
public RestHighLevelClient restHighLevelClient(){
//此处的ip为本地ip,可修改为指定对象的ip
RestHighLevelClient client = new RestHighLevelClient(
RestClient.builder(new HttpHost("127.0.0.1",9200,"http")));
return client;
}
}
2.ES的操作
在测试类中导入
@Autowired private RestHighLevelClient client;
2.1 创建索引
//创建索引----PUT /zfy-test/_doc{"mapping":{"properties"}}
@Test
void contextLoadss() throws Exception{
//创建索引创建对象，并设置索引名
CreateIndexRequest createIndexRequest = new CreateIndexRequest("zfy-test");
//根据索引对象信息创建索引
CreateIndexResponse createIndexResponse = client.indices().create(createIndexRequest, RequestOptions.DEFAULT);
//判断索引是否创建成功---输出为true则创建成功
System.out.println(createIndexResponse.isAcknowledged());
}2.2 删除索引
//删除索引-----DELETE /zfy-test
@Test
void deleteIndexReq() throws Exception{
//创建索引删除对象，并设置索引名
DeleteIndexRequest deleteIndexRequest = new DeleteIndexRequest("zfy-test");
//根据相关对象信息删除索引
AcknowledgedResponse delete = client.indices().delete(deleteIndexRequest, RequestOptions.DEFAULT);
//查看索引是否删除成功，成功则返回true
System.out.println(delete.isAcknowledged());
}2.3 判断索引是否存在
//判断索引是否存在 GET /zfy-test
@Test
void IndexExistsReq() throws Exception{
//创建查询索引对象，并指定查询的索引
GetIndexRequest indexRequest = new GetIndexRequest("zfy-test");
//通过对象信息查询索引是否存在
boolean exists = client.indices().exists(indexRequest, RequestOptions.DEFAULT);
//返回true表示存在，否则不存在
System.out.println(exists);
}2.4 创建文档
//添加文档-----PUT /zfy-test/_doc/1{name:"",age: ,"address":""}--该方法同时拥有修改功能---该id不存在则添加，存在则修改
@Test
void InsertDocReq() throws Exception{
//创建文档信息对象---指定文档所在的索引
IndexRequest indexRequest = new IndexRequest("zfy-test");
//指定文档id
indexRequest.id("1");
//指定文档数据
indexRequest.source(new User("嵇康","嵩山",23),XContentType.JSON);
//根据相关信息创建文档
IndexResponse index = client.index(indexRequest, RequestOptions.DEFAULT);
//获取文档创建的结果---首次创建该文档则返回CREATED,若存在该文档则返回UPDATE
System.out.println(index.getResult());
}2.5 查询文档
将查询出的文档封装到实体类或map中
//查询文档 GET /zfy-test/_doc/1
@Test
void GetDocReq() throws Exception{
//创建查询对象，并指定索引
GetRequest getRequest = new GetRequest("zfy-test");
//指定文档id
getRequest.id("1");
//根据相关信息查询文档是否存在
GetResponse index = client.get(getRequest, RequestOptions.DEFAULT);
System.out.println(index);
//获取返回的数据----直接输出index也可
String sourceAsString = index.getSourceAsString();
//若存在该文档则返回该文档的所有数据，若不存在该文档则found为false且没有数据
System.out.println(sourceAsString);
//将获取到的数据封装到实体类User中
User user = JSON.parseObject(sourceAsString, User.class);
System.out.println(user.getAddress());
//将获取的数据封装到Map中
Map<String, Object> sourceAsMap = index.getSourceAsMap();
System.out.println(sourceAsMap.get("name"));
}2.6 判断文档是否存在
//判断文档是否存在
@Test
void DocExistsReq() throws Exception{
//创建查询对象，并指定索引
GetRequest getRequest = new GetRequest("zfy-test");
//指定文档id
getRequest.id("1");
//判断文档是否存在与查询文档调用方法不同，但参数相同
boolean exists = client.exists(getRequest, RequestOptions.DEFAULT);
//存在该文档则返回为true，反之为false
System.out.println(exists);
}2.7 修改文档
//修改文档 POST /zfy-test/1/_update{"doc":{"name":""}}
@Test
void UpdateDocReq() throws Exception{
//创建修改信息对象，并指定索引和文档id
UpdateRequest updateRequest = new UpdateRequest("zfy-test","1");
//创建实体类，并封装数据
User user = new User();
user.setName("康康");
//封装要修改的值----以POST形式修改指定列
updateRequest.doc(JSON.toJSONString(user),XContentType.JSON);
UpdateResponse update = client.update(updateRequest, RequestOptions.DEFAULT);
//输出修改返回的值---成功过则返回UPDATE
System.out.println(update.getResult());
}2.8 批量添加
//批量添加文档
@Test
void bulkDoc() throws Exception{
//定义容器并指定索引
BulkRequest bulkRequest = new BulkRequest("zfy-test");
//定义集合封装文档信息
List<User> list = new ArrayList<>();
list.add(new User("张三","北京",22));
list.add(new User("张三他妈","天津",45));
list.add(new User("李四","南京",23));
list.add(new User("李四他爸","天津",47));
list.add(new User("赵六","西安",22));
//使用stream形式将list内的数据封装到容器中
list.stream().forEach(item->{
bulkRequest.add(new IndexRequest().source(JSON.toJSONString(item),XContentType.JSON));
});
//将封装好的信息放入该方法中进行批量添加---将会自动生成id
BulkResponse bulk = client.bulk(bulkRequest, RequestOptions.DEFAULT);
//判断是否添加失败，若成功添加则返回false
System.out.println(bulk.hasFailures());
}
2.9 删除文档
//删除文档
@Test
void deleteDocReq() throws Exception{
//创建删除对象---指定索引
DeleteRequest deleteRequest = new DeleteRequest("zfy-test");
//指定删除id
deleteRequest.id("1");
//调用删除方法
DeleteResponse delete = client.delete(deleteRequest, RequestOptions.DEFAULT);
//获取删除返回值----成功返回为true，失败则返回false
System.out.println(delete.getResult());
}批量删除
//--------批量删除
@Test
void deleteDocReqList() throws Exception{
//创建删除对象---指定索引
DeleteRequest deleteRequest = new DeleteRequest("zfy-test");
//封装集合
String[] arr = {"SPmjpYIBQ7K39xWU2iaZ","SfmjpYIBQ7K39xWU2iaZ","SvmjpYIBQ7K39xWU2iaZ","S_mjpYIBQ7K39xWU2iaZ","TPmjpYIBQ7K39xWU2iaZ"};
Arrays.stream(arr).forEach(item->{
//将要删除id封装到删除对象中
deleteRequest.id(item);
try{
//调用删除方法
DeleteResponse delete = client.delete(deleteRequest, RequestOptions.DEFAULT);
//获取删除返回值----成功返回为true，失败则返回false
System.out.println(delete.getResult());
}catch (Exception e){
e.printStackTrace();
}
});
}
2.10 复杂查询
//搜索查询---GET /索引/_search
// {
// "query":{
// "":{}
// },
// "from":
// "size":
// "_source":["",""],
// "sort":{}
// }
//1. 搜索请求对象SearchRequest
//2. 构建一个条件对象SearchSourceBuilder
//3. 把条件对象放入搜索请求对象中
//4. 执行搜索功能
//复杂查询
@Test
void testSearchReq() throws Exception{
//创建复杂查询对象---------
SearchRequest searchRequest = new SearchRequest("zfy-test");
//创建一个条件对象用来封装各种条件
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
//创建一个对象来封装查询条件query
MatchQueryBuilder queryBuilder = new MatchQueryBuilder("name","李");
//使用条件对象来封装查询条件---条件
sourceBuilder.query(queryBuilder);
//指定查询的列------条件
String[] arr = {"name","address","age"};
String[] att = {};
sourceBuilder.fetchSource(arr,att); //指定查询列和不查询列
//分页查询---条件
sourceBuilder.from(0);
sourceBuilder.size(5);
//排序----条件
// SortOrder sortOrder = SortOrder.ASC;------定义排序方式
sourceBuilder.sort("age",SortOrder.DESC);
//创建一个高亮对象，封装高亮条件
HighlightBuilder highlightBuilder = new HighlightBuilder();
//指定高亮列----也可以用fields，全局定义高亮
highlightBuilder.field("name");
highlightBuilder.preTags("<font color='red'>");
highlightBuilder.postTags("</font>");
sourceBuilder.highlighter(highlightBuilder);
//将封装好的条件对象给searchRequest
searchRequest.source(sourceBuilder);
//将封装好所有条件的对象给查询方法
SearchResponse search = client.search(searchRequest, RequestOptions.DEFAULT);
//输出根据条件查出的总条数
System.out.println("命中条数/查询总数:"+search.getHits().getTotalHits().value);
//将查出的数据封住为一个数组
SearchHit[] hits = search.getHits().getHits();
//遍历数组
Arrays.stream(hits).forEach(item->{
//输出遍历对象
System.out.println(item.getSourceAsString());
});
Arrays.stream(hits).forEach(item->{
//遍历输出高亮的字段
System.out.println(item.getHighlightFields());
});
}3.IK分词器：中文分词器
3.1 什么是IK分词器
ElasticSearch 几种常用分词器如下：
分词∶即把一段中文或者别的划分成一个个的关键字，我们在搜索时候会把自己的信息进行分词，会把数据库中或者索引库中的数据进行分词，然后进行一个匹配操作，默认的中文分词是将每个字看成一个词，比如“我爱中国"会被分为"我""爱""中""国”，这显然是不符合要求的，所以我们需要安装中文分词器ik来解决这个问题。
IK提供了两个分词算法：ik_smart和ik_max_word，其中ik smart为最少切分，ik_max_word为最细粒度划分!
ik_max_word: 会将文本做最细粒度的拆分，比如会将"中华人民共和国国歌"拆分为"中华人民共和国,中华人民,中华,华人,人民共和国,人民,人,民,共和国,共和,和,国国,国歌"，会穷尽各种可能的组合；
ik_smart: 会做最粗粒度的拆分，比如会将"中华人民共和国国歌"拆分为"中华人民共和国,国歌"。
3.2 Ik分词器的下载安装
下载地址：GitHub - medcl/elasticsearch-analysis-ik: The IK Analysis plugin integrates Lucene IK analyzer into elasticsearch, support customized dictionary.
注意：IK分词器插件的版本要和ElasticSearch的版本一致
3.3 在索引中指定ik分词器
我们用分词器对 “万里顾一程” 进行分词：
3.3.1 使用 ik_smart 分词算法
3.3.2 使用 ik_max_word分词算法，进行细粒度的划分：
GET _analyze
{
"analyzer": "ik_max_word",
"text": "万里顾一程"
}
分词结果：
{
"tokens" : [
{
"token" : "万里",
"start_offset" : 0,
"end_offset" : 2,
"type" : "CN_WORD",
"position" : 0
},
{
"token" : "万",
"start_offset" : 0,
"end_offset" : 1,
"type" : "TYPE_CNUM",
"position" : 1
},
{
"token" : "里",
"start_offset" : 1,
"end_offset" : 2,
"type" : "COUNT",
"position" : 2
},
{
"token" : "顾",
"start_offset" : 2,
"end_offset" : 3,
"type" : "CN_CHAR",
"position" : 3
},
{
"token" : "一程",
"start_offset" : 3,
"end_offset" : 5,
"type" : "CN_WORD",
"position" : 4
},
{
"token" : "一",
"start_offset" : 3,
"end_offset" : 4,
"type" : "TYPE_CNUM",
"position" : 5
},
{
"token" : "程",
"start_offset" : 4,
"end_offset" : 5,
"type" : "CN_CHAR",
"position" : 6
}
]
}
使用上面两种分词算法后，发现 “万里顾一程”被分成了“万里”、“顾”、“一程”，这是因为在IK自带的字典中没有“顾一程”这个词，如果想得到“顾一程”这个词，怎么办呢？
此时就需要配置自定义字典--即自定义词组群，就是在IK分词器字典中加入我们自定义的字典，在词典中加入想要的词。
在ik分词器文件的config目录中新建自定义的字典文件，以.dic为后缀，并在文件中加入“顾一程”：
IK控制器自定义词典的详细步骤：
4.综合案例---爬取京东信息存入ES并在自己的页面展示这些数据
4.1后端业务
4.1.1 创建springboot项目
4.1.2 添加相关依赖
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.78</version>
</dependency>
<!-- 爬虫java包-->
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.11.3</version>
</dependency>4.1.3 封装爬取配置类
package com.wt.utils;
import com.wt.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 wt
* @Date 2022/8/17 10:40
* @PackageName:com.wt.utils
* @ClassName: HtmlParses
* @Description: TODO
* @Version 1.0
*/
public class HtmlParsesUtil {
//从京东爬虫----有可能从数据库中。
public static List<Product> parseJd(String keyword) throws Exception {
String path="https://search.jd.com/Search?keyword="+keyword;
//Document整个网页对象
Document document = Jsoup.parse(new URL(path), 30000);
Element j_goodsList = document.getElementById("J_goodsList");
Elements li = j_goodsList.getElementsByTag("li");
List<Product> list=new ArrayList<>();
for (Element element:li){
//爬取商品价格
String pprice = 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,pprice,img));
}
return list;
}
}
4.1.4 定义实体类
package com.wt.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* @Author wt
* @Date 2022/8/16 17:03
* @PackageName:com.wt.entity
* @ClassName: Product
* @Description: TODO
* @Version 1.0
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Product {
private String title;
private String price;
private String imgUrl;
}
4.1.5创建索引
PUT /jd-test
{
"mappings": {
"properties": {
"title":{
"type": "text",
"analyzer": "ik_max_word"
},
"price":{
"type": "keyword"
},
"imgUrl":{
"type": "keyword"
}
}
},
"settings": {
"index.analysis.analyzer.default.type":"ik_max_word"
}
}
4.1.6 创建controller接口
package com.wt.controller;
import com.wt.service.ProductService;
import com.wt.vo.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
/**
* @Author wt
* @Date 2022/8/17 10:43
* @PackageName:com.wt.controller
* @ClassName: ProductController
* @Description: TODO
* @Version 1.0
*/
@RestController
@RequestMapping("/product")
@CrossOrigin
public class ProductController {
@Autowired
private ProductService productService;
//爬取数据并添加进es
@GetMapping("/export/{keyword}")
public CommonResult export(@PathVariable String keyword) throws Exception{
System.out.println("==========="+keyword);
CommonResult result = productService.export(keyword);
return result;
}
@GetMapping("search/{currentPage}/{pageSize}/{keyword}")
public CommonResult search(@PathVariable String keyword,@PathVariable Integer currentPage, @PathVariable Integer pageSize ) throws Exception{
CommonResult result = productService.search(keyword,currentPage,pageSize);
System.out.println(result);
return result;
}
}
4.1.7 service层
package com.wt.service;
import com.alibaba.fastjson.JSON;
import com.wt.entity.Product;
import com.wt.utils.HtmlParsesUtil;
import com.wt.vo.CommonResult;
import org.apache.lucene.search.TotalHits;
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.QueryBuilder;
import org.elasticsearch.index.query.QueryBuilders;
import org.elasticsearch.index.query.TermQueryBuilder;
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.*;
/**
* @Author wt
* @Date 2022/8/17 10:44
* @PackageName:com.wt.service
* @ClassName: ProductService
* @Description: TODO
* @Version 1.0
*/
@Service
public class ProductService {
@Autowired
private RestHighLevelClient client;
//爬取数据并添加进es
public CommonResult export(String keyword) throws Exception {
//将爬取到的数据存储到集合中
List<Product> list = HtmlParsesUtil.parseJd(keyword);
System.out.println(list);
BulkRequest bulkRequest = new BulkRequest("jd-test");
// list.stream().forEach(item->{
// IndexRequest request = new IndexRequest();
// request.source(JSON.toJSONString(item), XContentType.JSON);
// bulkRequest.add(request);
// });
for (Product product:list){
IndexRequest indexRequest=new IndexRequest();
indexRequest.source(JSON.toJSONString(product), XContentType.JSON);
bulkRequest.add(indexRequest);
}
System.out.println(JSON.toJSONString(bulkRequest));
//批量添加文档
BulkResponse bulk = client.bulk(bulkRequest, RequestOptions.DEFAULT);
// BulkResponse bulk = client.bulk(bulkRequest, RequestOptions.DEFAULT);
System.out.println(bulk);
if (bulk.hasFailures()){
return new CommonResult(5000,"添加失败",null);
}
return new CommonResult(2000,"添加成功",bulk);
}
public CommonResult search(String keyword, Integer currentPage, Integer pageSize) throws Exception{
SearchRequest searchRequest = new SearchRequest("jd-test");
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
//传入查询内容
TermQueryBuilder title = QueryBuilders.termQuery("title", keyword);
sourceBuilder.query(title);
sourceBuilder.from((currentPage-1)*pageSize);
sourceBuilder.size(pageSize);
HighlightBuilder highlightBuilder = new HighlightBuilder();
highlightBuilder.field("title");
highlightBuilder.preTags("<font color='red'>");
highlightBuilder.postTags("</font>");
sourceBuilder.highlighter(highlightBuilder);
searchRequest.source(sourceBuilder);
SearchResponse search = client.search(searchRequest, RequestOptions.DEFAULT);
//System.out.println(search);
SearchHit[] hits = search.getHits().getHits();
List<Map<String,Object>> list = new ArrayList<>();
long totalHits = search.getHits().getTotalHits().value;
//总条数total
System.out.println(totalHits);
Arrays.stream(hits).forEach(item->{
Map<String, Object> sourceAsMap = item.getSourceAsMap();
Map<String, HighlightField> highlightFields = item.getHighlightFields();
HighlightField title1 = highlightFields.get("title");
Text[] fragments = title1.getFragments();
StringBuilder stringBuilder = new StringBuilder();
for (Text text:fragments){
stringBuilder.append(text);
}
sourceAsMap.put("title",stringBuilder);
list.add(sourceAsMap);
});
//将查出来的数据和总条数存储在map中
Map map = new HashMap();
map.put("list",list);
map.put("total",totalHits);
return new CommonResult(2000,"查询成功",map);
}
}
4.2 前端
4.2.1 前端布局
<template>
<div class="page">
<div id="app" class=" mallist tmall- page-not-market ">
<!-- 头部搜索 -->
<div id="header" class=" header-list-app">
<div class="headerLayout">
<div class="headerCon ">
<!-- Logo-->
<h1 id="mallLogo">
<img src="../assets/jdlogo.png" alt="">
</h1>
<div class="header-extra">
<!--搜索-->
<div id="mallSearch" class="mall-search">
<form name="searchTop" class="mallSearch-form clearfix">
<fieldset>
<legend>天猫搜索</legend>
<div class="mallSearch-input clearfix">
<div class="s-combobox" id="s-combobox-685">
<div class="s-combobox-input-wrap">
<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>老王说Java</a></li>
<li><a>老王说前端</a></li>
<li><a>老王说Linux</a></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>3</a></span>
</p>
</div>
</div>
</div>
</div>f
</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>
</template>
<script>
export default {
name: "jd",
data(){
return {
keyword: '', // 搜索的关键字
results:[], // 后端返回的结果
//当前页码
currentPage: 1,
pageSizes: [20, 30, 40, 60],
pageSize: 20,
total: 0,
}
},
methods:{
searchKey(){
var keyword = this.keyword;
this.$http.get('http://192.168.22.1:8080/product/search/'+this.currentPage+"/"+this.pageSize+"/"+keyword).then(response=>{
console.log(response.data.data);
this.total = response.data.data.total;
this.results=response.data.data.list;
})
},
//分页操作
handleSizeChange(val) {
console.log("每页"+ val+"条");
this.pageSize = val;
this.searchKey();
},
handleCurrentChange(val) {
console.log("当前页:"+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>4.2.2 main页面的配置
4.2.3 修改router下的index.js配置
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
11
1- 0
已为社区贡献3条内容
所有评论(0)