vue-admin-template右上角头像及退出功能部分更改

于 2024-08-30 10:45:30 发布
阅读量311 收藏
点赞数 4
分类专栏： Vue 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laosao_66/article/details/141679827
版权
前端 同时被 2 个专栏收录
22 篇文章 2 订阅
订阅专栏
Vue
15 篇文章 1 订阅
订阅专栏

右上角部分的代码在这个文件中：~\src\layout\components\Navbar.vue ，可以在下面这段代码里修改右上角退出及跳转的功能以及链接。

可以看到上面的代码里有头像的来源，我们需要做的就是在这个路径的文件~\src\store\modules\user.js中给avatar设置默认照片地址，

设置默认值后要注释下面的赋值，防止被修改：

阿波拉
关注
专栏目录
vue-admin-template开发（头像上传功能）
黑马Jack的博客
05-19 3038
vue-admin-template开发（头像上传功能） vue-admin-template是一个后台管理系统的前端框架，提供了登录、导航栏、路由等功能，是一个强大简洁的后台管理系统的前端框架。本文将讲述在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱。 锁定头像上传功能 我们以vue-element-admin的头像上传为例，简单描述如何将头像上传功能移植进入到vue-admin-template中 锁定头像上传功能代码 首先在浏览器导
vue3-admin商品管理后台项目(后台布局layout布局开发一)
lovestar墨竹的博客
10-20 4354
vue3-admin商品管理后台项目(后台布局layout布局开发一)
vue-admin-template之右上角logo换成自定义照片
YGGZZZ的博客
07-10 243
vue-admin-template之右上角logo换成自定义照片
vue-admin-template 右上角的logo图片怎么换成用户自己的头像呢
zjp1310343359的博客
03-19 1218
网上查到说好像是在这里改，我自己是用nginx配置把文件上传到本地文件夹下的。请教一下如何把用户的头像替换掉右上角logo处的图片呢。数据库里的图片的存储信息是这样的。
vue项目问题
weixin_48210599的博客
08-23 202
vue路由传值 vue的路由传值有两种方式 params this.$router.push({ path:"/地址", params:{ 参数名:"参数值" } }) 接受 this.$route.params."参数值" params的话传参刷新页面数据会消失不会保存 query this.$router.push({ path:"/地址", params:{ 参数名:"参数值" } }) 接受 this.$route.query."参数值" query的话
vue前端完成头像上传
weixin_44884861的博客
08-13 4310
vue前端代码实现头像上传 1.创建项目，使用vue-admin-template框架 使用vue命令在终端（开发工具VScode）输入npm install,即可按package.json文件下载 导入相关工具包，是上传头像的样式更好看 4.在views编写vue文件 <template> <div class="app-container"> <el-form-item label="讲师头像"> <el-upload
基于vue-admin-template的hexo博客后台管理，项目采用SpringBoot+Vue+源代码+文档说明
11-28
后端可以使用 java -jar hexoblogadmin....3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
vue +Element-UI 实现完整的登录退出功能
咿呀咿呀呦~
06-01 2389
接着上篇文章开始记录，上篇最后问题已经解决，忘记了 ： 导致的。已修改完成。截至目前为止，登录退出功能已实现，以下是我的代码： Login.vue <template> <div class="login_container"> <div class="login_box"> <!--头部--> <div class="avatar_box"> <img src="../assets/log
一篇文带你使用vue完成一个完整后台
m0_67393295的博客
03-09 1826
介绍 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你 vue-element-admin定位是后台集成方案，不适合当基础模板进行二次开发，项目集成了许多用不到的功能，会造成代码沉余 vue-admin-template是一个后台基础模板，建议使
element-ui+vue-router:实现导航栏跳转路由
热门推荐
nahedan的博客
10-27 1万+
在实际开发中我们常常遇到在单页面中点击导航栏菜单中的某一选项卡，页面中的某个部分出现相关的信息，也就是使用导航栏进行路由跳转。如下图所示（在线格式转换）。 ### 示例 <el-menu :default-openeds="['1', '3']" :default-active="this.$route.path" router > <div class="icon"> <i class="el-icon-im
vue-admin-template之右上角显示用户登录后的个人信息（用户名、公司等···）
最新发布
YGGZZZ的博客
07-11 295
vue-admin-template之右上角显示用户登录后的个人信息（用户名、公司等···）
去除/更换vue-admin-template右上角logo
qq_43499191的博客
01-08 3305
方法： 菜单栏内容找到并替换/删除即可 logo也可以替换/删除
vue中根据用户昵称首字母生成头像和颜色
ju__ju的博客
05-29 6424
需求:项目中需要做一个粗糙的评论板块,用户评论时需要显示头像,但是不需要去更换改头像 思路:用户昵称首字母作为头像,并且根据用户首字母生成固定的颜色,否则每次颜色都会随机 例如: 1.安装头像插件 npm install vue-avatar 2.引用 //template部分 <Avatar :username="name" :src="name" :background-color="extractColorByName(name)" color="#fff" style="vertical-
SpringBoot和Vue跨域问题
樱桃白馒头
08-10 532
Access to XMLHttpRequest at 'http://localhost:8301/admin/vod/user/info?token=admin-token' from origin 'http://localhost:9528' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
vue-admin-template笔记（三）
seedcup的专栏
12-13 9393
文章目录Vue学习笔记（三）dashboardstoreindex.jsgetters.jsmodule/app.jsmudule/user.js参考 Vue学习笔记（三） 学习vue-admin-template https://github.com/PanJiaChen/vue-admin-template 上一篇中分析了vue-admin-template的入口逻辑，包括main.js,...
element admin 动态路由_vue-typescript-admin-template开源后台前端解决方案
weixin_39616348的博客
11-21 470
简介vue-typescript-admin-template 是一个后台前端解决方案，它基于 vue, typescript 和 element-ui实现。原始的 Javascript 版本的代码是由 PanJiaChen 开发维护的 vue-element-admin。github 地址：https://github.com/Armour/vue-typescript-admin-templa...
vue-admin-template新手使用简单指南
qq_41215420的博客
03-14 1万+
忙乎了一天才改好，前端0基础还让我做这个，难顶，记录下备忘吧。 1.修改.env.development 2.修改vue.config.js 3.修改src/utils/request.js 可以修改code状态码，改为自己的，简单点直接全部注释掉，留个return res；即可。 修改main.js 注释掉图中内容，可以全部注释掉不用mock的假数据，但要自己在后台写登录的几个方法，有点麻...
vue-admin-template上传头像
08-26
要在vue-admin-template中实现上传头像功能，可以参考vue-element-admin中的实现方法。首先，需要将头像上传组件的代码从vue-element-admin的avatarUpload.vue文件中提取出来。然后，将这些代码添加到vue-admin-template中的form.vue文件中。具体步骤如下： 1. 打开vue-element-admin项目中的avatarUpload.vue文件，查找头像上传组件的代码。 2. 将这些代码复制到vue-admin-template项目中的form.vue文件中的合适位置。 3. 需要注意根据具体需求进行相应的修改，可能需要调整组件的样式、路径或者其他属性。 4. 根据vue-admin-template的文件目录结构和组件引用方式，确保头像上传组件的路径和引用方式正确无误。 5. 保存文件并重新编译运行vue-admin-template项目，确保上传头像功能已经成功添加。 通过以上步骤，你就可以将vue-element-admin中的头像上传功能移植到vue-admin-template中了。请根据具体情况进行调整和修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue-admin-template开发（头像上传功能）](https://blog.csdn.net/m0_46991388/article/details/117015841)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值