JavaDemo
/
vue-java-tutorials
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ 添加导航栏

This commit is contained in:
bunny 2025-07-13 23:08:42 +08:00
parent 90b6a285b3
commit 27e3b6772f
6 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
spring-security/step-2/src/main/resources/static/src/components/HeaderNavs.js Normal file
View File

@ -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;
},
},
})

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

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

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

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

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

@ -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');

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

@ -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('DialogRole', DialogRole)
app.component('HeaderNavs', HeaderNavs);
app.component('Pagination', Pagination);
app.component('DialogRole', DialogRole);
app.mount('#app');
</script>
</html>

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

@ -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('DialogUser', DialogUser)
app.component('HeaderNavs', HeaderNavs);
app.component('Pagination', Pagination);
app.component('DialogUser', DialogUser);
app.mount('#app');
</script>
</html>