Vue3+Vant开发：个人信息管理

本文主要是介绍Vue3+Vant开发：个人信息管理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：Java
- 内容/作用：知识点/设计/实验/作业/练习
- 学习：Java
- 1、TabBar处理
- 2、未登录布局实现
- 3、已登录布局实现
- 4、宫格导航布局
- 5、消息通知与退出登录布局
- 6、处理页面显示状态
- 7、退出登录
- 8、展示当前登录用户信息
- 9、用户头像处理
- 10、优化设置Token
- 总结

课程名：Java

内容/作用：知识点/设计/实验/作业/练习

学习：Java

这里，我们主要实现个人信息的展示，以及实现个人信息管理的页面布局实现

1、TabBar处理

在个人信息管理页面的底部，我们发现有一组“标签导航栏”。

而且这一组“标签导航栏”在每个页面中都有。

那么我们应该怎样处理呢？
第一种方案：在每个页面中都创建一遍，但是这种做法比较麻烦，所以不建议这样做。

第二种方案：将其单独的封装成一个组件，这样每个页面中需要标签导航栏的时候，直接使用该组件就可以了。但是，这里我们也不建议这样做，因为，当我们切换到不同的页面的时候，这个组件都会重新被渲染加载，这样就会影响性能。

第三种方式：我们做一个父路由，把底部的标签导航栏放在父路由中，同时在父路由中留一个路由的出口。对应的其它页面都都渲染到这个路由出口的位置。这样，当我们进行页面的切换的时候，就不需要重新加载底部的“导航栏”了

在views目录下面创建layout目前，同时在该目录下面创建index.vue文件，该文件中的代码如下所示：

在下面代码中，先来指定子路由的出口，后面在对标签导航栏进行设置

<template><div class="layout-container"><!-- 子路由的出口 --><router-view></router-view><!-- 标签导航栏 --></div>
</template><script>
export default {};
</script><style></style>

配置路由规则：

