'使用ES6语法，改善重构前端实现'

root/api/meta.js

@@ -0,0 +1,92 @@
+/*import red from '../res/js/red'*/
+
+/*const getPlats = (callback) => {
+    red.getJSON("/meta/plat_list", {}, json => callback(json));
+}
+
+const getTableList = (callback) => {
+    red.getJSON("/meta/tablelist",{}, function (json) {
+        callback(json);
+    });
+}
+
+const getTableDetail = ({name}, callback) => {
+    red.getJSON("/meta/tableinfo",{name}, function (json) {
+        callback(json);
+    });
+}
+
+const getServiceList = (callback) => {
+    red.getJSON("/meta/service_list",{}, function (json) {
+        json = red.replacePoint(json);
+        callback(json);
+    });
+}
+
+const getServiceInfo = ({name}, callback) => {
+    red.getJSON("/meta/service_info",{name}, res => {
+        let row = red.replacePoint(res);
+        row.shows = row.shows || [];
+        row.exports = row.exports || [];
+        row.imports = row.imports || [];
+        row.filters = row.filters || [];
+
+        callback(row);
+    });
+}
+
+function getServiceDetail({name}, callback) {
+    red.getJSON("/meta/service_detail",{name}, function (json) {
+        json = red.replacePoint(json)
+        callback(json);
+    });
+}*/
+const meta = {
+    getPlats: (callback) => {
+        red.getJSON("/meta/plat_list", {}, json => callback(json));
+    },
+    getTableList: (callback) => {
+        red.getJSON("/meta/tablelist",{}, function (json) {
+            callback(json);
+        });
+    },
+    getTableDetail: ({name}, callback) => {
+        red.getJSON("/meta/tableinfo",{name}, function (json) {
+            callback(json);
+        });
+    },
+
+    getServiceList: (callback) => {
+        red.getJSON("/meta/service_list",{}, function (json) {
+            json = red.replacePoint(json);
+            callback(json);
+        });
+    },
+    getServiceInfo: ({name}, callback) => {
+        red.getJSON("/meta/service_info",{name}, res => {
+            let row = red.replacePoint(res);
+            row.shows = row.shows || [];
+            row.exports = row.exports || [];
+            row.imports = row.imports || [];
+            row.filters = row.filters || [];
+
+            callback(row);
+        });
+    },
+    getServiceDetail: ({name}, callback) => {
+        red.getJSON("/meta/service_detail",{name}, function (json) {
+            json = red.replacePoint(json)
+            callback(json);
+        });
+    }
+}
+
+/*
+export {
+    getTableList,
+    getPlats,
+    getServiceDetail,
+    getServiceInfo,
+    getServiceList,
+    getTableDetail
+}*/

root/api/user.js

@@ -1,9 +1,18 @@
 //import red from '../res/js/red'
 
