refactor(all): 完成项目的前后端逻辑分离，静态页面可以单独部署

templates/system/role/index.html

@@ -136,11 +136,45 @@
         </button>
       </div>
     </script>
+
+    <!--授权表格-->
+    <form
+      class="layui-form"
+      action=""
+      style="display: none"
+      id="role-rights-form"
+      lay-filter="role-rights-form"
+    >
+      <div class="row" style="margin: 10px 5px">
+        <ul id="role_rights" class="dtree" data-id="0"></ul>
+      </div>
+      <div class="bottom">
+        <div class="button-container">
+          <button
+            type="submit"
+            class="layui-btn layui-btn-primary layui-btn-sm"
+            lay-submit
+            lay-filter="role-rights-save"
+          >
+            <i class="layui-icon layui-icon-ok"></i>
+            提交
+          </button>
+          <button type="reset" class="layui-btn layui-btn-sm">
+            <i class="layui-icon layui-icon-refresh"></i>
+            重置
+          </button>
+        </div>
+      </div>
+    </form>
+
     <script>
       layui.use(function () {
         var table = layui.table;
         var $ = layui.$;
         var form = layui.form;
+        let tree = layui.tree;
+
+        let role_id = -1;
 
         table.render({
           elem: "#role-table",
@@ -205,12 +239,35 @@
             });
           } else if (obj.event === "role-tool-detail") {
             //  角色授权 role-tool-detail
+            role_id = obj.data["id"];
+            $.ajax({
+              url: "/api/v1/rights?type=tree",
+              type: "get",
+              success: function (ret) {
+                // 渲染组件数据
+                tree.render({
+                  elem: "#role_rights",
+                  id: "role_rights",
+                  data: ret.data,
+                  showCheckbox: true,
+                });
+                // 获取需要授权角色的权限数据
+                $.ajax({
+                  url: `/api/v1/role/role_rights/${role_id}?type=tree`,
+                  type: "get",
+                  success: function (ret) {
+                    tree.setChecked("role_rights", ret.data);
+                  },
+                });
+              },
+            });
+
             layer.open({
-              type: 2,
+              type: 1,
               title: "授权",
-              shade: 0.1,
+              shade: false,
               area: ["500px", "500px"],
-              content: "/views/role_rights/" + obj.data["id"],
+              content: $("#role-rights-form"),
             });
           }
         });
@@ -243,6 +300,43 @@
           });
           return false;
         });
+
+        function get_id(list_tree_data) {
+          if (Array.isArray(list_tree_data)) {
+            let ret = [];
+            $.each(list_tree_data, function (index, item) {
+              if (item?.children) {
+                ret.push(...get_id(item.children));
+              }
+              ret.push(...get_id(item));
+            });
+            return ret;
+          } else {
+            return [list_tree_data.id];
+          }
+        }
+
+        form.on("submit(role-rights-save)", function (data) {
+          let param = tree.getChecked("role_rights"); // 获取选中节点的数据
+          let rights_ids = get_id(param).join();
+          $.ajax({
+            url: `/api/v1/role/role_rights/${role_id}`,
+            data: JSON.stringify({ rights_ids: rights_ids }),
+            dataType: "json",
+            contentType: "application/json",
+            type: "put",
+            success: function (result) {
+              if (result.code === 0) {
+                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
+                  layer.closeAll();
+                });
+              } else {
+                layer.msg(result.message, { icon: 2, time: 1000 });
+              }
+            },
+          });
+          return false;
+        });
       });
     </script>
   </body>

templates/system/user/index.html

@@ -150,12 +150,44 @@
         </button>
       </div>
     </script>
