【第24章】Vue实战篇之用户信息展示

文章目录

  • 前言
  • 一、准备
    • 1. 获取用户信息
    • 2. 存储用户信息
    • 3. 加载用户信息
  • 二、用户信息
    • 1.昵称
    • 2.头像
  • 三、展示
  • 总结


前言

这里我们来展示用户昵称和头像。


一、准备

1. 获取用户信息

export const userInfoService = ()=>{return request.get('/user/info')
}

2. 存储用户信息

import { ref } from 'vue'
import { defineStore } from 'pinia'const useUserInfoStore = defineStore('userInfo', () => {const userInfo = ref({})const setUserInfo = (info)=>{userInfo.value=info}const getUserInfo = ()=>{return userInfo.value}const removeUserInfo = ()=>{userInfo.value={}}return {userInfo, setUserInfo, getUserInfo, removeUserInfo }
},{persist:true})
export default useUserInfoStore

3. 加载用户信息

完成上面两步的调用

import { onMounted } from 'vue'
import { userInfoService } from '@/api/user.js'
import useUserInfoStore from '@/stores/userInfo.js'onMounted(async () => {let result = await userInfoService()if (result.code == 0) {useUserInfoStore().setUserInfo(result.data)}
})

二、用户信息

1.昵称

<template #dropdown><el-dropdown-menu><div v-if="useUserInfoStore().getUserInfo().nickname" style=" text-align: center; "><span class="accent" data-v-6b0c93fd=""><strong>你好,{{useUserInfoStore().getUserInfo().nickname }}</strong></span></div><el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item><el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item><el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item><el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item></el-dropdown-menu>
</template>

2.头像

<span class="el-dropdown__box"><el-avatar :src="useUserInfoStore().getUserInfo().userPic?'avatar/'+useUserInfoStore().getUserInfo().userPic:avatar" /><el-icon><CaretBottom /></el-icon>
</span>

三、展示

效果如下图所示

在这里插入图片描述


总结

回到顶部

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mongodb在UPDATE操作中使用$push向数组中插入数据

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第69篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

数学建模整数规划学习笔记

与线性规划的本质区别在于决策变量是否取整。 &#xff08;1&#xff09;分支定界法 若不考虑整数限制先求出相应松弛问题的最优解&#xff1a; 若松弛问题&#xff08;线性规划&#xff09;无解&#xff0c;则ILP&#xff08;整数规划&#xff09;无解。 若求得的松弛问题最…

为什么动态代理接口中可以不加@Mapper注解

为什么动态代理接口中可以不加Mapper注解 如下图&#xff1a; 我们上面的UserMapper上面没有加Mapper注解&#xff0c;按道理来说UserMapper这个类应该是注入不到IOC容器里面的&#xff0c;但是为什么我们程序的运行效果仍然是正常的呢&#xff1f;这是因为你的启动类上加了m…

你不会是这样摆放 WiFi 路由器的吧?

当你购买WiFi路由器时&#xff0c;可能会对如何放置路由器以获得最好的信号覆盖感到迷茫。 那&#xff0c;到底要怎样摆放路由器&#xff0c;信号才会更好呢&#xff1f; 首先&#xff0c;咱们先简单了解一下天线信号是如何传输的。通常&#xff0c;天线信号是从天线垂直方向&a…

LeetCode---402周赛

题目列表 3184. 构成整天的下标对数目 I 3185. 构成整天的下标对数目 II 3186. 施咒的最大总伤害 3187. 数组中的峰值 一、构成整天的下标对数目 I & II 可以直接二重for循环暴力遍历出所有的下标对&#xff0c;然后统计符合条件的下标对数目返回。代码如下 class So…

NetSuite 不同类型Item的公司间交易科目的设置

我们知道&#xff0c;NetSuite中有Intercompany Preferences的设置&#xff0c;如下所示&#xff0c;分别涉及到公司间应收、公司间应付、公司间收入、公司间费用以及公司间成本共5个科目&#xff0c;非常明确清晰。 最近用户遇到的场景是&#xff0c;如果是Non-Inventory Item…

【深度学习】stable-diffusion-3,SD3生图体验

stabilityai/stable-diffusion-3-medium 代码地址&#xff1a; https://huggingface.co/stabilityai/stable-diffusion-3-medium 可在这里体验&#xff1a; https://huggingface.co/spaces/ameerazam08/SD-3-Medium-GPU

在windows 台式机电脑部署GLM4大模型

参考这篇文章在windows笔记本电脑部署GLM4大模型_16g显卡本地部署glm4-CSDN博客 我的环境&#xff08;PC台式机电脑&#xff1a; 处理器 Intel(R) Core(TM) i9-14900K 3.20 GHz 机带 RAM 32.0 GB (31.8 GB 可用)、32G内存、NVIDIA RTX4080&#xff08;16G&#xff09;…