-const login = ({username,  pwd}) => {
+const login = ({username,  pwd}, callback) => {
-    return {username};
+    $.post("/user/login", {username,  pwd}, function (json) {
+        callback(json);
+    });
 }
 
 const logout = () => {
-
+    red.getJSON("/user/logout",{}, function () {
+        red.showMsg({msg:"退出成功"});
+        setTimeout(() => {
+            location.href = "/user/login.html";
+        }, 2000)
+    })
 }
+
+export {login, logout}

root/index.html

@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>MetaKit</title>
-    <link rel="stylesheet" href="../res/zui/css/zui.min.css">
+    <link rel="stylesheet" href="./res/zui/css/zui.min.css">
-    <link rel="stylesheet" href="../res/css/zui-theme.css">
+    <link rel="stylesheet" href="./res/css/zui-theme.css">
-    <link rel="stylesheet" href="../res/css/red-kit.css">
+    <link rel="stylesheet" href="./res/css/red-kit.css">
     <style>
         .logo h1{
             float: left;
@@ -84,13 +84,17 @@
     </row>
 </div>
 
-<script src="../res/zui/lib/jquery/jquery.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue" async></script>
-<script src="../res/zui/js/zui.js"></script>
+<script src="./res/zui/lib/jquery/jquery.js" defer></script>
-<script src="../res/zui/lib/sortable/zui.sortable.js"></script>
+<script src="./res/zui/js/zui.js" defer></script>
-<script src="../res/js/red.js"></script>
+<script src="./res/js/red.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script src="./api/meta.js" defer></script>
+<script src="./res/zui/lib/sortable/zui.sortable.js" defer></script>
 <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
-<script>
+<script type="module">
+    import { logout } from './api/user.js'
+    /*import meta from './api/meta.js'*/
+    //import { getServiceInfo, getServiceDetail, getServiceList } from './api/meta.js'
     var vm = new Vue({
         el: ".container-fluid",
         data: {
@@ -150,7 +154,7 @@
             }
         },
         methods: {
-            loadPage: function (page) {
+            loadPage(page) {
                 if (page && this.page.url == page.url) {
                     return false;
                 }
@@ -158,17 +162,13 @@
                 this.page = page;
                 $("#main").load(page.url);
             },
-            loadMain: function (item) {
+            loadMain(item) {
                 this.menus = item.nodes || [item];
                 this.pageId = item.name;
             },
-            logout: function () {
+            logout() {
-                red.getJSON("/user/logout",{}, function () {
+                console.log(12321)
-                    red.showMsg({msg:"退出成功"});
+                logout()
-                    setTimeout(() => {
-                        location.href = "/user/login.html";
-                    }, 2000)
-                })
             }
         },
         mounted: function () {

root/metadata/metaService.html

@@ -214,8 +214,11 @@
 
 </row>
 
-<script src="res/zui/lib/sortable/zui.sortable.js"></script>
 <script>
+    //import { login } from '../api/user.js'
+    //import { getServiceInfo, getServiceDetail, getServiceList } from '/api/meta.js'
+    let { getServiceInfo, getServiceDetail, getServiceList } = meta;
+
     var vm = new Vue({
         el: ".meta-service",
         data: {
@@ -312,25 +315,19 @@
             },
         },
         methods: {
-            loadInfo: function (name) {
+            loadInfo(name) {
-                red.getJSON("/meta/service_info",{name: name}, function (json) {
+                getServiceInfo({name}, (json) => {
-
+                    vm.serviceInfo = json;
-                    var row = red.replacePoint(json);
+                })
-                    row.shows = row.shows || [];
-                    row.exports = row.exports || [];
-                    row.imports = row.imports || [];
-                    row.filters = row.filters || [];
-                    vm.serviceInfo = row;
-                });
             },
-            loadDetail: function (name) {
+            loadDetail(name) {
-                red.getJSON("/meta/service_detail",{name: name}, function (json) {
+                getServiceDetail({name}, (json) => {
-                    vm.serviceDetail = red.replacePoint(json);
+                    vm.serviceDetail = json;
-                });
+                })
             },
-            serviceList: function () {
+            serviceList() {
-                red.getJSON("/meta/service_list",{}, function (json) {
+                getServiceList(json => {
-                    vm.services = red.replacePoint(json);
+                    vm.services = json;
                 });
             },
             getFieldLabel: function (col) {
@@ -518,13 +515,6 @@
             });*/
 
             this.serviceList();
-
-            /*$(window).keydown(function (event) {
-                // 监听 Ctrl + Enter 可全屏查看
-                if (event.ctrlKey && event.keyCode == 13) {
-                    vm.save();
-                }
-            });*/
         }
     });
 

root/metadata/metatable/metaTable.html

@@ -282,8 +282,9 @@
 
 </row>
 
-<script src="res/zui/lib/sortable/zui.sortable.js"></script>
 <script>
+    let { getTableList,getTableDetail } = meta;
+
     var vm = new Vue({
         el: ".meta-list",
         data: {
@@ -362,12 +363,10 @@
 
         },
         methods: {
-            loadDetail: function (cate) {
+            loadDetail(cate) {
-                //this.status = 0;
+                getTableDetail({name: cate}, (json) => {
-                red.getJSON("/meta/tableinfo",{name: cate}, function (json) {
                     var row = json;
                     vm.meta = row;
-
                     var oldItems = [];
                     row.items.forEach(function (item) {
                         var d = {};
@@ -380,15 +379,10 @@
                 });
 
             },
-            tableList: function () {
+            tableList() {
-                red.getJSON("/meta/tablelist",{}, function (json) {
+                getTableList(json => {
                     vm.tables = json;
-                });
+                })
-
-                /*red.getJSON("/meta/service_info",{name: "user_service"}, function (json) {
-                    var x = red.replaceAll(json);
-                    console.log(x)
-                });*/
             },
             catalogs: function() {
                 var dbPlats = this.dbPlats;

root/user/login.html

@@ -100,10 +100,13 @@
 <script src="../res/zui/lib/jquery/jquery.js"></script>
 <script src="../res/zui/js/zui.js"></script>
 <script src="../res/js/red.js"></script>
-<!--<script src="../api/user.js"></script>//-->
+<!--<script src="../api/user.js"></script>-->
+<!--<script src="../api/meta.js"></script>-->
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-<script>
+<script type="module">
-    //import { login } from '../api/user.js'
+    import { login,logout } from '../api/user.js'
+    import { getPlats } from '../api/meta.js'
+
     var vm = new Vue({
         el: ".login",
         data: {
@@ -117,23 +120,26 @@
         },
         methods: {
             loginCheck: function ({username,  pwd}) {
-                /*login({username,  pwd}).then(res => {
+                login({username,  pwd}, function (json) {
-                    console.log("res", res)
-                });*/
-                $.post("/user/login", {username,  pwd}, function (json) {
                     if (json.code == 0) {
-                        vm.loadPlats();
+                        getPlats(function (json) {
                             red.showMsg({msg:"请选择业务平台"})
+
+                            vm.sysPlats = json;
+                            if (!vm.sysPlat) {
+                                vm.sysPlat = json[0];
+                            }
+                            red.setData("sysPlats", json);
                             setTimeout(function () {
                                 vm.choose = true;
-                            //location.href = "/";
                             }, 500);
+                        })
                     } else {
                         red.showMsg({msg: json.message})
                     }
                 });
             },
-            loadPlats: function () {
+            /*loadPlats: function () {
                 var para = {
                     doc:"sys_plat",
                     shows: JSON.stringify(["_id", "_key", "name", "token","remark", "status"])
@@ -145,7 +151,7 @@
                     }
                     red.setData("sysPlats", json);
                 });
-            },
+            },*/
             goIndex: function () {
                 if (!this.sysPlat) {
                     red.showMsg({msg:"请选择选择业务平台", type:"error"});