人力资源管理后台 === 主页模块

news2025/2/23 4:00:32

目录

1.获取用户资料在Vuex中共享

2.显示用户头像和用户名

3.处理头像为空的场景

4.处理token失效的问题

5.调整下拉菜单,实现退出登录

6.修改密码功能实现

6.1-修改密码-弹出层

6.2-修改密码-表单结构

6.3-修改密码-表单校验

6.4-修改密码-确定和取消

7. 清理组件和路由

8.创建项目所需要的组件和路由

9.扩展-解析左侧菜单原理

10. 左侧菜单显示项目logo


1.获取用户资料在Vuex中共享

登录成功跳转到主页之后,可以获取用户资料,获取的资料在Vuex中共享,这样用户就可以很方便的获取该信息

  • 获取流程

image.png

  • 在什么位置获取?

image.png

之前在导航守卫的位置,可以确定已经有了token,这个位置获取资料更佳,因为导航守卫在页面发生跳转时出发,这时不论你从何时何地进来,如果发现你没获取资料,都可以非常清楚直观的获取资料。判断条件也使得不会发生重复的加载。

  • 封装获取用户资料的API-代码位置(src/api/user.js)
export function getUserInfo() {
  return request({
    url: '/sys/profile'
  })
}
  • Vuex中声明用户信息状态,修改用户信息的mutations, 和获取用户信息的action-代码位置(src/store/modules/user.js)
const state = {
  token: getToken(),
  userInfo: {} // 这里有一个空对象,为了放置后面取数据报错
}

const mutations = {
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo
  }
}
const actions = {
  async getUserInfo (context) {
    const result = await getUserInfo()
    context.commit("setUserInfo", result)
  }
}
  • 通过getters声明userId(快捷访问)-代码位置(src/store/getters.js)
const getters = {
  userId: state => state.user.userInfo.userId,
}
export default getters

  • 在权限拦截处调用action-代码位置(src/pemission.js)
import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'

/**
 *前置守卫
 *
*/

const whiteList = ['/login', '/404']
router.beforeEach(async (to, from, next) => {
  nprogress.start()
  if (store.getters.token) {
    // 存在token
    if (to.path === '/login') {
      // 跳转到主页
      next('/') // 中转到主页
      // next(地址)并没有执行后置守卫
      nprogress.done()
    } else {
      // 判断是否获取过资料
      if (!store.getters.userId) {
        await store.dispatch("user/getUserInfo")
      }
      next() // 放行
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login') // 中转到登录页
      nprogress.done()
    }
  }
})

/** *
 * 后置守卫
 * **/
router.afterEach(() => {
  nprogress.done()
})

有同学会问,为什么用户信息不做持久化管理呢? 不需要缓存吗? 用户信息不同于token,token是当前用户的唯一标识,在几个小时内都是有效的,但是用户信息可能会进行修改或者发生变化,所以用户信息在一般的项目或者业务中不进行缓存。

2.显示用户头像和用户名

image.png

首先解析一下顶部组件的内部位置

image.png

因为上个小节,将资料已经放到了Vuex中,可以通过getters开放属性,直接在组件中引用即可

  • Vuex中使用getters暴露属性-代码位置(src/store/getters.js)
const getters = {
  token: state => state.user.token,
  userId: state => state.user.userInfo.userId,
  avatar: state => state.user.userInfo.staffPhoto, // 头像
  name: state => state.user.userInfo.username, // 用户名称
}
export default getters

  • 在Navbar组件引入getters-代码位置(src/layout/components/NavBar.vue)
export default {
  computed: {
    // 引入头像和用户名称
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  },
}
  • NavBar组件显示用户名和头像-代码位置(src/layout/components/NavBar.vue)
<div class="avatar-wrapper">
          <!-- 头像 -->
          <img :src="avatar" class="user-avatar">
          <!-- 用户名称 -->
          <span class="name">{{ name }}</span>
          <!-- 图标 -->
          <i class="el-icon-setting" />
