first commit

README.md

@@ -0,0 +1,950 @@
+# 01-SpringBoot-ES-Local
+
+> 目录: [https://github.com/dolyw/ProjectStudy](https://github.com/dolyw/ProjectStudy)
+
+#### 软件架构
+
+1. 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](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**使用起来更好用，更符合面向对象的感觉，两个都使用下吧
+
+#### 预览图示
+
+* 查询
+
+![查询](https://docs.dolyw.com/Project/Elasticsearch/image/20190815001.gif)
+
+* 添加
+
+![添加](https://docs.dolyw.com/Project/Elasticsearch/image/20190815002.gif)
+
+* 修改
+
+![修改](https://docs.dolyw.com/Project/Elasticsearch/image/20190815003.gif)
+
+* 删除
+
+![删除](https://docs.dolyw.com/Project/Elasticsearch/image/20190815004.gif)
+
+#### 配置代码
+
+创建一个`SpringBoot 2.1.3`的`Maven`项目，这块不再详细描述，添加如下`REST Client`依赖
+
+```xml
+<elasticsearch.version>7.2.0</elasticsearch.version>
+
+<!-- Java Low Level REST Client -->
+<dependency>
+    <groupId>org.elasticsearch.client</groupId>
+    <artifactId>elasticsearch-rest-client</artifactId>
+    <version>${elasticsearch.version}</version>
+</dependency>
+
+<!-- Java High Level REST Client -->
+<dependency>
+    <groupId>org.elasticsearch.client</groupId>
+    <artifactId>elasticsearch-rest-high-level-client</artifactId>
+    <version>${elasticsearch.version}</version>
+</dependency>
+```
+
+* 配置文件
+
+```yml
+server:
+    port: 8080
+
+spring:
+    thymeleaf:
+        # 开发时关闭缓存不然没法看到实时页面
+        cache: false
+        # 启用不严格检查
+        mode: LEGACYHTML5
+
+# Elasticsearch配置
+elasticsearch:
+    hostname: 127.0.0.1
+    port: 9500
+```
+
+```java
+@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[i@dolyw.com]
+     * @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[i@dolyw.com]
+     * @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")));
+    }
+
+}
+```
+
+* 这样就配置完成了
+
+#### Controller入口
+
+* LowLevelRestController
+
+```java
+@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<java.lang.String>
+     * @throws IOException
+     * @author wliduo[i@dolyw.com]
+     * @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<java.lang.String>
+     * @author wliduo[i@dolyw.com]
+     * @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[i@dolyw.com]
+     * @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<java.lang.String>
+     * @author wliduo[i@dolyw.com]
+     * @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<java.lang.String>
+     * @throws IOException
+     * @author wliduo[i@dolyw.com]
+     * @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<java.lang.String>
+     * @throws IOException
+     * @author wliduo[i@dolyw.com]
+     * @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<java.lang.String>
+     * @throws IOException
+     * @author wliduo[i@dolyw.com]
+     * @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<java.lang.String>
+     * @throws IOException
+     * @author wliduo[i@dolyw.com]
+     * @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
+
+```java
+@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[i@dolyw.com]
+     * @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[i@dolyw.com]
+     * @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[i@dolyw.com]
+     * @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[i@dolyw.com]
+     * @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[i@dolyw.com]
+     * @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[i@dolyw.com]
+     * @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
+<!DOCTYPE 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>
+    <!-- 引入Vue，Element UI，Axios，Moment -->
+    <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
+<!DOCTYPE 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的CURD</span>
+		</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="selection" align="center" width="55"></el-table-column>-->
+			<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 prop="createTime" label="创建时间" align="center" min-width="100" show-overflow-tooltip>
+				<template slot-scope="scope">
+					{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+				</template>
+			</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">
+    /*<![CDATA[*/
+    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](http://localhost:8080)即可
+
+#### 搭建参考
+
+1. 感谢MaxZing的在SpringBoot整合Elasticsearch的Java Rest Client:[https://www.jianshu.com/p/0b4f5e41405e](https://www.jianshu.com/p/0b4f5e41405e)
+2. 感谢jacksonary的SpringBoot整合ES的三种方式（API、REST Client、Data-ES）:[https://blog.csdn.net/jacksonary/article/details/82729556](https://blog.csdn.net/jacksonary/article/details/82729556)
+3. 感谢青青天空树的springboot整合elasticsearch7.2(基于官方high level client):[https://cloud.tencent.com/developer/article/1478267](https://cloud.tencent.com/developer/article/1478267)
+4. 感谢zhyingke的elasticsearch7 基本语法(基于官方high level client):[https://blog.csdn.net/z457181562/article/details/93470152](https://blog.csdn.net/z457181562/article/details/93470152)
+5. 感谢wangzhen3798的ElasticSearch中如何进行排序:[https://blog.csdn.net/wangzhen3798/article/details/83582474](https://blog.csdn.net/wangzhen3798/article/details/83582474)
+6. 感谢WeirdLang的ElasticSearch RestHighLevelClient 通用操作:[https://www.cnblogs.com/WeidLang/p/10245659.html](https://www.cnblogs.com/WeidLang/p/10245659.html)