前端技术: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
需要可以私信