毕设人力资源系统开发日记——第四天

最新推荐文章于 2024-10-03 16:28:10 发布

明先生OvO

最新推荐文章于 2024-10-03 16:28:10 发布

阅读量668

点赞数 23

文章标签：课程设计

本文链接：https://blog.csdn.net/m0_67963390/article/details/142569003

版权

书接上文，我们完成了登出功能后，接下来的工作就是装修主页了。所以今日份的任务是，用户修改密码的实现，侧边栏的设计和侧边栏路由跳转功能。

一. 修改密码功能实现

1. 设计思路

修改密码功能与登出一致，是在用户名旁边的下拉菜单中实现。

这里我们的设计思路是，点击菜单后出现一个弹出框，需要输入三个密码项，输入后需要进行校验，校验成功后点击确定，触发修改密码的接口，这样就可以实现该功能了。

2. 代码实现

2.1 使用Element组件创建结构

弹窗结构和登录页类似，也是el-form的表单结构，需要注意表单的四大属性，:model；：rules；prop；v-model。:model 是单向绑定表单对象；:rules 是绑定校验规则；prop 是关联表单对象的属性；v-model 是双向绑定表单对象属性。四个属性缺一不可。

<!-- 放置弹出层 -->
    <el-dialog
      v-model="showDialog"
      @close="btnCancel"
      title="修改密码"
      width="500px"
    >
      <el-form
        ref="passwordForm"
        :model="passForm"
        :rules="passwordRules"
        label-width="120px"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="passForm.oldPassword"
            size="small"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passForm.newPassword"
            size="small"
            style="width: 350px"
            show-password
          />
        </el-form-item>
        <el-form-item label="重复密码" prop="confirmPassword">
          <el-input
            v-model="passForm.confirmPassword"
            autocomplete="off"
            size="small"
            style="width: 350px"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="btnCancel">取消</el-button>
          <el-button type="primary" @click="btnOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

2.2 创建表单相关属性

弹窗的显示隐藏是通过点击修改密码实现的，所以这里使用 showDialog 作为弹窗显示属性。通过组件的点击事件实现。

<el-dropdown-item @click="showDialog = true"> 修改密码 </el-dropdown-item>

然后是表单的关联对象，使用:model进行单向绑定。

/* 3.修改密码弹出层及表单渲染 */
//3.1 弹出层的展示
let showDialog = ref(false);
//3.2 关联表单
let passForm = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

2.3 创建校验规则

由于本人学识尚浅，想不到高大上的校验规则，所以先用简单的试试。。。OvO

在二次输入密码的校验时，默认校验规则无法满足需求，所以我们使用自定义校验 validator，要注意的是，校验要传入 callback 回调函数作为结束，可以理解为拦截器的 next(),和vuex的context()上下文，没有的话校验是无法结束的。

//3.3 校验规则
let passwordRules = {
  oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 8, max: 16, message: "长度应在 8 到 16 个字符", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    {
      validator:(rule,value,callback)=>{
        if (passForm.newPassword===value) {
          callback()
        }else{
          callback(new Error('两次密码输入不一致'))
        }
      },trigger:'blur'
    },
  ],
};

2.4 校验完成后调用接口

这一步就很熟悉了，查阅接口文档就好了，记得要使用ELement组件给用户一个成功与否的提示。

//3.修改用户密码接口
export let updatePassword = (data) => {
    return request({
        url: '/api/sys/user/updatePass',
        method: 'put',
        data
    })
}

成功后，还需要清空表单数据，这里我们查阅组件文档，使用了 resetFields() 方法

//3.4 点击确定按钮方法
let passwordForm = ref();
let btnOk = () => {
  passwordForm.value.validate(async (isok) => {
    if (isok) {
      await updatePassword(passForm);
      passwordForm.value.resetFields();
      ElMessage({
        message: "修改密码成功",
        type: "error",
        plain: true,
      });
      showDialog.value = false;
    }
  });
};
//点击取消按钮方法
let btnCancel = () => {
  passwordForm.value.resetFields();
  showDialog.value = false;
};

二. 侧边栏结构及导航设计实现

1. 设计思路

如图，要实现侧边栏的导航效果，而且还需要实现点击进行路由跳转。我们原先参考vue-admin模板，但是太难了。。。OwO，看不懂一点，但还是慢慢磨出了个究极简化版。

这里的实现思路是，通过 v-for 遍历路由规则，筛选出需要的路由进行渲染，图标和标题存入路由元信息 meta 中，通过赋值显示。

2. 代码实现

2.1 侧边栏结构实现

因为写出来代码量太大，使用先进行了组件拆分，通过 v-for 遍历路由，同时将路由信息 route 进行传值。

<template>
  <div class="sidebar">
    <div class="sidebar-logo">logo</div>
    <el-menu default-active class="el-menu-vertical-demo">
      <sidebarItem
        v-for="route in routes"
        :key="route.path"
        :item="route"
        :base-path="route.path"
      />
    </el-menu>
  </div>
</template>

//1.获取路由元信息
/* 
    1.获取路由实例
    import { useRouter } from "vue-router";
    let route = useRouter();
    2.获得当前路由,是一个由ref封装的响应式对象
    route.currentRoute
*/
import { useRouter } from "vue-router";
let route = useRouter();


let routes = computed(() => {
  return route.options.routes;
});

因为目前我们设计的路由规则有五个，所以是会渲染出五个导航项，但我们需要的只有首页和 department 组织，所以这里使用 hidden 属性，把不需要渲染的路由进行隐藏，通过v-if 实现。

<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children, item)">
      <router-link :to="item_path">
        <el-menu-item :index="item_path">
          <el-icon><component :is="item_icon" /></el-icon>
          <template #title>
            {{ item_title }}
          </template>
        </el-menu-item>
      </router-link>
    </template>
  </div>
</template>

对于父组件传递过来的 route 路由信息和 path 路径，使用defineProps接收，这样就可以通过方法将里面的信息进行解构。这里我们参照大佬的模板，使用了 hasOneShowingChild 方法。

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  House,
  OfficeBuilding,
} from "@element-plus/icons-vue";

import { computed, reactive, ref } from "vue";
import router from "@/router";

//接收父子通信
defineProps(["item", "base-path"]);

//1.渲染组件
let item_title = reactive({});
let item_path = reactive({});
let item_icon = ref('');

let hasOneShowingChild = (children, parent) => {
  item_title = children[0].meta.title;
  item_path = parent.path;
  item_icon=children[0].meta.icon)
  return true;
};

该方法传入的 children 为子路由信息，parent 为路由信息route，将路由元信息meta进行拆分赋值，这样就可以实现侧边栏结构了。

最后要实现的是动态加载图标，因为Element图标是标签形式，所以我们需要使用 Vue 自带的动态组件 component 来实现，里面的 is 属性可以赋值为需要创建的标签名，这样就可以实现动态创建图标了。

<el-icon><component :is="House" /></el-icon>
//等于以下代码
<el-icon><House /></el-icon>

2.2 侧边栏路由跳转实现

这部分比较简单，直接使用 router-link 组件就可以实现，当然也可以通过编程式路由导航，说人话就是点击事件跳转。

<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children, item)">
      <router-link :to="item_path">
        <el-menu-item :index="item_path">
          <el-icon><component :is="item_icon" /></el-icon>
          <template #title>
            {{ item_title }}
          </template>
        </el-menu-item>
      </router-link>
    </template>
  </div>
</template>