+
+    <!--用户授权标签-->
+    <form
+      class="layui-form"
+      action=""
+      id="user-role-form"
+      lay-filter="user-role-form"
+    >
+      <div class="row" style="margin: 10px 5px">
+        <ul id="user_role" class="dtree" data-id="0"></ul>
+      </div>
+      <div class="bottom">
+        <div class="button-container">
+          <button
+            type="submit"
+            class="layui-btn layui-btn-primary layui-btn-sm"
+            lay-submit=""
+            lay-filter="user-role-save"
+          >
+            <i class="layui-icon layui-icon-ok"></i>
+            提交
+          </button>
+          <button type="reset" class="layui-btn layui-btn-sm">
+            <i class="layui-icon layui-icon-refresh"></i>
+            重置
+          </button>
+        </div>
+      </div>
+    </form>
     <script>
       layui.use(function () {
         var table = layui.table;
         var $ = layui.$;
         var form = layui.form;
         var laydate = layui.laydate;
+        var tree = layui.tree;
+
+        let user_id = -1;
 
         table.render({
           elem: "#user-table",
@@ -220,13 +252,39 @@
               },
             });
           } else if (obj.event === "user-tool-detail") {
+            user_id = obj.data["id"];
+            $.ajax({
+              url: "/api/v1/role?type=tree",
+              type: "get",
+              success: function (ret) {
+                let data = [];
+                $.each(ret.data, function (index, item) {
+                  data.push({ id: item.id, title: item.name });
+                });
+                tree.render({
+                  elem: "#user_role",
+                  id: "user_role",
+                  data: data,
+                  showCheckbox: true,
+                });
+                // 请求获取当前用户的权限
+                $.ajax({
+                  url: `/api/v1/user/user_role/${user_id}`,
+                  type: "get",
+                  success: function (ret) {
+                    tree.setChecked("user_role", ret.data);
+                  },
+                });
+              },
+            });
             // 用户授权
             layer.open({
-              type: 2,
+              type: 1,
               title: "授权",
-              shade: 0.1,
+              shade: false,
               area: ["500px", "500px"],
-              content: "/views/user_role/" + obj.data["id"],
+              // content: "/views/user_role/" + obj.data["id"]
+              content: $("#user-role-form"),
             });
           }
         });
@@ -265,6 +323,43 @@
           elem: "#form_create_at",
           type: "datetime",
         });
+
+        function get_id(list_tree_data) {
+          if (Array.isArray(list_tree_data)) {
+            let ret = [];
+            $.each(list_tree_data, function (index, item) {
+              if (item?.children) {
+                ret.push(...get_id(item.children));
+              }
+              ret.push(...get_id(item));
+            });
+            return ret;
+          } else {
+            return [list_tree_data.id];
+          }
+        }
+
+        form.on("submit(user-role-save)", function (data) {
+          let param = tree.getChecked("user_role"); // 获取选中节点的数据
+          let rights_ids = get_id(param).join();
+          $.ajax({
+            url: `/api/v1/user/user_role/${user_id}`,
+            data: JSON.stringify({ rights_ids: rights_ids }),
+            dataType: "json",
+            contentType: "application/json",
+            type: "put",
+            success: function (result) {
+              if (result.code === 0) {
+                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
+                  layer.closeAll();
+                });
+              } else {
+                layer.msg(result.message, { icon: 2, time: 1000 });
+              }
+            },
+          });
+          return false;
+        });
       });
     </script>
   </body>

templates/view/index.html

@@ -120,13 +120,42 @@
         var admin = layui.admin;
         var popup = layui.popup;
 