[Vulnhub] Troll FTP匿名登录+定时任务权限提升

信息收集 IP AddressPorts Opening192.168.8.104TCP:21,22,80 $ nmap -sC -sV 192.168.8.104 -p- --min-rate 1000 Nmap scan report for 192.168.8.104 (192.168.8.104) Host is up (0.0042s latency). Not shown: 65532 closed tcp ports (conn-refused) PORT STATE SER…

python 方法_函数

文章目录 一、函数&#xff08;方法&#xff09;的基本概念二、python 函数的分类三、python 函数的定义和调用四、函数的参数以及函数的作用域 一、函数&#xff08;方法&#xff09;的基本概念 函数是什么&#xff1a; 可以重复使用的代码块&#xff0c;这个代码块可以用来实…

React-配置json-server

安装json-server&#xff1a;json-server工具准备后端接口服务环境_jsonserver临时后端-CSDN博客 在package.json文件中的scripts添加&#xff1a; "serve":"json-server json文件路径 --port 端口号" 在终端输入命令npm run serve&#xff0c;就可以启动…

CDGA|数据治理要点是数据稳定、规范、安全,就像盖楼盘一样

在数字化浪潮汹涌的时代&#xff0c;数据已经成为企业运营和社会发展的核心驱动力。如同高楼大厦需要稳固的地基和规范的施工流程&#xff0c;数据治理同样需要确保数据的稳定性、规范性和安全性&#xff0c;以构建坚实可靠的数据大厦。 数据治理的首要任务是确保数据的稳定性 …

Python自动化(2)——键盘模拟

Python自动化(2)——键盘模拟 前台键盘模拟 前台键盘模拟和后台键盘模拟的区别在于&#xff0c;是否绑定窗口。即前台模拟是只模拟键盘操作&#xff0c;例如按下按键a&#xff0c;如果聚焦在一个文本文档的编辑区&#xff0c;那么就会把这个a输入进去。但如果是聚焦到了浏览器…

概率论与数理统计期末复习

概率论常考知识点汇总 总括 1. 基础概率论 概率定义&#xff1a;理解概率是事件发生的可能性度量&#xff0c;范围从0&#xff08;不可能&#xff09;到1&#xff08;必然发生&#xff09;。概率公理&#xff1a;掌握概率的三大公理&#xff0c;即非负性、规范性和可加性。条…

五十四、openlayers官网示例LineString Arrows解析——在地图上绘制箭头

官网demo地址&#xff1a; LineString Arrows 这篇介绍了在地图上绘制箭头。 创建一个矢量数据源&#xff0c;将其绑定为draw的数据源并展示在矢量图层上。 const source new VectorSource();const vector new VectorLayer({source: source,style: styleFunction,});map.ad…

鸿蒙开发:【进程模型概述】

进程模型概述 系统的进程模型如下图所示&#xff1a; 应用中&#xff08;同一包名&#xff09;的所有PageAbility、ServiceAbility、DataAbility、FormAbility运行在同一个独立进程中&#xff0c;即图中绿色部分的“Main Process”。 WebView拥有独立的渲染进程&#xff0c;即…

容器之布局容器的演示

代码; #include <gtk-2.0/gtk/gtk.h> #include <glib-2.0/glib.h> #include <gtk-2.0/gdk/gdkkeysyms.h> #include <stdio.h>void change_image(GtkFileChooserButton *filebutton, // GdkEvent *event,GtkImage *image) {gtk_image_set_from_file(im…

vscode颜色没有显示出来颜色预览效果,安装插件解决

1、先上一张图&#xff0c;看看之前没有安装插件的Html颜色的色块 2、安装插件Color Highlight 这样颜色对应的效果就出来了。

python eval 函数和 json 对象的使用

注意&#xff1a; 1、python 不支持 switch 语句&#xff0c;所以多个条件判断分支的写法只能用 if 2、elif 对应 Java 中的 else if 3、python 编写的程序代码都是自上而下执行&#xff0c;除非代码控制&#xff0c;不然不会改变 4、需要注意代码层级&#xff0c;如果层级不对…

UE5近战对抗系统Tutorial

文章目录 BP_Character 组合攻击Notify State 检测攻击BP_Character 攻击反馈BP_Character 生命系统BP_Character 死亡效果BP_Character 武器系统BP_Enemy 初始化和行为树 BP_Character 组合攻击 首先我们获取攻击动画&#xff0c;在这里使用的是 Easy Combo Buffering 的攻击…