微人事项目学习笔记（3）- Home页制作

于 2021-11-11 22:03:20 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # 微人事项目 文章标签： 微人事 springboot vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012292754/article/details/120799501
本文详细介绍了如何在前端项目中利用Vuex管理和展示动态菜单，包括从服务端获取菜单接口、Vuex的安装配置、菜单请求工具类封装，以及全局路由守卫的设置。同时，讨论了页面加载问题和首页的完善，如添加面包屑导航。此外，还提到了图标库的安装，确保前端页面的视觉效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1 Home和Title页制作

布局参考

  • 布局
    在这里插入图片描述

  • 右面的菜单
    在这里插入图片描述

  • 注销
    在这里插入图片描述
    在这里插入图片描述

2 左边导航菜单

在这里插入图片描述

  • 实现在main的页面显示，而不是整个页面替换
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 根据index跳转
    在这里插入图片描述
    在这里插入图片描述

  • 自动跳转
    在这里插入图片描述
    el-menu增加 router属性，不用写点击事件
    在这里插入图片描述

2 菜单项接口

2.1 服务端菜单接口

在这里插入图片描述
在这里插入图片描述

2.2 前端展示菜单

菜单项数据加载后，在前端存放的地方：

  1. sessionStorage,别人可以看到，不是很安全
  2. localStorage，别人可以看到，不是很安全
  3. vuex,所有的vue页面可以用

2.2.1 安装配置vuex

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2.2 菜单请求工具类封装

在这里插入图片描述

2.2.3 前端页面添加并完善菜单请求

在这里插入图片描述
在这里插入图片描述

2.3 左边导航菜单加载

菜单信息保存到了vuex（内存中），如果刷新页面，可能会丢失，使用路由导航守卫

在这里插入图片描述

  • 全局导航守卫，类似后端的过滤器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 安装图标库
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2.4 页面加载问题解决

在这里插入图片描述
在这里插入图片描述

2.5 首页完善

  • 添加面包屑 https://element.eleme.cn/#/zh-CN/component/breadcrumb
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值