</div>
  • 设置头像和用户名的样式-代码位置(src/layout/components/NavBar.vue)
      .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        display: flex;
        align-items: center;
        .name {
          //  用户名称距离右侧距离
          margin-right: 10px;
          font-size: 16px;
        }
        .el-icon-setting {
          font-size: 20px;
        }
        .user-avatar {
          cursor: pointer;
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
  

3.处理头像为空的场景

不是所有用户都有头像的,当用户没有头像时要显示对应的内容

image.png

  • 条件判断-代码位置(src/layout/components/NavBar.vue)
<div class="avatar-wrapper">
          <!-- 头像 -->
          <img v-if="avatar" :src="avatar" class="user-avatar">
          <span v-else class="username">{{ name?.charAt(0) }}</span>
          <!-- 用户名称 -->
          <span class="name">{{ name }}</span>
          <!-- 图标 -->
          <i class="el-icon-setting" />
        </div>
  • 样式
 .username {
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 50%;
          background: #04c9be;
          color: #fff;
          margin-right: 4px;
        }

这里我们使用了可选链操作符 ?, 它的意思是当?前面的变量为空时,它不会继续往下执行,防止报错,如
null?.name,但是我们当前的版本不支持?的编译,所以需要升级一下对应的版本

$ npm i vue@2.7.0  vue-template-compiler@2.7.0   # 升级vue版本️

升级完成后,重启服务就可以了。

4.处理token失效的问题

token是有时效性的,当token超时,我们需要做一下处理

image.png

  • 请求拦截器处理-代码位置(src/utils/request.js)
// 响应拦截器
service.interceptors.response.use(..., async(error) => {
  if (error.response.status === 401) {
    Message({ type: 'warning', message: 'token超时了' })
    // 说明token超时了
    await store.dispatch('user/logout') // 调用action 退出登录
    //  主动跳到登录页
    router.push('/login') // 跳转到登录页
    return Promise.reject(error)
  }
  // error.message
  Message.error(error.message)
  return Promise.reject(error)
})
  • 实现Vuex的登出action-代码位置(src/store/modules/user.js)
const actions = {
  // 退出登录的action
  logout(context) {
    context.commit('removeToken') // 删除token
    context.commit('setUserInfo', {}) // 设置用户信息为空对象
  }
}

5.调整下拉菜单,实现退出登录

image.png

退出登录流程

image.png

  • Navbar中点击退出登录-代码位置(src/layout/components/NavBar.vue)
  <el-dropdown-item @click.native="logout">
          <span style="display:block;">登出</span>
  </el-dropdown-item>
  • 退出方法-代码位置(src/layout/components/NavBar.vue)
export default  {
  methods: {
     async logout() {
      // 调用退出登录的action
      await this.$store.dispatch('user/logout')
      this.$router.push('/login')
    },
  }
}

注意:native修饰符表示给组件的根元素注册事件️

6.修改密码功能实现

  • 整体流程

image.png

image.png

6.1-修改密码-弹出层

image.png

  • 注册修改密码点击事件-代码位置(src/layout/components/NavBar.vue)
<!-- prevent阻止默认事件 -->
 <a target="_blank" @click.prevent="updatePassword">
    <el-dropdown-item>修改密码</el-dropdown-item>
 </a>
  • 声明变量和方法控制弹层显示-代码位置(src/layout/components/NavBar.vue)
export default {
  data() {
    return  {
      showDialog: false
    }
  },
  methods: {
    updatePassword() {
      this.showDialog = true
    }
  }
}
  • 放置弹层组件-代码位置(src/layout/components/NavBar.vue)

    sync修饰符可以接收子组件传递事件和值

    会被扩展为::visible='visible' @update:visible="val => visible = val"

    当子组件关闭时,会更新 visible 的值时 this.$emit('update:visible', false)

append-to-body

        弹出框的定位方式,默认是body,如果设置为true,则会在body下创建弹出框,如果设置为false,则会在当前组件下创建弹出框。

如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 append-to-body 属性。
正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套
Dialog 的场景,我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。

 

    <!--放置 dialog
    sync修饰符可以接收子组件传递事件和值
    会被扩展为::visible='visible' @update:visible="val => visible = val"
    当子组件关闭时,会更新 visible 的值时 this.$emit('update:visible', false)
    -->
    <!--   append-to-body
        弹出框的定位方式,默认是body,如果设置为true,则会在body下创建弹出框,如果设置为false,则会在当前组件下创建弹出框。
    -->
    <el-dialog
      width="500px"
      title="修改密码"
      :visible.sync="showDialog"
      append-to-body
    >
    </el-dialog>

6.2-修改密码-表单结构

image.png

  • 表单结构-代码位置(src/layout/components/NavBar.vue)
  <el-form  label-width="120px" >
        <el-form-item label="旧密码" >
          <el-input  show-password size="small" />
        </el-form-item>
        <el-form-item label="新密码" >
          <el-input  show-password size="small" />
        </el-form-item>
        <el-form-item label="重复密码" >
          <el-input  show-password size="small" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" >确认修改</el-button>
          <el-button size="mini" >取消</el-button>
        </el-form-item>
      </el-form>

6.3-修改密码-表单校验

image.png

  • 声明数据和规则-代码位置(src/layout/components/NavBar.vue)
export default {
  data () {
    return  {
     passForm: {
        oldPassword: '', // 旧密码
        newPassword: '', // 新密码
        confirmPassword: '' // 确认密码字段
      },
     rules: {
        oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }], // 旧密码
        newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }, {
          trigger: 'blur',
          min: 6,
          max: 16,
          message: '新密码的长度为6-16位之间'
        }], // 新密码
        confirmPassword: [{ required: true, message: '重复密码不能为空', trigger: 'blur' }, {
          trigger: 'blur',
          validator: (rule, value, callback) => {
            // value
            if (this.passForm.newPassword === value) {
              callback()
            } else {
              callback(new Error('重复密码和新密码输入不一致'))
            }
          }
        }] // 确认密码字段
      }
    }
  }
}
  • 绑定属性-代码位置(src/layout/components/NavBar.vue)
      <el-form ref="passForm" label-width="120px" :model="passForm" :rules="rules">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="passForm.oldPassword" show-password size="small" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passForm.newPassword" show-password size="small" />
        </el-form-item>
        <el-form-item label="重复密码" prop="confirmPassword">
          <el-input v-model="passForm.confirmPassword" show-password size="small" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" >确认修改</el-button>
          <el-button size="mini" >取消</el-button>
        </el-form-item>
      </el-form>

