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

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

明先生OvO

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

阅读量842

点赞数 25

文章标签：课程设计

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

版权

书接上文，我们已经实现登录跳转到主页的基本操作，今天的任务是使用Element组件优化部分页面，获取用户相关数据并渲染到顶部导航栏，以及完成登出的相关功能。

一. 获取用户数据并渲染

1.实现思路

获取数据渲染的操作基本上都是一种套路，创建API接口，前端页面方法触发 axios 发起请求，获取到数据后进行筛选，将需要的数据通过 v-bind 或者插值表达式进行渲染。

2. 代码实现

2.1 创建API接口

接口都存放在API文件夹下，写接口时要根据接口文档来写。

//2.获取用户数据接口
export let getUserInfoApi = () => {
    return request({
        url: '/api/sys/profile'
        //接口默认method为get,所以可以省略
    })
}

2.2 触发接口获取数据

这里我们的设计为，页面一加载，就获取数据，所以需要使用 Vue3 的生命周期钩子 onMounted。同时，用户数据也不只是在头部导航栏使用，所以我们要存入 Pinia 仓库。综上，我们需要在 Pinia 中设计触发接口方法，由组件的 onMounted 来触发。

//2.主页加载后，根据token获取用户信息
async getUserInfo() {
    let userRes = await getUserInfoApi()
    this.userInfo = userRes,//存入status
},

/* 1.主页加载时触发方法，获取到数据并渲染 */
onMounted(() => {
  userStore.getUserInfo();
});

获取成功后会存入 Pinia 仓库，我们可以在浏览器的Vue插件中看到。

接下来就是数据的渲染过程，我们使用了计算属性 computed 。

//通过计算属性获取要渲染的数据
let username = computed(() => {
  return userStore.userInfo.username;
});
//用户头像
let staffPhoto = computed(() => {
  return userStore.userInfo.staffPhoto;
});

通过 v-bind 和插值表达式渲染数据。这里我们需要考虑一个情况，如果用户是无头像的，那么用户头像这里的结构会出现空缺，比较难看，所以我们采用了取用户名的第一个字，来组成头像，这里使用了字符串的 charAt() 截取方法。

<div class="navbar-user-data">
        <img
          v-if="staffPhoto"
          :src="staffPhoto"
          alt=""
          class="navbar-user-avatar"
        />
        <!-- 可选链操作符 -->
        <span v-else class="navbar-user-avatart">{{
          username?.charAt(0)
        }}</span>
        <div class="navbar-user-name">{{ username }}</div>
      </div>
    </div>

二. 前端结构优化

1. 实现思路

写到这里，我们发现主页的结构过于庞杂，将来我们还需要完成侧边栏的功能，所以需要进行组件拆分。我们先进行顶部导航栏的组件拆分。

2. 代码实现

2.1 创建相关组件

由于顶部导航栏 Navbar 是主页相关组件，而且是手写组件，不是通过路由来渲染的路由组件，所以直接存放在主页文件夹的组件合集里就可以了。

2.2 拆分导入组件

拆分完成后，通过组件导入使用。这样就简洁很多了。

//组件导入
import Navbar from "./components/Navbar.vue";

三. 用户登出功能

1. 实现思路

我们要实现功能的是，用户点击登出按钮时，触发登出接口，随后清除掉用户数据和 token，最后回退到登录页进行重新登录。实现套路也很熟悉了，设计接口，点击触发，路由跳转。

2. 代码实现

2.1 使用Element组件创建结构

这里我们使用了 Element-plus 的下拉表单组件，图标也使用的 icon 组件。

<!-- 下拉菜单 size改大小-->
        <el-dropdown trigger="click">
          <el-icon size="20px"><Setting /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click="logout">账号登出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

2.2 点击实现功能

同样在 Pinia 仓库创建登出方法，触发后给用户数据赋值一个空对象，也可以起到清除用户数据的效果。

//3.token失效后，需要清除token
        logout() {
            removeToken()
            this.userInfo = {}
        }

/* 2.登出方法 */
let logout = async () => {
  await userStore.logout();
  ElMessage({
    message: "账号退出成功，请重新登录",
    type: "success",
    plain: true,
  });
  router.replace("/login");
};