修改样式以及登录用户显示和退出登录功能

src/main/java/com/nokia/hb/service/AuthService.java

@@ -51,6 +51,6 @@ public class AuthService {
     }
 
     public R<Object> logout(HttpSession session) {
-        return null;
+        return R.ok();
     }
 }

src/main/resources/static/js/layui/css/modules/index.css

@@ -5,7 +5,8 @@ body{
     background-color: #fff;
 }
 .layui-tree-pack{
-    overflow: hidden;
+    /* overflow: hidden; */
+    width: 100%;
 }
 .layui-tree-txt{
     width: 100%;
@@ -39,4 +40,16 @@ body{
     /* font-family: fantasy; */
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     margin-top: 1px;
+}
+.banner .userinfo{
+    float: right;
+    margin-top: -50px;
+    margin-right: 30px;
+}
+.banner .userinfo .layui-icon{
+    font-size: 25px;
+}
+.banner .userinfo .logOut{
+    margin-left: 30px;
+    cursor: pointer;
 }

src/main/resources/templates/login.html

@@ -69,7 +69,9 @@
                 data: dataJson,
                 success: function (r) {
                     if (r?.success) {
+                        console.log('r: ', r);
                         layer.msg('登录成功');
+                        window.localStorage.setItem('userName',r.data.username)
                         setTimeout(() => window.location.href = '/template', 1500)
                         return
                     }

src/main/resources/templates/template.html

@@ -82,6 +82,12 @@
         <!-- <img src="../static/js/layui/css/modules/layer/default/nokiaLogo.png" alt="" width="150px" height="50px"> -->
         <div class="logo"></div>
         <div class="name">KPI-Analyser</div>
+        <div class="userinfo">
+            <!-- <i class="layui-icon layui-icon-username"></i>  -->
+            <span>你好，</span>
+            <span id="userName"></span>
+            <span class="logOut" onclick="logOutFun()">退出登录</span>
+        </div>
     </div>
 <div class="all layui-row">
     <div class=" t1 layui-col-md2 " >
@@ -170,7 +176,7 @@
             // layer.msg('Hello Zhou')
             table.render({
                 elem: '#demo',
-                height: 320,
+                height: 480,
                 // url: 'https://www.layui.com/demo/table/user/' , //数据接口
                 page: true, //开启分页
                 toolbar: true,
@@ -205,6 +211,8 @@
             initTreeCity(tree)
             initTreeIndicator(tree)
             initTreeIndicatorTemplate(tree)
+            // console.log(window.localStorage.getItem('userName'))
+            $("#userName").text(window.localStorage.getItem('userName'))
         })
 
         var treeCity;
@@ -301,7 +309,7 @@
                         dataA = r?.data?.datas
                         table.render({
                             elem: '#demo',
-                            height: 320,
+                            height: 480,
                             // url: 'https://www.layui.com/demo/table/user/' , //数据接口
                             page: true, //开启分页
                             toolbar: true,
@@ -457,6 +465,27 @@
             });
         }
 
+        // 获取登录用户信息
+
+        // 退出登录
+        function logOutFun() {
+            console.log('tuichu')
+            $.ajax({
+                type: "POST",
+                // url: '/api/json/citys.json',
+                url: '/api/logout',
+                success: function (r) {
+                    console.log('r: ', r);
+                    if (r?.success) {
+                        layer.msg('退出登录成功');
+                        setTimeout(() => window.location.href = '/login', 1000)
+                    }else{
+                        alert('退出登录失败');
+                    }
+                }
+            });
+        }
+
         // 
         $(document).ready(function(){
             setTimeout(()=>{