【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（3）路由导航卫士、主页实现

项目笔记为项目总结笔记，若有错误欢迎指出哟~

【项目专栏】
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（1）spring boot项目搭建、vue项目搭建、微信小程序项目搭建
 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（2）后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（3）路由导航卫士、主页实现

【java+vue+微信小程序项目】从零开始搭建——健身房管理平台

路由导航守卫
- 全局前置守卫
主页实现

路由导航守卫

路由导航守卫（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") 获取当前用户信息。如果不存在用户信息，说明用户未登录，强制跳转到登录页。
如果存在用户信息，表示用户已登录，直接放行。
下面的代码是对 Vue Router 的 push 方法进行了一些处理，以解决编程式导航时可能出现的问题，例如没有捕获到错误导致的报错。
这段代码是对 Vue Router 的 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>
  <!-- 引入container布局 -->
  <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>

在这里插入图片描述

菜单路径存储在mysql数据库

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