feat: 初始化音乐项目后台管理系统- 新增后台管理相关页面和功能组件
- 实现管理员评论管理、数据统计等功能 - 添加后台布局和路由管理 -配置数据库和Redis连接 - 实现文件上传和访问路径配置 - 添加Sa-Token安全配置
This commit is contained in:
ikmkj
312
music-qianduan/src/router/index.js
Normal file
312
music-qianduan/src/router/index.js
Normal file
@@ -0,0 +1,312 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import AdminLayout from '../layouts/AdminLayout.vue'
|
||||
|
||||
// 导入视图组件
|
||||
const Home = () => import('../views/Home.vue')
|
||||
const NotFound = () => import('../views/NotFound.vue')
|
||||
const Login = () => import('../views/Login.vue')
|
||||
const Register = () => import('../views/Register.vue')
|
||||
const Music = () => import('../views/Music.vue')
|
||||
const MusicDetail = () => import('../views/MusicDetail.vue')
|
||||
const Playlist = () => import('../views/Playlist.vue')
|
||||
const PlaylistDetail = () => import('../views/PlaylistDetail.vue')
|
||||
const Singer = () => import('../views/Singer.vue')
|
||||
const SingerDetail = () => import('../views/SingerDetail.vue')
|
||||
const Search = () => import('../views/Search.vue')
|
||||
const UserCenter = () => import('../views/UserCenter.vue')
|
||||
const UserCollectMusic = () => import('../views/user/CollectMusic.vue')
|
||||
const UserCollectPlaylist = () => import('../views/user/CollectPlaylist.vue')
|
||||
const UserCollectSinger = () => import('../views/user/CollectSinger.vue')
|
||||
const UserPlaylist = () => import('../views/user/Playlist.vue')
|
||||
const UserPassword = () => import('../views/user/Password.vue')
|
||||
const ImageTest = () => import('../views/ImageTest.vue')
|
||||
|
||||
// 后台管理页面
|
||||
const Admin = () => import('../views/admin/Index.vue')
|
||||
const AdminDashboard = () => import('../views/admin/Dashboard.vue')
|
||||
const AdminUser = () => import('../views/admin/UserManagement.vue')
|
||||
const AdminMusic = () => import('../views/admin/Music.vue')
|
||||
const AdminPlaylist = () => import('../views/admin/Playlist.vue')
|
||||
const AdminSinger = () => import('../views/admin/Singer.vue')
|
||||
const AdminBanner = () => import('../views/admin/BannerManagement.vue')
|
||||
const AdminType = () => import('../views/admin/TypeManagement.vue')
|
||||
const AdminComment = () => import('../views/admin/CommentManagement.vue')
|
||||
|
||||
// 定义路由
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home,
|
||||
meta: {
|
||||
title: '首页'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: Login,
|
||||
meta: {
|
||||
title: '登录'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'register',
|
||||
component: Register,
|
||||
meta: {
|
||||
title: '注册'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/music',
|
||||
name: 'music',
|
||||
component: Music,
|
||||
meta: {
|
||||
title: '音乐'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/music/:id',
|
||||
name: 'music-detail',
|
||||
component: MusicDetail,
|
||||
meta: {
|
||||
title: '音乐详情'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/playlist',
|
||||
name: 'playlist',
|
||||
component: Playlist,
|
||||
meta: {
|
||||
title: '歌单'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/playlist/:id',
|
||||
name: 'playlist-detail',
|
||||
component: PlaylistDetail,
|
||||
meta: {
|
||||
title: '歌单详情'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/singer',
|
||||
name: 'singer',
|
||||
component: Singer,
|
||||
meta: {
|
||||
title: '歌手'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/singer/:id',
|
||||
name: 'singer-detail',
|
||||
component: SingerDetail,
|
||||
meta: {
|
||||
title: '歌手详情'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
name: 'search',
|
||||
component: Search,
|
||||
meta: {
|
||||
title: '搜索'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/image-test',
|
||||
name: 'image-test',
|
||||
component: ImageTest,
|
||||
meta: {
|
||||
title: '图片URL测试'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
name: 'user-center',
|
||||
component: UserCenter,
|
||||
meta: {
|
||||
title: '个人中心',
|
||||
requiresAuth: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'collect/music',
|
||||
name: 'user-collect-music',
|
||||
component: UserCollectMusic,
|
||||
meta: {
|
||||
title: '我收藏的音乐',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'collect/playlist',
|
||||
name: 'user-collect-playlist',
|
||||
component: UserCollectPlaylist,
|
||||
meta: {
|
||||
title: '我收藏的歌单',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'collect/singer',
|
||||
name: 'user-collect-singer',
|
||||
component: UserCollectSinger,
|
||||
meta: {
|
||||
title: '我收藏的歌手',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'playlist',
|
||||
name: 'user-playlist',
|
||||
component: UserPlaylist,
|
||||
meta: {
|
||||
title: '我的歌单',
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'password',
|
||||
name: 'user-password',
|
||||
component: UserPassword,
|
||||
meta: {
|
||||
title: '修改密码',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
component: AdminLayout,
|
||||
meta: {
|
||||
title: '后台管理',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'admin-dashboard',
|
||||
component: AdminDashboard,
|
||||
meta: {
|
||||
title: '控制面板',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'user',
|
||||
name: 'admin-user',
|
||||
component: AdminUser,
|
||||
meta: {
|
||||
title: '用户管理',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'music',
|
||||
name: 'admin-music',
|
||||
component: AdminMusic,
|
||||
meta: {
|
||||
title: '音乐管理',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'playlist',
|
||||
name: 'admin-playlist',
|
||||
component: AdminPlaylist,
|
||||
meta: {
|
||||
title: '歌单管理',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'singer',
|
||||
name: 'admin-singer',
|
||||
component: AdminSinger,
|
||||
meta: {
|
||||
title: '歌手管理',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'banner',
|
||||
name: 'admin-banner',
|
||||
component: AdminBanner,
|
||||
meta: {
|
||||
title: '轮播图管理',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'type',
|
||||
name: 'admin-type',
|
||||
component: AdminType,
|
||||
meta: {
|
||||
title: '类型管理',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'comment',
|
||||
name: 'admin-comment',
|
||||
component: AdminComment,
|
||||
meta: {
|
||||
title: '评论管理',
|
||||
requiresAuth: true,
|
||||
requiresAdmin: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'not-found',
|
||||
component: NotFound,
|
||||
meta: {
|
||||
title: '页面未找到'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 创建路由实例
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
// 全局前置守卫 - 设置页面标题和权限验证
|
||||
router.beforeEach((to, from, next) => {
|
||||
document.title = to.meta.title || '音乐应用'
|
||||
|
||||
// 从 store 获取登录状态
|
||||
const isLoggedIn = localStorage.getItem('token') // 临时使用localStorage，后续会改为store
|
||||
const isAdmin = localStorage.getItem('isAdmin') === 'true' // 临时使用localStorage，后续会改为store
|
||||
|
||||
// 需要登录权限但未登录
|
||||
if (to.meta.requiresAuth && !isLoggedIn) {
|
||||
next({ name: 'login', query: { redirect: to.fullPath } })
|
||||
return
|
||||
}
|
||||
|
||||
// 需要管理员权限但不是管理员
|
||||
if (to.meta.requiresAdmin && !isAdmin) {
|
||||
next({ name: 'home' })
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
Reference in New Issue
Block a user