6.4-修改密码-确定和取消

  • 确定和取消流程

image.png

  • 封装修改密码方法-代码位置(src/api/user.js)
/**
 * 更新密码
 * **/
export function updatePassword(data) {
  return request({
    url: '/sys/user/updatePass',
    method: 'put',
    data
  })
}

  • 确定方法-代码位置(src/layout/components/NavBar.vue)
// 确定
    btnOK() {
      this.$refs.passForm.validate(async isOK => {
        if (isOK) {
          // 调用接口
          await updatePassword(this.passForm)
          this.$message.success('修改密码成功')
          this.btnCancel()
        }
      })
    },
  • 取消方法-代码位置(src/layout/components/NavBar.vue)
btnCancel() {
      this.$refs.passForm.resetFields() // 重置表单
      // 关闭弹层
      this.showDialog = false
}
  • 监听弹层关闭事件
    <el-dialog @close="btnCancel" width="500px" title="修改密码" :visible.sync="showDialog" >

有同学有疑惑,不是用了.sync修饰符吗?可以直接关闭弹层,为何还要监听close事件,这是因为sync修饰符只能关闭弹层,我们还需要将表单进行重置,因为你之前打开弹层可能修改了一半或者残留一些校验信息,再打开的时候这些信息应该都被重置,所以这里用监听事件的方式再重置一下表单,保证功能的体验和完整性。

7. 清理组件和路由

主页功能开发完了,我们要清理一下模板中残余文件

image.png

image.png

  • 路由只保留登录-主页-404
  • 请求模块只保留user.js模块

8.创建项目所需要的组件和路由

人力资源项目需要这些模块

  ├── approval            # 审批管理
  ├── attendance          # 考勤管理
  ├── department          # 组织架构
  ├── employee            # 员工管理
  ├── permission          # 权限管理
  ├── role                # 角色管理
  ├── salary              # 工资管理
  ├── social              # 社保管理

  • 创建模块

image.png

大家可以直接从当天课程的素材中拷贝已经准备好的路由/组件

组件结构样例
 

image.png


路由模块样例
 

image.png


路由的统一导入
 

image.png


在src/router/index.js中集成到当前路由中

image.png

9.扩展-解析左侧菜单原理

image.png

左侧菜单的数据来源于路由模块的信息, 会根据路由信息的hidden属性来判断是否显示该路由信息到菜单,
菜单属性中的图表和标题来源于路由meta中的icon和title属性

  • 分析过程

sidebar组件引入路由信息
 

image.png


循环渲染路由信息
 

image.png


sidebarItem组件根据条件渲染-传递icon和title属性给item组件
 

image.png


item组件接收icon和title属性,使用函数型组件完成渲染

image.png

logo有两种展示形态,当菜单展开时,显示大图,当菜单折叠时,显示小图

image.png