+        // 请求后端，严重是否已经登录
+        fetch("/api/v1/user/profile", {
+          method: "GET",
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("access_token"),
+          },
+        })
+          .then((res) => res.json())
+          .then(function (data) {
+            if (data.code !== 0) {
+              location.href = "/view/login.html";
+            }
+          });
+
+        // 给 pear-admin-layui 的默认 ajax 请求添加权限
+        $.ajaxSetup({
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("access_token"),
+          },
+        });
+
         admin.setConfigurationPath("/static/config/pear.config.json");
 
         admin.render();
 
         admin.logout(function () {
           popup.success("注销成功", function () {
-            location.href = "/api/v1/logout";
+            fetch("/api/v1/logout")
+              .then((res) => res.json())
+              .then(function (data) {
+                if (data.code !== 0) {
+                  localStorage.removeItem("access_token");
+                  localStorage.removeItem("refresh_token");
+                  location.href = "/view/login.html";
+                }
+              });
           });
 
           // 清空 tabs 缓存

templates/view/login.html

@@ -94,7 +94,7 @@
                   </div>
                   <div class="other-login">
                     <div class="other-login-methods">其他方式</div>
-                    <a class="greenText" href="/register.html">注册账号</a>
+                    <a class="greenText" href="/view/register.html">注册账号</a>
                   </div>
                 </div>
               </div>
@@ -127,6 +127,8 @@
             data: JSON.stringify(data.field),
             contentType: "application/json",
             success: function (res) {
+              localStorage.setItem("access_token", res.access_token);
+              localStorage.setItem("refresh_token", res.refresh_token);
               btn.stop(function () {
                 popup.success("登录成功", function () {
                   location.href = "/";

templates/view/register.html

@@ -118,7 +118,7 @@
                   </div>
                   <div class="other-login">
                     <div class="other-login-methods">其他方式</div>
-                    <a class="greenText" href="/login.html">登录</a>
+                    <a class="greenText" href="/view/login.html">登录</a>
                   </div>
                 </div>
               </div>

templates/views/role/role_rights.html

@@ -1,109 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <title>角色管理</title>
-    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
-    <link rel="stylesheet" href="/static/admin/css/admin.css" />
-    <link rel="stylesheet" href="/static/admin/css/admin.dark.css" />
-    <link rel="stylesheet" href="/static/admin/css/variables.css" />
-    <link rel="stylesheet" href="/static/admin/css/reset.css" />
-    <!-- 依 赖 脚 本 -->
-    <script src="/static/component/layui/layui.js"></script>
-    <script src="/static/component/pear/pear.js"></script>
-    <script src="/static/js/pear_admin_flask.js"></script>
-  </head>
-  <body>
-    <div class="layui-panel">
-      <form class="layui-form" action="">
-        <div class="row" style="margin: 10px 5px">
-          <ul id="role_rights" class="dtree" data-id="0"></ul>
-        </div>
-        <div class="bottom">
-          <div class="button-container">
-            <button
-              type="submit"
-              class="layui-btn layui-btn-primary layui-btn-sm"
-              lay-submit=""
-              lay-filter="role-rights-save"
-            >
-              <i class="layui-icon layui-icon-ok"></i>
-              提交
-            </button>
-            <button type="reset" class="layui-btn layui-btn-sm">
-              <i class="layui-icon layui-icon-refresh"></i>
-              重置
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-
-    <script>
-      layui.use(function () {
-        let tree = layui.tree;
-        let form = layui.form;
-        let $ = layui.jquery;
-
-        function get_id(list_tree_data) {
-          if (Array.isArray(list_tree_data)) {
-            let ret = [];
-            $.each(list_tree_data, function (index, item) {
-              if (item?.children) {
-                ret.push(...get_id(item.children));
-              }
-              ret.push(...get_id(item));
-            });
-            return ret;
-          } else {
-            return [list_tree_data.id];
-          }
-        }
-
-        $.ajax({
-          url: "/api/v1/rights?type=tree",
-          type: "get",
-          success: function (ret) {
-            // 渲染组件数据
-            tree.render({
-              elem: "#role_rights",
-              id: "role_rights",
-              data: ret.data,
-              showCheckbox: true,
-            });
-            // 获取需要授权角色的权限数据
-            $.ajax({
-              url: "/api/v1/role/role_rights/{{ rid }}?type=tree",
-              type: "get",
-              success: function (ret) {
-                tree.setChecked("role_rights", ret.data);
-              },
-            });
-          },
-        });
-
-        form.on("submit(role-rights-save)", function (data) {
-          let param = tree.getChecked("role_rights"); // 获取选中节点的数据
-          let rights_ids = get_id(param).join();
-          $.ajax({
-            url: "/api/v1/role/role_rights/{{ rid }}",
-            data: JSON.stringify({ rights_ids: rights_ids }),
-            dataType: "json",
-            contentType: "application/json",
-            type: "put",
-            success: function (result) {
-              if (result.code === 0) {
-                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
-                  parent.layer.close(parent.layer.getFrameIndex(window.name));
-                });
-              } else {
-                layer.msg(result.message, { icon: 2, time: 1000 });
-              }
-            },
-          });
-          return false;
-        });
-      });
-    </script>
-  </body>
-</html>

templates/views/user/user_role.html

@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <title>用户授权</title>
-    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
-    <link rel="stylesheet" href="/static/admin/css/admin.css" />
-    <link rel="stylesheet" href="/static/admin/css/admin.dark.css" />
-    <link rel="stylesheet" href="/static/admin/css/variables.css" />
-    <link rel="stylesheet" href="/static/admin/css/reset.css" />
-    <!-- 依 赖 脚 本 -->
-    <script src="/static/component/layui/layui.js"></script>
-    <script src="/static/component/pear/pear.js"></script>
-    <script src="/static/js/pear_admin_flask.js"></script>
-  </head>
-  <body>
-    <div class="layui-panel">
-      <form class="layui-form" action="">
-        <div class="row" style="margin: 10px 5px">
-          <ul id="user_role" class="dtree" data-id="0"></ul>
-        </div>
-        <div class="bottom">
-          <div class="button-container">
-            <button
-              type="submit"
-              class="layui-btn layui-btn-primary layui-btn-sm"
-              lay-submit=""
-              lay-filter="role-rights-save"
-            >
-              <i class="layui-icon layui-icon-ok"></i>
-              提交
-            </button>
-            <button type="reset" class="layui-btn layui-btn-sm">
-              <i class="layui-icon layui-icon-refresh"></i>
-              重置
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-
-    <script>
-      layui.use(function () {
-        let tree = layui.tree;
-        let form = layui.form;
-        let $ = layui.jquery;
-
-        $.ajax({
-          url: "/api/v1/role?type=tree",
-          type: "get",
-          success: function (ret) {
-            let data = [];
-            $.each(ret.data, function (index, item) {
-              data.push({ id: item.id, title: item.name });
-            });
-            tree.render({
-              elem: "#user_role",
-              id: "user_role",
-              data: data,
-              showCheckbox: true,
-            });
-            // 请求获取当前用户的权限
-            $.ajax({
-              url: "/api/v1/user/user_role/{{ rid }}",
-              type: "get",
-              success: function (ret) {
-                tree.setChecked("user_role", ret.data);
-              },
-            });
-          },
-        });
-
-        function get_id(list_tree_data) {
-          if (Array.isArray(list_tree_data)) {
-            let ret = [];
-            $.each(list_tree_data, function (index, item) {
-              if (item?.children) {
-                ret.push(...get_id(item.children));
-              }
-              ret.push(...get_id(item));
-            });
-            return ret;
-          } else {
-            return [list_tree_data.id];
-          }
-        }
-
-        form.on("submit(role-rights-save)", function (data) {
-          let param = tree.getChecked("user_role"); // 获取选中节点的数据
-          let rights_ids = get_id(param).join();
-          $.ajax({
-            url: "/api/v1/user/user_role/{{ rid }}",
-            data: JSON.stringify({ rights_ids: rights_ids }),
-            dataType: "json",
-            contentType: "application/json",
-            type: "put",
-            success: function (result) {
-              if (result.code === 0) {
-                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
-                  parent.layer.close(parent.layer.getFrameIndex(window.name));
-                });
-              } else {
-                layer.msg(result.message, { icon: 2, time: 1000 });
-              }
-            },
-          });
-          return false;
-        });
-      });
-    </script>
-  </body>
-</html>