✨ 添加导航栏

spring-security/step-2/src/main/resources/static/src/components/HeaderNavs.js

@@ -0,0 +1,29 @@
+const {defineComponent} = Vue;
+
+const HeaderNavs = defineComponent({
+    name: 'HeaderNavs',
+    template: `
+        <ul class="nav nav-tabs justify-content-center my-1">
+            <li class="nav-item" v-for="(nav,index) in navList" :key="index">
+                <a class="nav-link" aria-current="page" :class="{active:activeItem(nav)}"
+                    :href="nav.href">{{nav.title}}</a>
+            </li>
+        </ul>
+    `,
+    data() {
+        return {
+            navList: ref([
+                {href: "/login", title: "登录页面"},
+                {href: "/user", title: "用户页面"},
+                {href: "/role", title: "角色页面"},
+                {href: "/permission", title: "权限页面"},
+            ])
+        };
+    },
+    methods: {
+        activeItem(nav) {
+            const pathname = window.location.pathname;
+            return pathname === nav.href;
+        },
+    },
+})

spring-security/step-2/src/main/resources/static/src/components/Pagination.js

@@ -1,4 +1,3 @@
-const {defineComponent} = Vue;
 /*
     // pagination 类型
     const pagination = {

spring-security/step-2/src/main/resources/static/src/lib/css/tablePage.css

@@ -1,6 +1,5 @@
 body {
     background-color: #f8f9fa;
-    padding-top: 20px;
 }
 
 .card {

spring-security/step-2/src/main/resources/templates/permissionPage.html

@@ -36,6 +36,7 @@
     <dialog-permission :is-add="isAdd" :on-search="onSearch"
                        :permission-info="permissionInfo"></dialog-permission>
 
+    <header-navs></header-navs>
     <!-- 头部 -->
     <div class="card">
         <div class="card-header d-flex justify-content-between align-items-center">
@@ -133,6 +134,8 @@
 <!-- 加载全局axios配置 -->
 <script th:src="@{/src/config/axios-config.js}"></script>
 
+<!-- 头部导航 -->
+<script th:src="@{/src/components/HeaderNavs.js}"></script>
 <!-- 分页 -->
 <script th:src="@{/src/components/Pagination.js}"></script>
 <!-- 权限表单 -->
@@ -220,6 +223,7 @@
         },
     });
 
+    app.component('HeaderNavs', HeaderNavs)
     app.component('Pagination', Pagination)
     app.component('DialogPermission', DialogPermission)
     app.mount('#app');

spring-security/step-2/src/main/resources/templates/rolePage.html

@@ -35,6 +35,7 @@
 <div class="container-fluid" id="app">
     <dialog-role :is-add="isAdd" :on-search="onSearch" :role-info="roleInfo"></dialog-role>
 
+    <header-navs></header-navs>
     <!-- 头部 -->
     <div class="card">
         <div class="card-header d-flex justify-content-between align-items-center">
@@ -130,6 +131,8 @@
 <!-- 加载全局axios配置 -->
 <script th:src="@{/src/config/axios-config.js}"></script>
 
+<!-- 头部导航 -->
+<script th:src="@{/src/components/HeaderNavs.js}"></script>
 <!-- 分页 -->
 <script th:src="@{/src/components/Pagination.js}"></script>
 <!-- 角色表单 -->
@@ -219,8 +222,9 @@
         },
     });
 
-    app.component('Pagination', Pagination)
+    app.component('HeaderNavs', HeaderNavs);
-    app.component('DialogRole', DialogRole)
+    app.component('Pagination', Pagination);
+    app.component('DialogRole', DialogRole);
     app.mount('#app');
 </script>
 </html>

spring-security/step-2/src/main/resources/templates/userPage.html

@@ -35,6 +35,7 @@
 <div class="container-fluid" id="app">
     <dialog-user :is-add="dialogFormFlag" :on-search="onSearch" :userinfo="userinfo"></dialog-user>
 
+    <header-navs></header-navs>
     <!-- 头部 -->
     <div class="card">
         <div class="card-header d-flex justify-content-between align-items-center">
@@ -123,6 +124,8 @@
 <!-- 加载全局axios配置 -->
 <script th:src="@{/src/config/axios-config.js}"></script>
 
+<!-- 头部导航 -->
+<script th:src="@{/src/components/HeaderNavs.js}"></script>
 <!-- 分页 -->
 <script th:src="@{/src/components/Pagination.js}"></script>
 <!-- 用户表单 -->
@@ -210,8 +213,9 @@
         },
     });
 
-    app.component('Pagination', Pagination)
+    app.component('HeaderNavs', HeaderNavs);
-    app.component('DialogUser', DialogUser)
+    app.component('Pagination', Pagination);
+    app.component('DialogUser', DialogUser);
     app.mount('#app');
 </script>
 </html>