image.png

  • 通过settings.js的设置,将logo显示出来-代码位置(src/settings.js)
module.exports = {

  title: '人力资源后台管理系统',

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true
}

  • 调整logo的页面结构-代码位置(src/layout/components/Sidebar/Logo.vue)
<template>
  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
    <transition name="sidebarLogoFade">
      <router-link key="collapse" class="sidebar-logo-link" to="/">
        <img src="@/assets/common/logo.png" class="sidebar-logo">
      </router-link>
    </transition>
  </div>
</template>
  • 调整logo样式-代码位置(src/layout/components/Sidebar/Logo.vue)
<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;

    & .sidebar-logo {
      width: 140px;
      vertical-align: middle;
      margin-right: 12px;
    }

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  }

  &.collapse {
    .sidebar-logo {
      margin-right: 0px;
      width: 32px;
      height: 32px;
    }
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1260642.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学习知识回顾随笔

文章目录 如何远程连接MySQL数据库1.创建用户来运行&#xff0c;此用户从任何主机连接到mysql数据库2.使用IP地址来访问MySQL数据库 如何远程访问Django项目Web应用什么是Web应用应用程序的两种模式Web应用程序的优缺点 HTTP协议&#xff08;超文本传输协议&#xff09;简介HTT…

京东平台双11全品类完整销售数据回顾(京东大数据-京东数据采集-京东数据接口)

今年的双十一&#xff0c;大家依然没有等到各大平台的官方战报。 所以&#xff0c;对于绝大部分品牌、商家、咨询公司乃至有数据研究需求的小伙伴来说&#xff0c;很难了解到今年大促消费者的真实消费水平。 为此&#xff0c;鲸参谋简单整理出了10个京东大类目&#xff08;含5…

享受更健康的睡眠,dido P1S智能手环体验

如今很多人都有严重的失眠困扰&#xff0c;像是因为平时工作非常繁忙&#xff0c;每天回到家后已经很晚了&#xff0c;或者是睡前长时间刷手机&#xff0c;躺在床上辗转反侧&#xff0c;晚上就很难入睡&#xff0c;脑海中一片混乱&#xff0c;休息的质量就很差。我最近尝试了一…

功率信号源可输出波形有哪些

功率信号源是一种能够产生高功率输出信号的电子设备。它常用于实验室、工业生产以及各种应用领域中&#xff0c;如无线通信、音频放大和激光器驱动等。功率信号源可以输出多种不同的波形&#xff0c;下面将介绍一些常见的输出波形类型。 直流&#xff08;DC&#xff09;波形&am…

影响机器视觉测量精度的因素有哪些?

精度测量取决于分辨率 在机器视觉测量中提供高精度和低不确定度的决定性因素是获取的图像的分辨率。在这种情况下&#xff0c;术语分辨率 &#xff08;或图像分辨率&#xff09;意味着以实际单位的单个像素的大小。简而言之&#xff0c;如果一个摄像机传感器在水平方向上包含…

IP代理的潜力有多大?做跨境一定要会用!

IP说简单不简单&#xff0c;说复杂也不复杂&#xff0c;打个比方&#xff0c;IP就好比我们上网的一个门牌号&#xff0c;每家每户都会有一个门牌号&#xff0c;而且是唯一的地址。而代理IP&#xff08;代理服务器&#xff09;是一个位于中间的服务器&#xff0c;充当客户端和目…

iptables拒绝所有端口放开特定端口方法流程,iptables允许ping和拒绝ping、hosts阻止所有ip指定放开ip方法流程

文章目录 说明iptables拒绝所有端口放开特定端口方法流程拒绝所有端口允许特定端口临时规则写入配置文件永久生效 iptables允许ping和拒绝ping禁止允许ping说明内核参数设置禁止允许 防火墙设置禁止允许 禁止ping允许ping外部ping通虚拟机内部虚拟机内部使用ping规则详细 hosts…

全国重点文物保护单位数据第1-8批数据,附数据可视化

今天分享的第二个数据是全国重点文物保护单位数据&#xff0c;涉及全国重点文物保护单位第一批至第八批&#xff0c;数据格式为shpcsv格式&#xff0c;以点为几何类型&#xff0c;已经经过精加工&#xff0c;可直接使用。 涉及字段列表如下&#xff1a; 序号字段名称字段说明…

java学习part16代码块

108-面向对象(高级)-类的成员之四&#xff1a;代码块_哔哩哔哩_bilibili 1. 代码块只能static修饰&#xff0c;不存在权限修饰。 因为它是在某种情况下自动执行的&#xff0c;不存在调用的情况。 非静态代码块随着对象创建自动执行&#xff08;一个对象执行一次&#xff09;…

Python实现WOA智能鲸鱼优化算法优化XGBoost分类模型(XGBClassifier算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 鲸鱼优化算法 (whale optimization algorithm,WOA)是 2016 年由澳大利亚格里菲斯大学的Mirjalili 等提…

ubuntu/vscode下的c/c++开发之-CMake语法与练习

Cmake学习 1 语法特性介绍 基本语法格式&#xff1a;指令(参数 1 参数 2...) 参数使用括弧括起参数之间使用空格或分号分开 指令是大小写无关的&#xff0c;参数和变量是大小写相关的 set(HELLO hello.cpp) add_executable(hello main.cpp hello.cpp) ADD_EXECUTABLE(hello ma…

Django总结

文章目录 一、Web应用Web应用程序的优点Web应用程序的缺点应用程序有两种模式C/S、B/S C/S 客户端/服务端局域网连接其他电脑的MySQL数据库1.先用其他电脑再cmd命令行ping本机ip2.开放MySQL的访问 B/S 浏览器/服务端基于socket编写一个Web应用 二、Http协议1.http协议是什么2.h…

NX二次开发UF_CURVE_ask_proj_curves 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_proj_curves Defined in: uf_curve.h int UF_CURVE_ask_proj_curves(tag_t proj_curve_feature, int * n_curve_refs, tag_t * * curve_refs ) overview 概述 Return…

【无标题】动手学深度学习_现代神经网络_未完

这里写目录标题 深度学习之前的网络 AlexNetAlexNet得到了竞赛冠军AlexNet架构Alex net更多细节数据增强 VGGNiN知识补充flop暂退法 drop_out 深度学习之前的网络 1、核方法 机器学习 SVM现在还是很广泛的使用&#xff0c;因为对调参的需求不那么大&#xff0c;对调参不太敏感…

IP代理的巨大潜力,为什么跨境业务需要它?

IP说简单不简单&#xff0c;说复杂也不复杂&#xff0c;打个比方&#xff0c;IP就好比我们上网的一个门牌号&#xff0c;每家每户都会有一个门牌号&#xff0c;而且是唯一的地址。而代理IP&#xff08;代理服务器&#xff09;是一个位于中间的服务器&#xff0c;充当客户端和目…

GPT还远远不是真正的智能

GPT是一个基于深度学习的自然语言处理模型&#xff0c;它可以生成逼真的文本。虽然GPT在生成文本方面取得了显著的进展&#xff0c;但它并不具备真正的智能。GPT是通过训练模型来学习语言模式&#xff0c;它不具备理解、推理、判断和主动学习的能力。它只是根据已有的语料库生成…

解决git与huggingface项目下载速度慢或者失败的问题

git clone 项目报错 比如使用git clone 下载项目&#xff1a; git clone https://github.com/ChuRuaNh0/FastSam_Awsome_TensorRT.git有时候会报以下错误&#xff1a; fatal: unable to access ‘https://github.com/xxx.git/’: Failed to connect to github.com port 443 …

JUC下常用的类

一、Semaphore 信号量 new Semaphore(10) 可以把他理解成停车场&#xff0c;最多停10辆车&#xff0c;多个车进来如果满了就去排队&#xff0c;车走了&#xff0c;车位就空出来了&#xff0c;排队的线程就可以进来主要下面2个方法 Acquire获取锁&#xff1a;通过CAS原子性减1&…

mobaxterm 设置文本编辑器、上传文件 、下载文件、修改文件夹或者文件权限

前言 自带的编辑如下 功能比较弱&#xff0c;我们可以设置外部编辑器为默认的编辑器 设置编辑器 设置sh文件的默认编辑器 我们可以在windows上新建一个1.sh文件 右键-属性 设置默认编辑器&#xff1a;点击更改 选择vscode编辑器 mobaxterm用vscode打开文件进行编辑 右键…

蓝桥杯day01——根据给定数字划分数组

题目描述 给你一个下标从 0 开始的整数数组 nums 和一个整数 pivot 。请你将 nums 重新排列&#xff0c;使得以下条件均成立&#xff1a; 所有小于 pivot 的元素都出现在所有大于 pivot 的元素 之前 。所有等于 pivot 的元素都出现在小于和大于 pivot 的元素 中间 。小于 piv…