[Elasticsearch](四)SpringBoot整合Elasticsearch的方式(TransportClient、Data-ES、Elasticsearch SQL、REST Client
目录: https://github.com/dolyw/ProjectStudy/tree/master/Elasticsearch
项目地址
- Github：https://github.com/dolyw/ProjectStudy/tree/master/Elasticsearch/01-SpringBoot-ES-Local
- Gitee(码云)：https://gitee.com/dolyw/ProjectStudy/tree/master/Elasticsearch/01-SpringBoot-ES-Local
软件架构
- SpringBoot + REST Client
项目介绍
SpringBoot整合ES的方式(TransportClient、Data-ES、Elasticsearch SQL、REST Client)
- TransportClient
TransportClient即将弃用，所以这种方式不考虑
- Data-ES
Spring提供的封装的方式，好像底层也是基于TransportClient，Elasticsearch7.0后的版本不怎么支持，SpringBoot的Spring Boot Data Elasticsearch Starter最高版本2.1.7.RELEASE下载的是Spring Data Elasticsearch的3.1.5版本对应的是Elasticsearch 6.4.3版本，Spring Data Elasticsearch最新版3.1.10对应的还是Elasticsearch 6.4.3版本，我安装的是最新的Elasticsearch 7.2.0版本所以也没办法使用
- Elasticsearch SQL
将Elasticsearch的Query DSL用SQL转换查询，早期有一个第三方的插件Elasticsearch-SQL，后来随着官方也开始做这方面，这个插件好像就没怎么更新了，有兴趣的可以查看：https://www.cnblogs.com/jajian/p/10053504.html
- REST Client
官方推荐使用，所以我们采用这个方式，这个分为两个Low Level REST Client和High Level REST Client，Low Level REST Client是早期出的API比较简陋了，还需要自己去拼写Query DSL，High Level REST Client使用起来更好用，更符合面向对象的感觉，两个都使用下吧
预览图示
-
查询
SpringBoot整合Elasticsearch的方式(TransportClient、Data-ES、Elasticsearch SQL、REST Client_第1张图片](http://img.e-com-net.com/image/info8/cf34cafdf056450b85c33dcf56d0bdad.gif)
-
添加
SpringBoot整合Elasticsearch的方式(TransportClient、Data-ES、Elasticsearch SQL、REST Client_第2张图片](http://img.e-com-net.com/image/info8/383e0edec88d4539a76e114047a99dec.gif)
-
修改
SpringBoot整合Elasticsearch的方式(TransportClient、Data-ES、Elasticsearch SQL、REST Client_第3张图片](http://img.e-com-net.com/image/info8/db5088347bf2460ebb9f08fbd195f493.gif)
-
删除
SpringBoot整合Elasticsearch的方式(TransportClient、Data-ES、Elasticsearch SQL、REST Client_第4张图片](http://img.e-com-net.com/image/info8/5a28a0cca65b4688a56db7c8cc614086.gif)
基础架子搭建
创建一个SpringBoot 2.1.3的Maven项目，这块不再详细描述，添加如下REST Client依赖
<elasticsearch.version>7.2.0elasticsearch.version>
<dependency>
<groupId>org.elasticsearch.clientgroupId>
<artifactId>elasticsearch-rest-clientartifactId>
<version>${elasticsearch.version}version>
dependency>
<dependency>
<groupId>org.elasticsearch.clientgroupId>
<artifactId>elasticsearch-rest-high-level-clientartifactId>
<version>${elasticsearch.version}version>
dependency>
- 配置文件
server:
port: 8080
spring:
thymeleaf:
# 开发时关闭缓存不然没法看到实时页面
cache: false
# 启用不严格检查
mode: LEGACYHTML5
# Elasticsearch配置
elasticsearch:
hostname: 127.0.0.1
port: 9500
@Configuration
public class RestClientConfig {
@Value("${elasticsearch.hostname}")
private String hostname;
@Value("${elasticsearch.port}")
private int port;
/**
* LowLevelRestConfig
*
* @param
* @return org.elasticsearch.client.RestClient
* @author wliduo[[email protected]]
* @date 2019/8/12 18:56
*/
@Bean
public RestClient restClient() {
// 如果有多个从节点可以持续在内部new多个HttpHost，参数1是IP，参数2是端口，参数3是通信协议
RestClientBuilder clientBuilder = RestClient.builder(new HttpHost(hostname, port, "http"));
// 设置Header编码
Header[] defaultHeaders = {new BasicHeader("content-type", "application/json")};
clientBuilder.setDefaultHeaders(defaultHeaders);
// 添加其他配置，这些配置都是可选的，详情配置可看https://blog.csdn.net/jacksonary/article/details/82729556
return clientBuilder.build();
}
/**
* HighLevelRestConfig
*
* @param
* @return org.elasticsearch.client.RestClient
* @author wliduo[[email protected]]
* @date 2019/8/12 18:56
*/
@Bean
public RestHighLevelClient restHighLevelClient() {
// 如果有多个从节点可以持续在内部new多个HttpHost，参数1是IP，参数2是端口，参数3是通信协议
return new RestHighLevelClient(RestClient.builder(new HttpHost(hostname, port, "http")));
}
}
这样就配置完成了
开始使用
- LowLevelRestController
@RestController
@RequestMapping("/low")
public class LowLevelRestController {
/**
* logger
*/
private static final Logger logger = LoggerFactory.getLogger(LowLevelRestController.class);
/**
* PATTERN
*/
private static Pattern PATTERN = Pattern.compile("\\s*|\t|\r|\n");
@Autowired
private RestClient restClient;
/**
* 同步执行HTTP请求
*
* @param
* @return org.springframework.http.ResponseEntity
* @throws IOException
* @author wliduo[[email protected]]
* @date 2019/8/8 17:15
*/
@GetMapping("/es")
public ResponseBean getEsInfo() throws IOException {
Request request = new Request("GET", "/");
// performRequest是同步的，将阻塞调用线程并在请求成功时返回Response，如果失败则抛出异常
Response response = restClient.performRequest(request);
// 获取请求行
RequestLine requestLine = response.getRequestLine();
// 获取host
HttpHost host = response.getHost();
// 获取状态码
int statusCode = response.getStatusLine().getStatusCode();
// 获取响应头
Header[] headers = response.getHeaders();
// 获取响应体
String responseBody = EntityUtils.toString(response.getEntity());
return new ResponseBean(HttpStatus.OK.value(), "查询成功", JSON.parseObject(responseBody));
}
/**
* 异步执行HTTP请求
*
* @param
* @return org.springframework.http.ResponseEntity
* @author wliduo[[email protected]]
* @date 2019/8/8 17:15
*/
@GetMapping("/es/async")
public ResponseBean asynchronous() {
Request request = new Request("GET", "/");
restClient.performRequestAsync(request, new ResponseListener() {
@Override
public void onSuccess(Response response) {
logger.info("异步执行HTTP请求并成功");
}
@Override
public void onFailure(Exception exception) {
logger.info("异步执行HTTP请求并失败");
}
});
return new ResponseBean(HttpStatus.OK.value(), "异步请求中", null);
}
/**
* 分词分页查询列表
*
* @param page
* @param rows
* @param keyword
* @return com.example.common.ResponseBean
* @author wliduo[[email protected]]
* @date 2019/8/9 15:32
*/
@GetMapping("/book")
public ResponseBean getBookList(@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer rows,
String keyword) {
Request request = new Request("POST", new StringBuilder("/_search").toString());
// 添加Json返回优化
request.addParameter("pretty", "true");
// 拼接查询Json
IndexRequest indexRequest = new IndexRequest();
XContentBuilder builder = null;
Response response = null;
String responseBody = null;
try {
builder = JsonXContent.contentBuilder()
.startObject()
.startObject("query")
.startObject("multi_match")
.field("query", keyword)
.array("fields", new String[]{"name", "desc"})
.endObject()
.endObject()
.startObject("sort")
.startObject("id")
.field("order", "desc")
.endObject()
.endObject()
.endObject();
indexRequest.source(builder);
// 设置请求体并指定ContentType，如果不指定会乱码
request.setEntity(new NStringEntity(indexRequest.source().utf8ToString(), ContentType.APPLICATION_JSON));
// 执行HTTP请求
response = restClient.performRequest(request);
responseBody = EntityUtils.toString(response.getEntity());
} catch (IOException e) {
return new ResponseBean(HttpStatus.NOT_FOUND.value(), "can not found the book by your id", null);
}
return new ResponseBean(HttpStatus.OK.value(), "查询成功", JSON.parseObject(responseBody));
}
/**
* 根据Id获取ES对象
*
* @param id
* @return org.springframework.http.ResponseEntity
* @author wliduo[[email protected]]
* @date 2019/8/8 17:48
*/
@GetMapping("/book/{id}")
public ResponseBean getBookById(@PathVariable("id") String id) {
Request request = new Request("GET", new StringBuilder("/book/book/")
.append(id).toString());
// 添加Json返回优化
request.addParameter("pretty", "true");
Response response = null;
String responseBody = null;
try {
// 执行HTTP请求
response = restClient.performRequest(request);
responseBody = EntityUtils.toString(response.getEntity());
} catch (IOException e) {
return new ResponseBean(HttpStatus.NOT_FOUND.value(), "can not found the book by your id", null);
}
return new ResponseBean(HttpStatus.OK.value(), "查询成功", JSON.parseObject(responseBody));
}
/**
* 添加ES对象, Book的ID就是ES中存储的Document的ID，ES的POST和PUT可以看下面这个文章
* https://blog.csdn.net/z457181562/article/details/93470152
*
* @param bookDto
* @return org.springframework.http.ResponseEntity
* @throws IOException
* @author wliduo[[email protected]]
* @date 2019/8/8 17:46
*/
@PostMapping("/book")
public ResponseBean add(@RequestBody BookDto bookDto) throws IOException {
// Endpoint直接指定为Index/Type的形式
/*Request request = new Request("POST", new StringBuilder("/book/book/").toString());*/
// 防重复新增数据
bookDto.setId(System.currentTimeMillis());
Request request = new Request("PUT", new StringBuilder("/book/book/")
.append(bookDto.getId()).append("/_create").toString());
// 设置其他一些参数比如美化Json
request.addParameter("pretty", "true");
// 设置请求体并指定ContentType，如果不指定会乱码
request.setEntity(new NStringEntity(JSONObject.toJSONString(bookDto), ContentType.APPLICATION_JSON));
// 发送HTTP请求
Response response = restClient.performRequest(request);
// 获取响应体
String responseBody = EntityUtils.toString(response.getEntity());
return new ResponseBean(HttpStatus.OK.value(), "添加成功", JSON.parseObject(responseBody));
}
/**
* 根据Id更新Book，ES的POST和PUT可以看下面这个文章
*
* https://blog.csdn.net/z457181562/article/details/93470152
* @param bookDto
* @return org.springframework.http.ResponseEntity
* @throws IOException
* @author wliduo[[email protected]]
* @date 2019/8/9 10:04
*/
@PutMapping("/book")
public ResponseBean update(@RequestBody BookDto bookDto) throws IOException {
// 构造HTTP请求
/*Request request = new Request("POST", new StringBuilder("/book/book/")
.append(bookDto.getId()).append("/_update").toString());*/
Request request = new Request("PUT", new StringBuilder("/book/book/")
.append(bookDto.getId()).toString());
// 设置其他一些参数比如美化Json
request.addParameter("pretty", "true");
/*// 将数据丢进去，这里一定要外包一层'doc'，否则内部不能识别
JSONObject jsonObject = new JSONObject();
jsonObject.put("doc", new JSONObject(bookDto));*/
// 设置请求体并指定ContentType，如果不指定会乱码
request.setEntity(new NStringEntity(JSONObject.toJSONString(bookDto), ContentType.APPLICATION_JSON));
// 执行HTTP请求
Response response = restClient.performRequest(request);
// 获取返回的内容
String responseBody = EntityUtils.toString(response.getEntity());
return new ResponseBean(HttpStatus.OK.value(), "更新成功", JSON.parseObject(responseBody));
}
/**
* 使用脚本更新Name
*
* @param id
* @param bookDto
* @return org.springframework.http.ResponseEntity
* @throws IOException
* @author wliduo[[email protected]]
* @date 2019/8/9 11:37
*/
@PutMapping("/book/{id}")
public ResponseEntity<String> update2(@PathVariable("id") String id, @RequestBody BookDto bookDto) throws IOException {
// 构造HTTP请求
Request request = new Request("POST", new StringBuilder("/book/book/")
.append(id).append("/_update").toString());
// 设置其他一些参数比如美化Json
request.addParameter("pretty", "true");
JSONObject jsonObject = new JSONObject();
// 创建脚本语言，如果是字符变量，必须加单引号
StringBuilder op1 = new StringBuilder("ctx._source.name=").append("'" + bookDto.getName() + "'");
jsonObject.put("script", op1);
request.setEntity(new NStringEntity(jsonObject.toString(), ContentType.APPLICATION_JSON));
// 执行HTTP请求
Response response = restClient.performRequest(request);
// 获取返回的内容
String responseBody = EntityUtils.toString(response.getEntity());
return new ResponseEntity<>(responseBody, HttpStatus.OK);
}
/**
* 根据ID删除
*
* @param id
* @return org.springframework.http.ResponseEntity
* @throws IOException
* @author wliduo[[email protected]]
* @date 2019/8/8 17:54
*/
@DeleteMapping("/book/{id}")
public ResponseBean deleteById(@PathVariable("id") String id) throws IOException {
Request request = new Request("DELETE", new StringBuilder("/book/book/")
.append(id).toString());
request.addParameter("pretty", "true");
// 执行HTTP请求
Response response = restClient.performRequest(request);
// 获取结果
String responseBody = EntityUtils.toString(response.getEntity());
return new ResponseBean(HttpStatus.OK.value(), "删除成功", JSON.parseObject(responseBody));
}
}
- HighLevelRestController
@RestController
@RequestMapping("/high")
public class HighLevelRestController {
/**
* logger
*/
private static final Logger logger = LoggerFactory.getLogger(HighLevelRestController.class);
@Autowired
private RestHighLevelClient restHighLevelClient;
/**
* 获取ES信息
*
* @param
* @return com.example.common.ResponseBean
* @throws IOException
* @author wliduo[[email protected]]
* @date 2019/8/14 17:11
*/
@GetMapping("/es")
public ResponseBean getEsInfo() throws IOException {
SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
// SearchRequest
SearchRequest searchRequest = new SearchRequest();
searchRequest.source(searchSourceBuilder);
// 查询ES
SearchResponse searchResponse = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);
return new ResponseBean(HttpStatus.OK.value(), "查询成功", searchResponse);
}
/**
* 列表查询
*
* @param page
* @param rows
* @param keyword
* @return com.example.common.ResponseBean
* @throws
* @author wliduo[[email protected]]
* @date 2019/8/15 16:01
*/
@GetMapping("/book")
public ResponseBean list(@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer rows,
String keyword) throws IOException {
SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
// 分页采用简单的from + size分页，适用数据量小的，了解更多分页方式可自行查阅资料
searchSourceBuilder.from((page - 1) * rows);
searchSourceBuilder.size(rows);
// 查询条件，只有查询关键字不为空才带查询条件
if (StringUtils.isNoneBlank(keyword)) {
QueryBuilder queryBuilder = QueryBuilders.multiMatchQuery(keyword, "name", "desc");
searchSourceBuilder.query(queryBuilder);
}
// 排序，根据ID倒叙
searchSourceBuilder.sort("id", SortOrder.DESC);
// SearchRequest
SearchRequest searchRequest = new SearchRequest();
searchRequest.source(searchSourceBuilder);
// 查询ES
SearchResponse searchResponse = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);
SearchHits hits = searchResponse.getHits();
// 获取总数
Long total = hits.getTotalHits().value;
// 遍历封装列表对象
List<BookDto> bookDtoList = new ArrayList<>();
SearchHit[] searchHits = hits.getHits();
for (SearchHit searchHit : searchHits) {
bookDtoList.add(JSON.parseObject(searchHit.getSourceAsString(), BookDto.class));
}
// 封装Map参数返回
Map<String, Object> result = new HashMap<String, Object>(16);
result.put("count", total);
result.put("data", bookDtoList);
return new ResponseBean(HttpStatus.OK.value(), "查询成功", result);
}
/**
* 根据ID查询
*
* @param id
* @return com.example.common.ResponseBean
* @throws IOException
* @author wliduo[[email protected]]
* @date 2019/8/15 14:10
*/
@GetMapping("/book/{id}")
public ResponseBean getById(@PathVariable("id") String id) throws IOException {
// GetRequest
GetRequest getRequest = new GetRequest(Constant.INDEX, id);
// 查询ES
GetResponse getResponse = restHighLevelClient.get(getRequest, RequestOptions.DEFAULT);
BookDto bookDto = JSON.parseObject(getResponse.getSourceAsString(), BookDto.class);
return new ResponseBean(HttpStatus.OK.value(), "查询成功", bookDto);
}
/**
* 添加文档
*
* @param bookDto
* @return com.example.common.ResponseBean
* @throws
* @author wliduo[[email protected]]
* @date 2019/8/15 16:01
*/
@PostMapping("/book")
public ResponseBean add(@RequestBody BookDto bookDto) throws IOException {
// IndexRequest
IndexRequest indexRequest = new IndexRequest(Constant.INDEX);
Long id = System.currentTimeMillis();
bookDto.setId(id);
String source = JSON.toJSONString(bookDto);
indexRequest.id(id.toString()).source(source, XContentType.JSON);
// 操作ES
IndexResponse indexResponse = restHighLevelClient.index(indexRequest, RequestOptions.DEFAULT);
return new ResponseBean(HttpStatus.OK.value(), "添加成功", indexResponse);
}
/**
* 修改文档
*
* @param bookDto
* @return com.example.common.ResponseBean
* @throws
* @author wliduo[[email protected]]
* @date 2019/8/15 16:02
*/
@PutMapping("/book")
public ResponseBean update(@RequestBody BookDto bookDto) throws IOException {
// UpdateRequest
UpdateRequest updateRequest = new UpdateRequest(Constant.INDEX, bookDto.getId().toString());
updateRequest.doc(JSON.toJSONString(bookDto), XContentType.JSON);
// 操作ES
UpdateResponse updateResponse = restHighLevelClient.update(updateRequest, RequestOptions.DEFAULT);
return new ResponseBean(HttpStatus.OK.value(), "修改成功", updateResponse);
}
/**
* 删除文档
*
* @param id
* @return com.example.common.ResponseBean
* @throws
* @author wliduo[[email protected]]
* @date 2019/8/15 16:02
*/
@DeleteMapping("/book/{id}")
public ResponseBean deleteById(@PathVariable("id") String id) throws IOException {
// DeleteRequest
DeleteRequest deleteRequest = new DeleteRequest(Constant.INDEX, id);
// 操作ES
DeleteResponse deleteResponse = restHighLevelClient.delete(deleteRequest, RequestOptions.DEFAULT);
return new ResponseBean(HttpStatus.OK.value(), "删除成功", deleteResponse);
}
}
LowLevelRestController和HighLevelRestController一对比就能看出来了，HighLevelRestController使用起来更舒服
接口都实现了，实际请查看代码，最后用Vue + ElementUI写了一个前端界面
- 界面实现网页common.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headVue(title)">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="${title}">加载中title>
<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
<link rel="stylesheet" th:href="@{element-ui/index.css}">
<style>
/* elementUI的确认弹出框时页面右侧缩小5px的解决方法 */
body {
padding-right:0 !important;
}
/* elementUI的Table表头错位的解决方法 */
body .el-table th.gutter {
display: table-cell!important;
}
body .el-table colgroup.gutter {
display: table-cell!important;
}
label {
font-weight: 700;
}
style>
<script th:src="@{js/vue.min.js}">script>
<script th:src="@{element-ui/index.js}">script>
<script th:src="@{js/axios.min.js}">script>
<script th:src="@{js/moment.min.js}">script>
head>
html>
- 界面实现网页index.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/common :: headVue('随心')">head>
<style>
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
/* 谷歌浏览器滚动条美化 */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border-radius: 999px;
border: 5px solid transparent;
}
::-webkit-scrollbar-track {
box-shadow: 1px 1px 5px rgba(143, 143, 143, 0.2) inset;
}
::-webkit-scrollbar-thumb {
min-height: 20px;
background-clip: content-box;
box-shadow: 0 0 0 5px rgba(143, 143, 143, 0.466) inset;
}
::-webkit-scrollbar-corner {
background: transparent;
}
style>
<body>
<div id="app">
<el-card>
<div slot="header" class="clearfix">
<span>Elasticsearch的CURDspan>
div>
<el-form :inline="true" :model="searchForm" label-width="90px" size="small">
<el-form-item>
<el-input placeholder="请输入查询关键字" @keyup.enter.native="list(searchForm)" v-model="searchForm.keyword" clearable>el-input>
<el-input v-show="false" placeholder="请输入查询关键字" @keyup.enter.native="list(searchForm)" v-model="searchForm.keyword" clearable>el-input>
el-form-item>
<el-form-item>
<el-button icon="el-icon-search" plain @click="list(searchForm)">查询el-button>
el-form-item>
<el-form-item>
<el-button type="info" plain icon="el-icon-plus" @click="preAdd" :loading="genLoading">添加el-button>
el-form-item>
el-form>
<el-table v-loading="tableLoading" :data="tableData" @selection-change="handleSelectionChange" border>
<el-table-column type="index" align="center" min-width="60">el-table-column>
<el-table-column prop="id" label="ID" align="center" min-width="100" show-overflow-tooltip>el-table-column>
<el-table-column prop="name" label="名称" align="center" min-width="100" show-overflow-tooltip>el-table-column>
<el-table-column prop="desc" label="描述" align="center" min-width="80" show-overflow-tooltip>el-table-column>
<el-table-column label="操作" align="center" fixed="right" min-width="60">
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-edit" type="primary" plain @click="preById(scope.row)" :loading="genLoading">修改el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" plain @click="delById(scope.row)" :loading="genLoading">删除el-button>
template>
el-table-column>
el-table>
<div align="right" style="margin-top: 20px;">
<el-pagination
:current-page="searchForm.page"
:page-sizes="[1, 8, 16, 32, 48]"
:page-size="searchForm.rows"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
div>
el-card>
<el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
<el-form :model="bookDto" label-width="90px" style="width: 520px;">
<el-form-item label="ID">
<el-input v-model="bookDto.id" disabled="true" autocomplete="off" placeholder="ID自动生成">el-input>
el-form-item>
<el-form-item label="名称">
<el-input v-model="bookDto.name" autocomplete="off">el-input>
el-form-item>
<el-form-item label="描述">
<el-input v-model="bookDto.desc" autocomplete="off">el-input>
el-form-item>
el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="genLoading" @click="dialogVisible = false">取 消el-button>
<el-button type="primary" :loading="genLoading" @click="deal">确 定el-button>
div>
el-dialog>
div>
<script type="text/javascript" th:inline="javascript">
/*
var myApp = new Vue({
el: '#app',
data: {
// 表格加载条控制
tableLoading: false,
// 按钮加载条控制
genLoading: false,
// Table数据
tableData: [],
// Table数据总条数
totalCount: 0,
// Table选择的数据
multipleSelection: [],
// 查询条件
searchForm: {
// 当前页
page: 1,
// 每页条数
rows: 8,
// 查询关键字
keyword: ''
},
// 表详细弹出框标题
title: '添加',
// 表详细弹出框是否显示
dialogVisible: false,
// 操作对象
bookDto: {
// ID
id: 1,
// 名称
name: '',
// 描述
desc: ''
}
},
// 启动时就执行
mounted: function() {
// ES信息查询
// this.queryES();
// 列表查询
this.list(this.searchForm);
},
methods: {
// 查询ES信息
queryES: function() {
axios.get('/high/es').then(res => {
console.log(res);
}).catch(err => {
console.log(err);
this.$message.error('查询失败');
});
},
// 每页条数改变
handleSizeChange: function(rows) {
this.searchForm.rows = rows;
// console.log(this.searchForm.rows);
// 刷新列表
this.list(this.searchForm);
},
// 当前页数改变
handleCurrentChange: function(page) {
this.searchForm.page = page;
// 刷新列表
this.list(this.searchForm);
},
// 选择数据改变触发事件
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 列表查询
list: function(searchForm) {
// 加载显示
this.tableLoading = true;
axios.get('/high/book', {
params: {
'page': this.searchForm.page,
'rows': this.searchForm.rows,
'keyword': this.searchForm.keyword
}
}).then(res => {
// console.log(res);
var data = res.data.data;
this.tableData = data.data;
this.totalCount = data.count;
}).catch(err => {
console.log(err);
this.$message.error('查询失败');
}).then(() => {
this.tableLoading = false;
});
},
// 添加
preAdd: function() {
this.genLoading = true;
// this.$nextTick Dom渲染完执行
this.$nextTick(() => {
this.title = "添加";
this.bookDto = {};
this.dialogVisible = true;
this.genLoading = false;
});
},
// 预修改
preById: function(row) {
this.genLoading = true;
this.title = "修改";
this.dialogVisible = true;
axios.get('/high/book/' + row.id).then(res => {
// console.log(res);
this.bookDto = res.data.data;
}).catch(err => {
console.log(err);
this.$message.error('查询失败');
}).then(() => {
this.genLoading = false;
});
},
// 添加或者修改
deal: function() {
this.genLoading = true;
if (this.bookDto.id) {
// ID存在修改
axios.put('/high/book', this.bookDto).then(res => {
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
type: 'success'
});
this.dialogVisible = false;
// 列表查询必须慢点，ES没有事务性，查询太快，数据还没更新
this.tableLoading = true;
setTimeout(() => {this.list(this.searchForm);}, 1000);
} else {
this.$message.error('修改失败');
}
}).catch(err => {
console.log(err);
this.$message.error('修改失败');
}).then(() => {
this.genLoading = false;
});
} else {
// ID不存在添加
axios.post('/high/book', this.bookDto).then(res => {
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
type: 'success'
});
this.dialogVisible = false;
// 列表查询必须慢点，ES没有事务性，查询太快，数据还没更新
this.tableLoading = true;
setTimeout(() => {this.list(this.searchForm);}, 1000);
} else {
this.$message.error('添加失败');
}
}).catch(err => {
console.log(err);
this.$message.error('添加失败');
}).then(() => {
this.genLoading = false;
});
}
},
// 删除
delById: function (row) {
this.genLoading = true;
this.$confirm('是否确定删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.delete('/high/book/' + row.id).then(res => {
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
type: 'success'
});
// 列表查询必须慢点，ES没有事务性，查询太快，数据还没更新
this.tableLoading = true;
setTimeout(() => {this.list(this.searchForm);}, 1000);
} else {
this.$message.error('删除失败');
}
}).catch(err => {
console.log(err);
this.$message.error('删除失败');
}).then(() => {
this.genLoading = false;
});
}).catch(() => {
this.genLoading = false;
});
}
}
});
/*]]>*/
script>
body>
html>
安装教程
运行项目src\main\java\com\example\Application.java即可，访问http://localhost:8080即可