const routes = [{path: "/login",name: "login",component: () => import("../views/login/index.vue"),},{ //配置路由path: "/",name: "layout",component: () => import("../views/layout/index.vue"),},
];

下面，我们返回到index.vue页面，开始制作底部的标签导航栏

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tabbar

<template><div class="layout-container"><!-- 子路由的出口 --><router-view></router-view><!-- 标签导航栏 --><van-tabbar v-model="active"><van-tabbar-item icon="home-o">标签</van-tabbar-item><van-tabbar-item icon="search">标签</van-tabbar-item><van-tabbar-item icon="friends-o">标签</van-tabbar-item><van-tabbar-item icon="setting-o">标签</van-tabbar-item></van-tabbar></div>
</template><script>
import { ref } from "vue";
export default {setup() {const active = ref(0);return {active,};},
};
</script><style></style>

在上面的代码中，我们直接把官方文档中的tabbar组件，拿过来了。v-model的取值为active,而active这个对象的默认值为0，也就是让人第一项导航栏进行选中。icon属性表示的就是导航栏中每一项的图标，下面把文字修改一下：

   <van-tabbar-item icon="home-o">首页</van-tabbar-item><van-tabbar-item icon="search">问答</van-tabbar-item><van-tabbar-item icon="friends-o">视频</van-tabbar-item><van-tabbar-item icon="setting-o">我的</van-tabbar-item>

下面把视频与我的图标更换一下：

<van-tabbar v-model="active"><van-tabbar-item icon="home-o">首页</van-tabbar-item><van-tabbar-item icon="search">问答</van-tabbar-item><van-tabbar-item icon="video-o">视频</van-tabbar-item><van-tabbar-item icon="contact">我的</van-tabbar-item></van-tabbar>

这里我们还是使用的vant中提供好的一些图标，当然这里我们也可以使用自定义图标，在官方文档中也已经明确的告诉我们怎样使用自定义图标了。

下面，我们要实现的就是，单击不同的项，展示出各自对应的页面。

首先在views目录中，创建对应的文件夹与文件。

创建home文件夹，在该文件夹中创建index.vue文件,表示首页，该文件的初步内容为：

<template><div>Home Page</div>
</template><script>
export default {};
</script><style></style>

my/index.vue

<template><div>我 的</div>
</template><script>
export default {};
</script><style></style>

video/index.vue

<template><div>视频</div>
</template><script>
export default {};
</script><style></style>

qa/index.vue

<template><div>问答</div>
</template><script>
export default {};
</script><style></style>

初步的页面创建好以后，下面需要配置对应的子路由了。router/index.js设置路由

{path: "/",name: "layout",component: () => import("../views/layout/index.vue"),children: [{path: "", //默认子路由(默认展示home页面)，只能有一个name: "home",component: () => import("../views/home/index.vue"),},{path: "/qa",name: "qa",component: () => import("../views/qa/index.vue"),},{path: "/video",name: "video",component: () => import("../views/video/index.vue"),},{path: "/my",name: "my",component: () => import("../views/my/index.vue"),},],},

在值的路由中，最开始设置了默认子路由。

下面返回到浏览器中，进行测试，发现默认展示的就是home组件中的内容，但是当我们单击tabbar中的每一项的时候，还没有进行切换。

原因是，这里我们需要给tabbar开启路由功能。

返回到views/layout/index.vue页面中。

  <van-tabbar route v-model="active"><van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item><van-tabbar-item icon="search" to="/qa">问答</van-tabbar-item><van-tabbar-item icon="video-o" to="/video">视频</van-tabbar-item><van-tabbar-item icon="contact" to="/my">我的</van-tabbar-item></van-tabbar>

第一步：给tabber组件添加了route属性，表示开启了路由的模式

第二步：给每个tabbar-item添加了to属性，指定了对应的路由地址、

这时候，可以发现浏览器进行测试。

2、未登录布局实现

下面修改views/my/index.vue文件中的代码，代码如下所示：

<template><div class="my-container"><div class="header not-login"><div class="login-btn" @click="this.$router.push('/login')"><img class="mobile-img" src="../../assets/mobile.png" alt="" /><span class="text">注册 / 登录</span></div></div></div>
</template><script>
export default {};
</script><style>
.my-container .header {height: 361px; background: url("../../assets/banner.png");background-size: cover;
}
.my-container .not-login { /* 没有登录的效果样式*/display: flex;justify-content: center;align-items: center;
}
.my-container .not-login .login-btn {display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.mobile-img {width: 132px;height: 132px;margin-bottom: 15px;
}
.text {font-size: 28px;color: #fff;
}
</style>

在上面的代码中，设置了基本的布局和对应的css样式。

到单击图标的时候，跳转到登录页面。

但是，这里当我们单击了图标，跳转到登录页面以后，又不想登录了，想返回上一页。

下面，返回到/login/index.vue文件

 <!-- 导航栏 --><van-nav-bar title="登录" class="page-nav-bar"><template #left><van-icon name="cross" size="18" /></template></van-nav-bar>

在导航栏中，使用了插槽，定义左侧的图标，为cross图标。

这里参考文档实现：

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/nav-bar

当在浏览器中展示的时候，发现cross图标的颜色与背景色基本上是一致的，所以看不清楚。

这里我们可以修改一下图标的颜色。

在styles/index.css文件中定义的是全局的样式，在这里给图标添加对应的样式：

.page-nav-bar {background-color: #3296fa;
}
.page-nav-bar .van-nav-bar__title {color: #fff;
} 
/* 图标的样式*/
.page-nav-bar .van-icon { color: #fff;
}

下面实现当单击cross图标的时候，进行返回的操作：

<van-nav-bar title="登录" class="page-nav-bar"><template #left><van-icon name="cross" size="18" @click="this.$router.back()" /></template></van-nav-bar>

这里通过$router.back方法进行返回操作。

3、已登录布局实现

在模板中，增加了登录后的布局

<template><div class="my-container"><!-- 未登录布局 --><div class="header not-login"><div class="login-btn" @click="this.$router.push('/login')"><img class="mobile-img" src="../../assets/mobile.png" alt="" /><span class="text">注册 / 登录</span></div></div><!-- 登录后的布局 --><div class="header user-info"><div class="base-info"><div class="left"><van-imagesrc="https://img.yzcdn.cn/vant/cat.jpeg"class="avatar"roundfit="cover"></van-image><span class="name">博学谷头条号</span></div><div class="right"><van-button size="mini" round>编辑资料</van-button></div></div><div class="data-stats"><div class="data-item"><span class="count">10</span><span class="text">头条</span></div><div class="data-item"><span class="count">10</span><span class="text">关注</span></div><div class="data-item"><span class="count">10</span><span class="text">粉丝</span></div><div class="data-item"><span class="count">10</span><span class="text">获赞</span></div></div></div></div>
</template>

对应的css样式

.user-info .base-info {height: 231px;padding: 70px 32px 23px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;
}
.user-info .left {display: flex;align-items: center;
}
.user-info .left .avatar {width: 132px;height: 132px;margin-right: 13px;border: 1px solid #fff;
}
.user-info .left .name {font-size: 16px;color: #fff;
}
.user-info .data-stats {/* background-color: #ccc; */display: flex;/* height: 130px; */
}
.user-info .data-stats .data-item {height: 130px;flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;
}
.user-info .data-stats .count {font-size: 36px;
}
.user-info .data-stats .text {font-size: 23px;
}

4、宫格导航布局

这块内容与上一小节的布局基本上一样的，所以这里可以采用自定义样式的方式来实现布局

但是这里我们主要是通过Vant中的Grid宫格组件来完成。

在"登录布局"后面实现宫格布局。这里把Grid组件基本使用的代码拷贝过来，测试一下：

<!-- 导航 --><van-grid><van-grid-item icon="photo-o" text="文字" /><van-grid-item icon="photo-o" text="文字" /><van-grid-item icon="photo-o" text="文字" /><van-grid-item icon="photo-o" text="文字" /></van-grid>

这里可以测试，看一下效果。

<!-- 导航 --><van-grid :column-num="2"><van-grid-item icon="photo-o" text="文字" /><van-grid-item icon="photo-o" text="文字" /></van-grid>

这里我们只保留两项内容，同时我们希望这两项内容平分这一行，所以这里指定了column-num这个属性。该属性的作用就是：自定义列数。这里指定是两列。

下面，我们换一下文字与图标：

<van-grid :column-num="2" clickable><van-grid-item icon="star-o" text="收藏" /><van-grid-item icon="clock-o" text="历史" /></van-grid>

指定了icon和text两个属性的值。

指定了样式：

.van-grid-item__icon {color: #eb5253;
}
.van-grid-item__text {font-size: 14px;
}

同时给van-grid添加了clickable属性，该属性的作用： 是否开启格子点击反馈.

这里可以看一下效果。

关于单击后，跳转到其它的页面，我们后面实现。

5、消息通知与退出登录布局

这里，我们使用cell这个单元格组件来完成布局。

  <van-cell title="消息通知" is-link /><van-cell title="小智同学" is-link /><van-cell title="退出登录" />

修改了title属性的取值，取消了其它无关的属性。同时添加了is-link属性，添加了该属性以后会在右侧出现箭头。

下面给退出登录添加对应的样式

<van-cell title="退出登录" class="logout-cell" />

对应的css样式。

.logout-cell {text-align: center;color: #d86262;margin-top: 9px;height: 120px;
}

6、处理页面显示状态

现在关于个人中心页面的整个结构的布局已经完成了，下面来实现对应的功能状态。

下面我们要获取到用户的登录信息，如果能够获取到展示的是图片以及博学谷头条这块内容，否则展示的是登录/注册这块内容。

我们可以从vuex容器中获取对应的用户信息。

下面修改views/my/index.vue文件中的代码

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {setup() {const store = useStore();const userState = computed(() => store.state.user);return {userState,};},
};
</script>

导入computed计算属性，从vuex中导入useStore。在setup函数中通过useStore获取store容器，然后从容器中获取user登录用户的信息。最终返回。

在模板中就可以进行判断

 <!-- 未登录布局 --><div v-if="!userState" class="header not-login"><!-- 登录后的布局 --><div v-else class="header user-info">

注意的是：退出按钮也是在用户登录以后才会展示出来。

 <van-cell v-if="userState" title="退出登录" class="logout-cell" />

下面可以进行测试，查看一下效果。

测试完成以后，还有一个问题需要处理一下，就是底部导航栏中的我的，如果是没有登录，这里让这一项显示“未登录”

下面返回到/layout/index.vue文件中，修改一下代码

import { ref, computed } from "vue";
import { useStore } from "vuex";
export default {setup() {const active = ref(0);const store = useStore();const userState = computed(() => store.state.user);return {active,userState,};},
};

对应模板中的代码修改：

 <van-tabbar-item icon="contact" to="/my">{{userState ? "我的" : "未登录"}}</van-tabbar-item>

现在，我们可以返回到浏览器端把localStoreage中的数据删除掉，查看一下对应的效果。

当我们重新登录以后，应该返回到原来的页面。

这里，我们在views/login/index.vue文件中。导入以前构建好的路由对象。

import { useStore } from "vuex";
import router from "../../router";

然后在登录成功以后返回到原来的页面

if (res.data.code === 0) {store.commit("setUser", res.data);Toast.success("用户登录成功");router.back(); //返回到原来的页面，这种写法不是很严禁，后面再来强调另外一种写法。// router.push("/my");} else {Toast.fail("用户名或密码错误");}

下面可以返回到浏览器中进行演示.

7、退出登录

当单击退出登录按钮的时候，完成用户的退出，这时展示的页面还是当前页面，但是展示的信息为：注册/登录，同时不在展示退出登录这个按钮。

首先给退出登录添加单击事件

 <van-cellv-if="userState"title="退出登录"class="logout-cell"@click="onLogout"/>

onLogout函数的定义如下所示：

import { computed } from "vue";
import { useStore } from "vuex";
import { Dialog } from "vant";
function useLogout() {const onLogout = () => {//1、退出提示Dialog.confirm({title: "确认退出吗？",}).then(() => {// on confirmconsole.log("确认执行这里");}).catch(() => {// on cancelconsole.log("取消执行这里");});//2、确认退出：清除登录状态（Vuex容器中的用户数据和本地存储中的用户数据）};return { onLogout };
}

在useLogout方法中返回了onLogout函数，在onLogout函数中，主要做两件事情：

第一：给出退出登录的提示

第二：当确认退出后，要清除登录状态。

在上面的代码中我们使用Dialog组件，给出相应的退出提示，所以这里先导入Dialog组件。

关于该组件可以参数官网：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/dialog

在这里我们选择的是“消息确认”这个效果，大家可以根据需要选择其他的效果。

在这里还要注意，在setup函数中要调用useLogout函数，并且进行解构返回。这样在模板中才能够使用onLogout

setup() {const store = useStore();const userState = computed(() => store.state.user);return {userState,...useLogout(), //调用useLogout函数，并且对返回的结果进行解构};},

下面，我们要实现的是第二步：

清除登录状态。

 setup() {const store = useStore();const userState = computed(() => store.state.user);return {userState,...useLogout(store),};},

在setup方法中，当调用useLogout方法的时候，传递store容器。

function useLogout(store) {const onLogout = () => {//1、退出提示Dialog.confirm({title: "确认退出吗？",}).then(() => {//2、确认退出：清除登录状态（Vuex容器中的用户数据和本地存储中的用户数据）store.commit("setUser", null);}).catch(() => {// on cancelconsole.log("取消执行这里");});};return { onLogout };
}·

在useLogout方法中接收传递过来的store容器，同时通过commit方法提交mutations，这里，对应的方法就是setUser方法，给该方法传递的值为null.

这样在store/index.js文件中的mutations中的setUser方法中，会将state.user的值设置为null,同时本地存储中的值也为null

这里可以进行测试。

8、展示当前登录用户信息

这里，我们需要获取登录用户完整的信息，例如：用户名，用户头像，发布文章数目，关注的数目，粉丝数目，被点赞数。

这里，需要发送一个新的请求来获取这些数据。

在src/api/user.js文件中，添加一个新的方法如下所示：

// 封装用户相关的请求模块
import request from "../utils/request";
import store from "../store"; //导入store
export const login = (data) => {return request({method: "POST",url: "/user/login",data,});
};
//获取用户自己完整的信息
export const getUserInfo = (id) => {return request({method: "GET",url: "/userInfo/get",params: { userId: id },headers: {Authorization: `Bearer ${store.state.user.myToken}`,},});
};

在上面的代码中，添加了getUserInfo方法，该方法根据传递过来的用户编号，发送一个get请求，目的就是根据用户编号查询对应的完整的信息。

在这里，需要注意的就是这里需要指定headers属性，该属性中的Authorization中存储的就是发送到服务端的token数据，token数据是从store容器中获取的。

现在返回到views/my/index.vue中调用getUserInfo方法来获取对应的数据。

import { Dialog } from "vant";
import { getUserInfo } from "../../api/user";

导入我们定义的getUserInfo这个方法。

在调用getUserInfo方法发送异步请求之前，定义了一个响应式对象state,该对象中的userInfo属性中存储的就是我们要获取的数据

注意：这里需要导入reactive函数。

在什么时候发送请求呢？

在onMounted钩子函数中发送异步请求。

但是，这里也需要注意一个细节：未登录的用户也可以访问当前的组件，但是这时候，没有必要发送异步请求

所以这里需要判断store容器中是否能够获取到登录用户信息，如果能够获取到，才可以发送异步请求，获取登录用户的完整信息，最终填充到userInfo中。最后将state对象的内容进行解构，然后通过toRefs函数将其包裹，这样解构的内容又被转换成响应式的了。注意：toRefs函数需要导入

import { computed, onMounted, reactive, toRefs } from "vue";
setup() {const store = useStore();const userState = computed(() => store.state.user);const state = reactive({userInfo: {userName: "", //用户名art_count: 0, //发布的文章数目follow_count: 0, //关注的数目fans_count: 0, //粉丝数目like_count: 0, //被点赞数目},});onMounted(() => {//登录以后，才加载对应的数据if (store.state.user) {loadUserInfo(state, store.state.user);}});return {...toRefs(state),userState,...useLogout(store),};},

请求的发送，需要调用loadUserInfo方法来完成，需要传递state以及store容器中的用户数据。

//加载用户信息数据
function loadUserInfo(state, userData) {// console.log("data=", userData.myToken);getUserInfo(userData.data.id).then((res) => {state.userInfo = res.data;});
}

在loadUserInfo方法中，调用了getUserInfo方法发送异步请求，获取完整用户数据，将其填充到state对象中的userInfo中。

下面修改模板中的内容：

  <span class="name">{{ userInfo.userName }}</span><div class="data-item"><span class="count">{{ userInfo.art_count }}</span><span class="text">头条</span></div><div class="data-item"><span class="count">{{ userInfo.follow_count }}</span><span class="text">关注</span></div><div class="data-item"><span class="count">{{ userInfo.fans_count }}</span><span class="text">粉丝</span></div><div class="data-item"><span class="count">{{ userInfo.like_count }}</span><span class="text">获赞</span></div>

这时候，可以返回浏览器进行查看。

9、用户头像处理

在上一小节中，我们并没有处理用户头像，这一小节我们单独来处理一下用户头像的问题

用户的头像是存储在服务端，而服务端返回的头像的路径中，并没有包好服务端的地址。

所以，我们在展示用户头像的时候，需要添加上服务端的地址

 <van-image:src="'http://localhost:3005' + userInfo.photo"class="avatar"roundfit="cover"></van-image>

在my.vue页面中的image组件中指定了图片的服务端地址。

同时，还需要在state对象中的userInfo中定义photo属性。

const state = reactive({userInfo: {userName: "",art_count: 0,follow_count: 0,fans_count: 0,like_count: 0,photo: "", //定义photo},});

这时返回到浏览器可以看到，图片已经展示出来了。

但是，这样写是有问题的。

问题是：项目在开发阶段与生产阶段请求的服务端的地址有可能是不一样的。这样导致后期还要修改服务端的请求地址，非常麻烦。

这里可以通过设置环境变量来解决。

Vite设置环境变量官方地址：

https://cn.vitejs.dev/guide/env-and-mode.html

在项目的根目录下面创建.env.development文件，表示在开发环境中使用的环境变量内容

内容为：

VITE_APP_URL='http://localhost:3005'

注意：前缀一定是VITE_（这里需要重新启动服务）

下面修改一下my.vue文件中的代码

const url = import.meta.env.VITE_APP_URL; //获取环境变量中的值onMounted(() => {//登录以后，才加载对应的数据if (store.state.user) {loadUserInfo(state, store.state.user);}});return {...toRefs(state),userState,...useLogout(store),url, //将其返回};},

模板中的应用：

 <van-image:src="`${url}` + userInfo.photo"class="avatar"roundfit="cover"></van-image>

这里使用了模板字符串，获取url属性中的值。

10、优化设置Token

我们在请求服务端的很多的接口的时候，都需要通过授权才能够访问。

而如果我们每次发送请求的时候，都写headers请求头，会比较麻烦。

  headers: {Authorization: `Bearer ${store.state.user.myToken}`,},

其实，这里我们可以通过axios的请求拦截器来完成处理。因为我们通过axios发送请求的时候，都会先去执行对应的axios的请求拦截器。在请求拦截器中，设置token数据，这样发送到服务端的数据中，就有了对应的token数据了。从而，不需要单独的在设置token数据了。

下面返回到utils/request.js文件，添加请求拦截器。

import axios from "axios";
import store from "../store";
const request = axios.create({baseURL: import.meta.env.VITE_APP_URL, //这里也从环境变量中获取服务端的地址
});
//请求拦截器
request.interceptors.request.use(function (config) {//请求发送会经过这里//config：本次请求的请求配置对象const user = store.state.user;if (user && user.myToken) {config.headers.Authorization = `Bearer ${user.myToken}`;}//注意：这里务必要返回config配置对象，否则请求就停在这里出不去了。return config;},function (err) {//如果请求出错了，会执行这里。return Promise.reject(err);}
);
//响应拦截器
export default request;

这里，将api/user.js文件中的请求头内容删除掉。

// 封装用户相关的请求模块
import request from "../utils/request";
// import store from "../store";
export const login = (data) => {return request({method: "POST",url: "/user/login",data,});
};
//获取用户自己完整的信息
export const getUserInfo = (id) => {return request({method: "GET",url: "/userInfo/get",params: { userId: id },// headers: {//   Authorization: `Bearer ${store.state.user.myToken}`,// },});
};