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

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

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
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
华为云计算HCIE学习笔记-FusionAccess
魔仙堡的仙女的博客
12-22 1万+
华为FusionAccess桌面云解决方案是基于华为云平台的一种虚拟桌面应用，通过在云平台上部署华为桌面云软件，使终端用户通过瘦客户端或者其他设备来访问跨平台的整个客户桌面和应用。 桌面云就是一个桌面池，这个池子中每一个桌面都有一个User来关联，信息靠HDC维护，写在DB中。 FusionAccess就是VDI（虚拟桌面基础设施）Virtual Desktop Infrastructure。FA是实现方式，VDI是一套解决方案。用虚拟桌面来替代物理PC。 物理PC：本地计算/处理，数据local
【计算机毕业设计】html学生管理系统 OA管理系统设计与实现 HTML网页设计结课作业
qq3200628753的博客
08-15 198
💗 爱心公益网页设计 、关爱老人网页、公益校园安全、公益扫黑除恶、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的......
微人事项目
04-24
人事管理系统——微人事。主要目的是通过这个项目加强各个部门之间的协调从而提高工作效率。该项目是一个前后端分离的开发方式，前端使用vue来构建单页面应用， 单页面应用通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个页面。vue是一套用于构建用户界面的渐进式框架，采用MVVM的设计模式。而后端使用Spring Boot开发，使用到了Spring Security实现权限认证、 WebSocket实现消息代理等。
微人事系统笔记
m_iNoError的博客
05-31 525
CustomFilterInvocationSecurityMetadataSource类：通过当前的请求地址，获取该地址需要的用户角色
微人事学习笔记（持续更新）
ok，兄弟们。全体目光向我看齐，我宣布个事儿...
07-26 1012
微人事学习笔记
微人事项目学习笔记（4）- 前后端分离管理权限思路
一角残叶的博客
11-14 715
1 前后端分离权限管理 http://www.javaboy.org/2019/0523/springboot-vue-permission.html 2 后端接口权限设计 角色只分配给二级菜单 根据用户发送的url地址，提取出需要的角色。 查看当前用户是否具备需要的角色 ...
微人事项目学习笔记（2）- 后端环境搭建
一角残叶的博客
10-16 2460
1 后端环境搭建 2 后端登录 首先根据表生成model和mapper SecurityConfig package com.tzb.vhr.config; import com.fasterxml.jackson.databind.ObjectMapper; import com.tzb.vhr.model.Hr; import com.tzb.vhr.model.RespBean; import com.tzb.vhr.service.HrService; import org.s
Bookmarks(2005-4-23)
热门推荐
Don't think about what u can do,but do what u wanna do
04-23 2万+
Bookmarks 明星后援会 iAfc賈靜雯官方國際後援會www.alyssachia.net 寵愛林嘉欣論壇-论坛首页 五月天官方網站 MCHotDog的日记 枪与玫瑰中文网 涅磐中文 艾薇兒中文官方網站【星聞速報】 -== 馬景濃情 ==- 中国麦迷联盟  链接 多媒体 设计 ◆图像设计 ...secondm
计算机毕业设计springboot轰趴馆管理
如果私信未回，直接找名联XI就行。CSDN名跟V同号
09-28 1012
最新计算机专业原创毕业设计参考选题都有源码+数据库是近期作品 你的选题刚好在下面有,有时间看到机会给您发 1 jsp爱心公益网站设计与制作 2 springboot网上购物商城系统研发 3 ssm房屋合租系统 4 ssm洁能租车 5 ssm学生住宿管理平台 6 springboot驴友社区网站 7 springboot社区生活系统 8 jsp房屋租售网站 9 ssm江西婺源旅游文化推广系统 10 spri..
微人事（二） Home页的制作
一蓑烟雨任平生
12-27 663
Home页的制作主要是菜单栏的动态加载，根据不同人的角色加载不同的导航栏。 （一）Vuex的作用 由于在用户登录后，无论是跳转到哪一个页面，都需要菜单导航栏，因此我们可以说，这个用户在登录之后需要一直使用同一个菜单导航栏，所以菜单导航栏需要做成一个全局且是共享并且是单例的组件。因此我们可以将这个组件存在Vuex中的store中，实现这个组件成为单例，全局，且共享的组件。 store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use
微人事项目学习之部门管理
人生错觉
03-10 553
部门管理功能：搜索、添加部门、删除部门
微人事vhr 后端篇 -1
yu77777777777的博客
05-21 391
只记录自己不熟的，不适合他人查阅！！ 项目搭建 略 mybatis逆向工程 略 1.JWT config / security / compeonet / JwtTokenUtil 前端传用户名和密码 ，后端收到后，先校验，有错就返回错误信息，无错就生成token返回，前端将token存到请求头中，以后每次请求都带着token来，后端有jwt的拦截器，通过了才能访问接口 2.公共返回对象RespBean ...
SpringBoot + Vue 微人事项目(第五天)
最新发布
qq_45709416的博客
08-17 152
菜单数据不仅仅是要在Home.vue，Login.vue里面使用，还需要在很多很多vue页面里面使用，所以要放在一个所有vue文件都可以访问的地方。Home.vue和Login.vue里面的data只能在各自的页面使用 ，这些data都是局部变量，我要做的事是把加载后的数据放到一个公共的地方，不管是Home.vue还是其他组件都能访问到的地方，放到sessionStorang和localStorage里面是可以访问到的，但是还可以放到vuex什么时候需要状态管理？
SpringBoot + Vue前后端分离 微人事项目 权限管理思路（第六天）
qq_45709416的博客
08-17 151
但是，如果用户非这样操作，进入到一个空白的页面，用户体验不好，此时，我们可以使用 Vue 中的前置路由导航守卫，来监听页面跳转，如果用户想要去一个未获授权的页面，则直接在前置路由导航守卫中将之拦截下来，重定向到登录页，或者直接就停留在当前页，不让用户跳转，也可以顺手再给用户一点点未获授权的提示信息。此时，如果没有做任何额外的处理的话，用户确实可以通过直接输入某一个路径进入到系统中的某一个页面中，但是，不用担心数据泄露问题，因为没有相关的角色，就无法访问相关的接口。
微人事（三）后端权限管理（访问策略）
一蓑烟雨任平生
12-28 667
权限管理:权限管理的主力是在后端，前端是做不了权限管理的，由于有抓包工具（如：Fiddler、Burpsuite等）可以伪造前端的参数，所以前端就算做了权限管理，也是不安全的。因此，前端注重的是用户体验，后端才是正在的主力。 （一）对Hr.java的改造 1.增加了roles属性，用于保存用户所拥有的角色 2.增加了getAuthorities()方法，用户将用户所拥有的角色放入SpringSecurity中 public class Hr implements UserDetails { private
菜鸟修行之路----项目实战：微人事项目之项目概述
sumeriancer的博客
04-12 4194
菜鸟修行之路----项目实战：微人事项目之项目概述 ​ 修行之路艰辛，与君共勉！！ ​ 从即日起，通过对于github上非常热门的前后端分离开发的开源项目：微人事管理系统的全面学习以及自主手写代码实现。 ​ 完成对于Spring Boot以及前后端分离开发的学习。继续加油！！！。 1.前后端分离技术 前后端分离开发，简单来说，就是前端代码与后端服务器代码分开来写。 传统web开发...
微人事项目学习笔记
一天无聊
08-22 3907
文章目录微人事项目学习笔记1. 准备工作1.1 数据库准备1.2 Vue 准备1.3 Spring Boot 准备2. 前后端配置2.1 后端返回消息对象定义2.2 Spring Security 设置统一返回数据2.3 前端统一拦截响应请求内容2.4 前端登录接口数据处理2.4 跨域问题3. 接口调用3.1 请求接口封装3.2 关于动态路由菜单的实现3.2.1 **数据库设计**3.2.2 **后端查询**3.2.3 **前端渲染数据**3.3 后端权限控制3.3.1 数据库设计与查询3.3.2 Spr
springboot+微人事学习记录（一）
quitebrilliant的博客
01-26 1699
Springboot 学习（第一天） 前言 本人一个JAVA爱好者，但是也是一个小白，为了让自己的学习更加深入，也为了不让自己学了后面，忘了前面，在江南一点雨老师的提点下，我准备开启我的博客学习方式。由于是第一次，有些记录的不好地方，希望各位大神多多提点宝贵意见和建议！谢谢大家！ 学习路线 ...
SpringBoot+Vue微人事实战---项目搭建（1）
今夕何夕的博客
02-10 5108
1、项目来源 在Github上发现了一个基于SpringBoot+Vue技术栈的微人事全栈项目。俗话说：不吃好的不吃贵的，今天整俩嘎嘣脆的，一瞧这项目13k的star，挺好，咱今天就从零开始造它！ 2、项目技术栈 该项目采用前后端分离技术开发。 前端使用ElementUI+Vue构建SPA，后端则用简单易上手的SpringBoot。SPA是指单页面应用，所有的HTML、CSS、JS都通过单个页面...
Go语言学习笔记 - 雨痕
"Go学习笔记 By 雨痕" 这是一份由雨痕编写的Go语言学习笔记，详细记录了作者在学习Go语言过程中的心得和知识点。笔记内容涵盖Go语言的基础到高级特性，适合已经观看过无闻大神视频并希望进一步巩固和深入理解Go语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值