项目笔记为项目总结笔记,若有错误欢迎指出哟~
【项目专栏】
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(1)spring boot项目搭建、vue项目搭建、微信小程序项目搭建
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(2)后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(3)路由导航卫士、主页实现
路由导航守卫(Route Navigation Guards)是 Vue Router 提供的一种机制,用于在路由切换时进行一些逻辑控制和操作。
路由导航守卫分为三种:
router.beforeEach
router.afterEach
beforeRouteEnter
、beforeRouteUpdate
、beforeRouteLeave
使用路由导航守卫,可以方便地控制用户访问页面的权限,并且在路由切换时执行一些必要的操作,增强应用程序的稳定性和用户体验。
router——>index.js
const router = new VueRouter({
routes,
});
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.path == '/login') return next();
// 获取user
const userFlag = window.sessionStorage.getItem("user");
if (!userFlag) return next('/login');
next();
})
// 出现问题的时候使用
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
export default router;
router.beforeEach
方法用于注册一个全局前置守卫,会在路由切换前进行验证。当用户尝试访问任何路径时,都会先执行这个函数。beforeEach
函数中,判断即将访问的路径是否为 /login
,如果是,则直接放行,不进行后续验证。window.sessionStorage.getItem("user")
获取当前用户信息。如果不存在用户信息,说明用户未登录,强制跳转到登录页。push
方法进行了一些处理,以解决编程式导航时可能出现的问题,例如没有捕获到错误导致的报错。push
方法进行了一些处理,主要是为了解决在编程式导航时可能出现的问题。首先,通过 const originalPush = VueRouter.prototype.push
将原始的 push
方法保存到 originalPush
变量中,以便后续调用。
然后,重新定义了 VueRouter.prototype.push
方法。此时,当我们在代码中使用 router.push()
进行页面跳转时,实际上会执行重新定义后的方法。
在重新定义的方法中,首先判断了两个参数 onResolve
和 onReject
是否存在。这两个参数通常在使用 Promise API 时才会传入,用于处理异步操作的回调。
onResolve
或 onReject
存在,说明是使用了 Promise API,并且传入了相应的回调函数。则直接调用原始的 push
方法,并将参数传递过去,同时返回其返回值(Promise)。onResolve
和 onReject
都不存在,则说明没有传入回调函数,此时调用原始的 push
方法,并使用 .catch(err => err)
捕获可能的错误,以避免出现未捕获的异常错误。这样做的目的是为了确保在编程式导航时能够正常捕获错误。如果在路由跳转过程中发生了错误,通过这段代码的处理,程序不会抛出异常,而是将错误信息返回给调用者,避免导致程序崩溃。
element-ui Layout 布局:https://element.eleme.cn/#/zh-CN/component/layout
components——>Home.vue
<template>
<el-container class="home-container">
<el-header>
<div>
<img src="../assets/logo.jpg" alt class="logo_img" />
<span>Power健身房管理平台span>
div>
<el-button type="info" @click="logout">安全退出el-button>
el-header>
<el-container>
<el-aside width="200px">
el-aside>
<el-main>
el-main>
el-container>
el-container>
template>
<script>
script>
<style lang="less" scoped>
.home-container {
height: 100%;
}
// 头部样式
.el-header {
background-color: #373d41;
display: flex;
justify-content: space-between; // 左右贴边
padding-left: 0%; // 左边界
align-items: center; // 水平
color: #fff;
font-size: 20px;
> div {
//左侧div加布局
display: flex;
align-items: center;
span {
margin-left: 15px;
}
}
}
// 侧边栏样式
.el-aside {
background-color: #333744;
.el-menu {
border-right: none;
}
}
// 主体样式
.el-main {
background-color: #eaedf1;
}
.logo_img {
width: 55px;
height: 55px;
border-radius: 50%; // 加圆角
}
//按钮样式
.toggle-button {
background-color: #4a5064;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer; // 显示鼠标指针为:小手
}
style>
drop table if exists mainmenu;
-- 主菜单表
create table mainmenu(
id bigint(20) not null primary key comment '主键',
title varchar(100) comment '菜单名称',
path varchar(100) comment '菜单路径'
);
drop table if exists submenu;
-- 子菜单表
create table submenu(
id bigint(20) not null primary key comment '主键',
title varchar(100) comment '菜单名称',
path varchar(100) comment '菜单路径',
mid bigint(20) comment '主菜单id',
foreign key (mid) references fitness_center.mainmenu(id)
);
-- 主菜单
insert into mainmenu values(100,'业务管理','/admin');
insert into mainmenu values(200,'资讯管理','/use');
-- 子菜单
insert into submenu values(101,'用户列表','/user',100);
insert into submenu values(102,'教练列表','/coach',100);
insert into submenu values(103,'课程列表','/course',100);
insert into submenu values(104,'私教预约列表','/private',100);
insert into submenu values(201,'通知公告','/notice',200);
insert into submenu values(202,'卡路里','/calorie',200);
insert into submenu values(203,'饮食记录','/diet',200);
insert into submenu values(204,