springboot+vue前后端分离的音视频成品项目

前端技术：vue+vue-router+vuex等

后端技术：springboot整合的springmvc+mybatis-plus+jwt等

前端运行图如下

登陆 

 后台主页

前台主页 

部分代码截图

部分代码：

{
  "name": "admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "echarts": "^5.1.1",
    "element-ui": "^2.15.1",
    "vue": "^2.6.11",
    "vue-aplayer": "^1.6.1",
    "vue-router": "^3.2.0",
    "vue-video-player": "^5.0.2",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}

let routes = [
    {
        path: '/',
        redirect: '/login',
    },
    {
        path: '/front',
        name: 'Front',
        component: () => import("../layout/front"),
        children: [
            {
                path: 'home',
                name: 'FrontHome',
                component: () => import("../views/front/home")
            },
            {
                path: 'message',
                name: 'Message',
                component: () => import("../views/front/message")
            },
            {
                path: 'notice',
                name: 'FrontNotice',
                component: () => import("../views/front/notice")
            },
            {
                path: 'person',
                name: 'Person',
                component: () => import("../views/front/person")
            },
            {
                path: 'detail',
                name: 'Detail',
                component: () => import("../views/front/Detail")
            },
            {
                path: 'mvDetail',
                name: 'MvDetail',
                component: () => import("../views/front/MvDetail")
            },
            {
                path: 'sheet',
                name: 'Sheet',
                component: () => import("../views/front/Sheet")
            },
            {
                path: 'mv',
                name: 'MV',
                component: () => import("../views/front/MV")
            },
            {
                path: 'singer',
                name: 'Singer',
                component: () => import("../views/front/Singer")
            },
            {
                path: 'singerDetail',
                name: 'SingerDetail',
                component: () => import("../views/front/SingerDetail")
            },
            {
                path: 'search',
                name: 'Search',
                component: () => import("../views/front/Search")
            },
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import("../views/login")
    },
    {
        path: '/register',
        name: 'Register',
        component: () => import("../views/register")
    },
]


const createRouter = () => new VueRouter({
    mode: 'history',
    routes: routes
})

const router = createRouter()

let user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
resetRouter(user.permission)

//写一个重置路由的方法，切换用户后，或者退出时清除动态加载的路由
export function resetRouter(permissions) {
    if (permissions) {
        const newRouter = createRouter()
        router.matcher = newRouter.matcher // 新路由实例matcer，赋值给旧路由实例的matcher，（相当于replaceRouter）
        if (!router.getRoutes().find(v => v.name === 'Manage')) {
            router.addRoute(getPermissions(permissions))
        }
    }

}

function getPermissions(permissions) {
    let manage = {
        path: '/manage', name: 'Manage', component: () => import("../layout/manage"),
        children: [
            {path: 'person', name: '个人信息', component: () => import("../views/manage/person")}
        ]
    }
    // 设置路由菜单
    if (permissions) {
        permissions.forEach(item => {
            manage.children.push({
                path: "/manage" + item.path,
                name: item.name,
                component: () => import("../views/manage" + item.path)
            });
        })
    }
    return manage
}



// vueRouter.beforeEach((to, from, next) => {
//     // 判断要去的路由界面是不是要鉴权
//     if (to.path.includes('manage')) {
//         // 查看是否登陆
//         if (!user.id) {
//             // 没登录的做处理
//             next({
//                 path: '/login'
//             })
//         } else {
//             // 登陆的正常跳
//             next()
//         }
//     } else {
//         // 不需要鉴权的正常跳
//         next()
//     }
// })

export default router

需要可以私信