热门标签
热门文章
- 1Redis 主从复制
- 2在Mac eclipse上配置maven、创建maven项目_macbook使用eclipse创建maven
- 3MySQL - 常用排序规则utf8mb4_general_ci、utf8mb4_unicode_ci、utf8mb4_bin、utf8mb4_0900_ai_ci和存储字符集 utf8 和 utf8_utf8mb4_general_ci utf8mb4_bin
- 4如何使用sql查询数据库表结构的设计_sql文件怎么看数据库设计
- 5前端-全屏_前端全屏
- 6【el-table嵌套父子勾选 并实现数据携带勾选的到另一张表中 】_el-table 多选值 传给另一个table bug
- 7tensorflow的cuba错误_i tensorflow/stream_executor/cuda/cuda_driver.cc:7
- 8【elasticsearch实战】从零开始设计全站搜索引擎
- 9新模型Claude 3实测！各项能力超强，确实比GPT-4好用_claude3试用
- 10CVPR2024｜AIGC(图像生成，视频生成等)相关论文汇总（附论文链接/开源代码/解析）【持续更新】_cvpr2024 绘本生成
当前位置: article > 正文
[Elasticsearch](四)SpringBoot整合Elasticsearch的方式(TransportClient、Data-ES、Elasticsearch SQL、REST Client_elasticsearch sql springdata
作者：weixin_40725706 | 2024-03-06 18:02:03
赞
踩
elasticsearch sql springdata
目录: 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 2.1.3的Maven项目，这块不再详细描述，添加如下REST Client依赖
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 配置文件
server:
port: 8080
spring:
thymeleaf:
# 开发时关闭缓存不然没法看到实时页面
cache: false
# 启用不严格检查
mode: LEGACYHTML5
# Elasticsearch配置
elasticsearch:
hostname: 127.0.0.1
port: 9500
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
@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"))); } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
这样就配置完成了
开始使用
- 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<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)); } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 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[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); } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
LowLevelRestController和HighLevelRestController一对比就能看出来了，HighLevelRestController使用起来更舒服
接口都实现了，实际请查看代码，最后用Vue + ElementUI写了一个前端界面
- 界面实现网页common.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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 界面实现网页index.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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
安装教程
运行项目src\main\java\com\example\Application.java即可，访问http://localhost:8080即可
- 1
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/200642
推荐阅读
相关标签
