新增、修改、删除功能和页面

src/main/java/ink/wgink/gateway/dao/route/IRouteDao.java

@@ -1,6 +1,7 @@
 package ink.wgink.gateway.dao.route;
 
 import ink.wgink.gateway.pojo.route.Route;
+import org.springframework.core.annotation.Order;
 import org.springframework.data.mongodb.repository.Query;
 import org.springframework.data.mongodb.repository.ReactiveMongoRepository;
 import org.springframework.stereotype.Repository;
@@ -17,7 +18,7 @@ import reactor.core.publisher.Mono;
  * @Version: 1.0
  */
 @Repository
-public interface IRouteDao  extends ReactiveMongoRepository<Route, String> {
+public interface IRouteDao extends ReactiveMongoRepository<Route, String> {
 
     String COLLECTION_NAME = "sys_route";
 

src/main/java/ink/wgink/gateway/handler/route/RouteHandler.java

@@ -2,13 +2,18 @@ package ink.wgink.gateway.handler.route;
 
 import ink.wgink.gateway.dao.route.IRouteDao;
 import ink.wgink.gateway.handler.BaseHandler;
+import ink.wgink.gateway.pojo.result.SuccessResult;
 import ink.wgink.gateway.pojo.route.Route;
+import org.springframework.core.annotation.Order;
 import org.springframework.data.domain.Example;
 import org.springframework.data.domain.ExampleMatcher;
+import org.springframework.data.domain.Page;
 import org.springframework.http.MediaType;
 import org.springframework.stereotype.Component;
+import org.springframework.stereotype.Service;
 import org.springframework.web.reactive.function.server.ServerRequest;
 import org.springframework.web.reactive.function.server.ServerResponse;
+import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;
 
 import java.util.Arrays;
@@ -25,7 +30,8 @@ import java.util.Optional;
  * @Date: 2021/4/19 21:40
  * @Version: 1.0
  **/
-@Component
+@Service
+@Order
 public class RouteHandler extends BaseHandler {
 
     private IRouteDao routeDao;
@@ -45,7 +51,7 @@ public class RouteHandler extends BaseHandler {
         return routeMono.flatMap(route -> {
             setSave(route);
             return routeDao.save(route);
-        }).then(ServerResponse.ok().build());
+        }).then(ServerResponse.ok().contentType(MediaType.APPLICATION_JSON).body(Flux.just(new SuccessResult()), SuccessResult.class));
     }
 
     /**
@@ -59,7 +65,9 @@ public class RouteHandler extends BaseHandler {
         List<String> idList = Arrays.asList(ids.split(","));
         return routeDao.findAllById(idList).flatMap(
                 route -> routeDao.delete(route)
-        ).then(ServerResponse.ok().contentType(MediaType.APPLICATION_JSON).build());
+        ).then(ServerResponse.ok().headers(httpHeaders -> {
+            httpHeaders.setContentType(MediaType.APPLICATION_JSON_UTF8);
+        }).body(Mono.just(new SuccessResult()), SuccessResult.class));
     }
 
     /**
@@ -73,13 +81,13 @@ public class RouteHandler extends BaseHandler {
         Mono<Route> routeMono = serverRequest.bodyToMono(Route.class);
         return routeDao.findById(id).flatMap(
                 route -> routeMono.flatMap(r -> {
-                    route.setSystem(r.getSystem());
+                    route.setTitle(r.getTitle());
                     route.setSummary(r.getSummary());
                     route.setPath(r.getPath());
                     route.setUri(r.getUri());
                     setUpdate(route);
                     return routeDao.save(route);
-                }).then(ServerResponse.ok().contentType(MediaType.APPLICATION_JSON).build())
+                }).then(ServerResponse.ok().contentType(MediaType.APPLICATION_JSON).body(Flux.just(new SuccessResult()), SuccessResult.class))
         ).switchIfEmpty(ServerResponse.notFound().build());
     }
 
@@ -95,11 +103,11 @@ public class RouteHandler extends BaseHandler {
         Route route = new Route();
         Example example = Example.of(route);
         if (keywords.isPresent()) {
-            route.setSystem(keywords.get());
+            route.setTitle(keywords.get());
             route.setSummary(keywords.get());
 
             ExampleMatcher exampleMatcher = ExampleMatcher.matchingAny()
-                    .withMatcher("system", ExampleMatcher.GenericPropertyMatcher::contains)
+                    .withMatcher("title", ExampleMatcher.GenericPropertyMatcher::contains)
                     .withMatcher("summary", ExampleMatcher.GenericPropertyMatcher::contains)
                     .withIgnoreCase("id");
             example = Example.of(route, exampleMatcher);

src/main/java/ink/wgink/gateway/pojo/result/SuccessResult.java

@@ -1,5 +1,9 @@
 package ink.wgink.gateway.pojo.result;
 
+import lombok.Data;
+import lombok.ToString;
+import org.springframework.data.mongodb.core.mapping.Document;
+
 import java.io.Serializable;
 
 /**
@@ -9,14 +13,9 @@ import java.io.Serializable;
  * @Date: 2019/3/2 11:52 PM
  * @Version: 1.0
  **/
-public class SuccessResult implements Serializable {
+@Data
+@ToString
+@Document
+public class SuccessResult {
 
-    private static final long serialVersionUID = 2794583329290530150L;
-
-    @Override
-    public String toString() {
-        final StringBuilder sb = new StringBuilder("{");
-        sb.append('}');
-        return sb.toString();
-    }
 }

src/main/java/ink/wgink/gateway/pojo/route/Route.java

@@ -24,7 +24,7 @@ import java.io.Serializable;
 public class Route extends BasePOJO implements Serializable {
 
     private static final long serialVersionUID = -4892456861969101733L;
-    private String system;
+    private String title;
     private String summary;
     private String path;
     private String uri;

src/main/resources/static/wg/assets/layui-v2.6.4/layui/modules/restajax.js

@@ -110,12 +110,16 @@ layui.define(function(exports) {
             headers: headers,
             data: ajaxData,
             success: function (data, status, XMLHttpRequest) {
+                console.log('success')
+                console.log(XMLHttpRequest)
                 var responseCode = XMLHttpRequest.status;
                 successCallback(responseCode, data, args);
             },
             error: function (XMLHttpRequest) {
+                console.log('error')
+                console.log(XMLHttpRequest)
                 var responseCode = XMLHttpRequest.status;
-                var responseData = JSON.parse(XMLHttpRequest.responseText);
+                var responseData = JSON.parse(XMLHttpRequest.responseText ? XMLHttpRequest.responseText: "{}");
                 if (errorCallback != undefined && errorCallback != null && typeof(errorCallback) == 'function') {
                     errorCallback(responseCode, responseData);
                 }

src/main/resources/static/wg/route/index.html

@@ -4,6 +4,9 @@
     <base href="/wg/">
     <meta charset="UTF-8">
     <title>网关管理</title>
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <link rel="stylesheet" href="assets/layui-v2.6.4/layui/css/layui.css"/>
     <link rel="stylesheet" href="assets/layui-v2.6.4/layui/css/admin.css"/>
 </head>

src/main/resources/static/wg/route/route/list.html

@@ -3,6 +3,9 @@
 <head>
     <base href="/wg/">
     <meta charset="UTF-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <link rel="stylesheet" href="assets/layui-v2.6.4/layui/css/layui.css">
     <link rel="stylesheet" href="assets/layui-v2.6.4/layui/css/admin.css"/>
 </head>
@@ -12,13 +15,7 @@
         <div class="layui-inline">
             <input type="text" id="keywords" class="layui-input search-item" placeholder="输入关键字">
         </div>
-        <div class="layui-inline">
+        <button type="button" id="search" class="layui-btn">
-            <input type="text" id="startTime" class="layui-input search-item" placeholder="开始时间" readonly>
-        </div>
-        <div class="layui-inline">
-            <input type="text" id="endTime" class="layui-input search-item" placeholder="结束时间" readonly>
-        </div>
-        <button type="button" id="search" class="layui-btn layui-btn-sm">
             <i class="fa fa-lg fa-search"></i> 搜索
         </button>
     </div>
@@ -53,18 +50,21 @@
         var dataArray = [];
         var dataTable = null;
 
-        function initTable() {
+        function initTable(currentPage) {
             top.restAjax.get(top.restAjax.path(tableUrl, []), {
                 keywords: $('#keywords').val(),
-                startTime: $('#startTime').val(),
-                endTime: $('#endTime').val()
             }, null, function(code, data) {
                 dataArray = [];
                 for(var i = 0, item; item = data[i++];) {
                     dataArray.push(item);
                 }
                 if(dataTable) {
-                    table.reload('dataTable', {data: dataArray});
+                    table.reload('dataTable', {
+                        data: dataArray,
+                        page: {
+                            curr: currentPage ? currentPage : dataTable.config.page.curr
+                        }
+                    });
                     return;
                 }
                 dataTable = table.render({
@@ -78,7 +78,43 @@
                     cols: [[
                         {type: 'checkbox', fixed: 'left'},
                         {field: 'rowNum', width: 80, title: '序号', fixed: 'left', align: 'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
-                        {field: 'system', width: 200, title: '系统名称', align: 'center', sort: true,
+                        {field: 'title', width: 200, title: '名称', align: 'center', sort: true,
+                            templet: function (row) {
+                                var rowData = row[this.field];
+                                if (typeof (rowData) === 'undefined' || rowData == null || rowData == '') {
+                                    return '-';
+                                }
+                                return rowData;
+                            }
+                        },
+                        {field: 'summary', width: 200, title: '描述', align: 'center', sort: true,
+                            templet: function (row) {
+                                var rowData = row[this.field];
+                                if (typeof (rowData) === 'undefined' || rowData == null || rowData == '') {
+                                    return '-';
+                                }
+                                return rowData;
+                            }
+                        },
+                        {field: 'path', width: 200, title: '转发地址', align: 'center', sort: true,
+                            templet: function (row) {
+                                var rowData = row[this.field];
+                                if (typeof (rowData) === 'undefined' || rowData == null || rowData == '') {
+                                    return '-';
+                                }
+                                return rowData;
+                            }
+                        },
+                        {field: 'uri', width: 200, title: '目标服务地址', align: 'center', sort: true,
+                            templet: function (row) {
+                                var rowData = row[this.field];
+                                if (typeof (rowData) === 'undefined' || rowData == null || rowData == '') {
+                                    return '-';
+                                }
+                                return rowData;
+                            }
+                        },
+                        {field: 'gmtCreate', width: 180, title: '添加时间', align: 'center', sort: true,
                             templet: function (row) {
                                 var rowData = row[this.field];
                                 if (typeof (rowData) === 'undefined' || rowData == null || rowData == '') {
@@ -91,26 +127,11 @@
                     data: dataArray,
                     page: true
                 });
-
-                console.log(table);
             }, function(code, data) {
                 top.dialog.msg(data.msg);
             })
         }
-        // 初始化日期
-        function initDate() {
-            // 日期选择
-            laydate.render({
-                elem: '#startTime',
-                format: 'yyyy-MM-dd'
-            });
-            laydate.render({
-                elem: '#endTime',
-                format: 'yyyy-MM-dd'
-            });
-        }
 
-        initDate();
         initTable();
         // 事件 - 页面变化
         $win.on('resize', function() {
@@ -121,7 +142,84 @@
         });
         // 事件 - 搜索
         $(document).on('click', '#search', function() {
-            initTable();
+            initTable(1);
+        });
+
+        // 删除
+        function removeData(ids) {
+            top.dialog.msg(top.dataMessage.delete, {
+                time: 0,
+                btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
+                shade: 0.3,
+                yes: function (index) {
+                    top.dialog.close(index);
+                    var layIndex;
+                    top.restAjax.delete(top.restAjax.path('api/route/delete/{ids}', [ids]), {}, null, function (code, data) {
+                        top.dialog.msg(top.dataMessage.deleteSuccess, {time: 1000});
+                        initTable();
+                    }, function (code, data) {
+                        top.dialog.msg(data.msg);
+                    }, function () {
+                        layIndex = top.dialog.msg(top.dataMessage.deleting, {icon: 16, time: 0, shade: 0.3});
+                    }, function () {
+                        top.dialog.close(layIndex);
+                    });
+                }
+            });
+        }
+        // 事件 - 增删改
+        table.on('toolbar(dataTable)', function(obj) {
+            var layEvent = obj.event;
+            var checkStatus = table.checkStatus('dataTable');
+            var checkDatas = checkStatus.data;
+            if(layEvent === 'saveEvent') {
+                layer.open({
+                    type: 2,
+                    title: false,
+                    closeBtn: 0,
+                    area: ['100%', '100%'],
+                    shadeClose: true,
+                    anim: 2,
+                    content: top.restAjax.path('route/route/save.html', []),
+                    end: function() {
+                        initTable();
+                    }
+                });
+            } else if(layEvent === 'updateEvent') {
+                if(checkDatas.length === 0) {
+                    top.dialog.msg(top.dataMessage.table.selectEdit);
+                } else if(checkDatas.length > 1) {
+                    top.dialog.msg(top.dataMessage.table.selectOneEdit);
+                } else {
+                    layer.open({
+                        type: 2,
+                        title: false,
+                        closeBtn: 0,
+                        area: ['100%', '100%'],
+                        shadeClose: true,
+                        anim: 2,
+                        content: top.restAjax.path('route/route/update.html?uuid={uuid}', [checkDatas[0].uuid]),
+                        end: function() {
+                            initTable();
+                        }
+                    });
+                }
+            } else if(layEvent === 'removeEvent') {
+                if(checkDatas.length === 0) {
+                    top.dialog.msg(top.dataMessage.table.selectDelete);
+                } else {
+                    var ids = '';
+                    for(var i = 0, item; item = checkDatas[i++];) {
+                        if(i > 1) {
+                            ids += ',';
+                        }
+                        ids += item['uuid'];
+                    }
+                    removeData(ids);
+                }
+            } else if(layEvent === 'levelUpEvent') {
+                parent.layer.close(parent.layer.getFrameIndex(window.name));
+            }
         });
     });
 </script>

src/main/resources/static/wg/route/route/save.html

@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <base href="/wg/">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/layui-v2.6.4/layui/css/layui.css">
+    <link rel="stylesheet" href="assets/layui-v2.6.4/layui/css/admin.css"/>
+</head>
+<body>
+<div class="layui-anim layui-anim-fadein">
+    <div class="layui-card">
+        <div class="layui-card-header">
+            <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
+              <a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
+              <a href="javascript:void(0);"><cite>新增内容</cite></a>
+            </span>
+        </div>
+        <div class="layui-card-body" style="padding: 15px;">
+            <form class="layui-form layui-form-pane" lay-filter="dataForm">
+                <div class="layui-form-item">
+                    <label class="layui-form-label">名称</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="title" class="layui-input"  lay-verify="required">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">描述</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="summary" class="layui-input" lay-verify="required">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">转发地址</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="path" class="layui-input" lay-verify="required">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">目标服务地址</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="uri" class="layui-input" lay-verify="required">
+                    </div>
+                </div>
+                <div class="layui-form-item layui-layout-admin">
+                    <div class="layui-input-block">
+                        <div class="layui-footer" style="left: 0;">
+                            <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交新增</button>
+                            <button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="assets/layui-v2.6.4/layui/layui.js"></script>
+<script>
+    layui.use(['form', 'laydate', 'laytpl'], function(){
+        var $ = layui.$;
+        var form = layui.form;
+        var layer = layui.layer;
+        var uuid = top.restAjax.params(window.location.href).uuid;
+
+        function closeBox() {
+            parent.layer.close(parent.layer.getFrameIndex(window.name));
+        }
+
+        // 初始化内容
+        function initData() {
+        }
+        initData();
+
+        // 提交表单
+        form.on('submit(submitForm)', function(formData) {
+            top.dialog.confirm(top.dataMessage.commit, function(index) {
+                top.dialog.close(index);
+                var loadLayerIndex;
+                top.restAjax.post(top.restAjax.path('api/route/save', []), formData.field, null, function(code, data) {
+                    var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
+                        time: 0,
+                        btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
+                        shade: 0.3,
+                        yes: function(index) {
+                            top.dialog.close(index);
+                            window.location.reload();
+                        },
+                        btn2: function() {
+                            closeBox();
+                        }
+                    });
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                }, function() {
+                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
+                }, function() {
+                    top.dialog.close(loadLayerIndex);
+                });
+            });
+            return false;
+        });
+
+        $('.close').on('click', function() {
+            closeBox();
+        });
+
+        // 校验
+        form.verify({
+        });
+    });
+</script>
+</body>
+</html>

src/main/resources/static/wg/route/route/update.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <base href="/wg/">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/layui-v2.6.4/layui/css/layui.css">
+    <link rel="stylesheet" href="assets/layui-v2.6.4/layui/css/admin.css"/>
+</head>
+<body>
+<div class="layui-anim layui-anim-fadein">
+    <div class="layui-card">
+        <div class="layui-card-header">
+            <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
+              <a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
+              <a href="javascript:void(0);"><cite>编辑内容</cite></a>
+            </span>
+        </div>
+        <div class="layui-card-body" style="padding: 15px;">
+            <form class="layui-form layui-form-pane" lay-filter="dataForm">
+                <div class="layui-form-item">
+                    <label class="layui-form-label">名称</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="title" class="layui-input"  lay-verify="required">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">描述</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="summary" class="layui-input" lay-verify="required">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">转发地址</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="path" class="layui-input" lay-verify="required">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">目标服务地址</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="uri" class="layui-input" lay-verify="required">
+                    </div>
+                </div>
+                <div class="layui-form-item layui-layout-admin">
+                    <div class="layui-input-block">
+                        <div class="layui-footer" style="left: 0;">
+                            <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交编辑</button>
+                            <button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="assets/layui-v2.6.4/layui/layui.js"></script>
+<script>
+    layui.use(['form', 'laydate', 'laytpl'], function(){
+        var $ = layui.$;
+        var form = layui.form;
+        var layer = layui.layer;
+        var uuid = top.restAjax.params(window.location.href).uuid;
+
+        function closeBox() {
+            parent.layer.close(parent.layer.getFrameIndex(window.name));
+        }
+
+        // 初始化内容
+        function initData() {
+            var loadLayerIndex;
+            top.restAjax.get(top.restAjax.path('api/route/get/{uuid}', [uuid]), {}, null, function(code, data) {
+                var dataFormData = {};
+                for(var i in data) {
+                    dataFormData[i] = data[i] +'';
+                }
+                form.val('dataForm', dataFormData);
+                form.render(null, 'dataForm');
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            }, function() {
+                loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
+            }, function() {
+                top.dialog.close(loadLayerIndex);
+            });
+        }
+        initData();
+        
+        // 提交表单
+        form.on('submit(submitForm)', function(formData) {
+            top.dialog.confirm(top.dataMessage.commit, function(index) {
+                top.dialog.close(index);
+                var loadLayerIndex;
+                top.restAjax.put(top.restAjax.path('api/route/update/{uuid}', [uuid]), formData.field, null, function(code, data) {
+                    var layerIndex = top.dialog.msg(top.dataMessage.updateSuccess, {
+                        time: 0,
+                        btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
+                        shade: 0.3,
+                        yes: function(index) {
+                            top.dialog.close(index);
+                            window.location.reload();
+                        },
+                        btn2: function() {
+                            closeBox();
+                        }
+                    });
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                }, function() {
+                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
+                }, function() {
+                    top.dialog.close(loadLayerIndex);
+                });
+            });
+            return false;
+        });
+
+        $('.close').on('click', function() {
+            closeBox();
+        });
+
+        // 校验
+        form.verify({
+        });
+    });
+</script>
+</body>
+</html>