从0开始写Vue项目-Vue实现用户个人信息界面上传头像

这篇具有很好参考价值的文章主要介绍了从0开始写Vue项目-Vue实现用户个人信息界面上传头像。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. 从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客
  2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客
  3. 从0开始写Vue项目-Vue页面主体布局和登录、注册页面_慕言要努力的博客-CSDN博客
  4. 从0开始写Vue项目-SpringBoot整合Mybatis-plus实现登录、注册功能_慕言要努力的博客-CSDN博客_mybatisplus登陆
  5. 从0开始写Vue项目-SpringBoot实现增删改查和分页查询_慕言要努力的博客-CSDN博客
  6. 从0开始写Vue项目-Vue实现数据渲染和数据的增删改查_慕言要努力的博客-CSDN博客
  7. 从0开始写Vue项目-Vue实现用户数据批量上传和数据导出_慕言要努力的博客-CSDN博客

一、前言

        都知道,我们在写项目的时候,最想给自己项目增加实用性了,例如我们的头像上传以及个人的各种信息等等。我们刚刚已经做好了我们的上传接口,那么我们现在就趁热打铁,将我们的头像上传功能解决一下。

二、个人信息界面

从0开始写Vue项目-Vue实现用户个人信息界面上传头像

        我们的个人信息界面由我们的头像以及我们的表格组成,那么就说明我们需要去获取我们用户的数据了

从0开始写Vue项目-Vue实现用户个人信息界面上传头像        我们之前是做过用户数据存储的,就是利用token来将我们用户的数据存放在我们的浏览器里面,然后利用localStorage来查找出我们的用户数据。

从0开始写Vue项目-Vue实现用户个人信息界面上传头像

三、头像上传 

对于头像上传,我们依然用到我们之前的接口和组件来实现该功能。

从0开始写Vue项目-Vue实现用户个人信息界面上传头像

<template>
  <div>
    <el-card style="width: 800px; margin-left: 10px; margin-top: 10px;" shadow="hover">
      <el-form label-width="80px" size="small">

        <el-upload
            class="avatar-uploader"
            :action="'http://localhost:9090/file/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>

        <el-form-item label="用户名" style="margin-left: 200px; margin-top: -150px">
          <el-input v-model="form.username" disabled autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="昵称" style="margin-left: 200px">
          <el-input v-model="form.nickname" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="性别" style="margin-left: 200px">
          <el-select v-model="form.sex" placeholder="请选择您的性别" style="width: 400px">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" style="margin-left: 200px">
          <el-input v-model="form.email" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="电话" style="margin-left: 200px">
          <el-input v-model="form.phone" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="地址" style="margin-left: 200px" >
          <el-input type="textarea" v-model="form.address" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保 存</el-button>
          <el-button type="primary" @click="sign"><i class="el-icon-location" />定位</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "Person",
  data() {
    return {
      form: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      value: ''
    }
  },
  mounted() {

    // 获取地理位置
    var geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        const province = r.address.province
        const city = r.address.city
        localStorage.setItem("location", province + city)
      }
    });
  },

  created() {
    this.load()
  },
  methods: {
    load() {
      const username = this.user.username
      if (!username) {
        this.$message.error("当前无法获取用户信息!请登录!")
        return
      }
      this.request.get("/user/username/" + username).then(res => {
        // console.log(res)
        this.form = res.data
      })
    },
    sign() {
      const location = localStorage.getItem("location")
      const username = this.user.username

      this.request.post("/sign", { user: username, location: location }).then(res => {
        if (res.code === '200') {
          this.$message.success("打卡成功")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    save() {
      this.request.post("/user", this.form).then(res => {
        if (res.data) {
          this.$message.success("保存成功")
          this.load()

          this.$emit('refreshUser')
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    // 头像上传
    handleAvatarSuccess(res) {
      // res就是头像文件路径
      this.form.avatarUrl = res
    },
  }
}
</script>

<style>
.avatar-uploader {
  text-align: left;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
</style>

四、头部Header使用

从0开始写Vue项目-Vue实现用户个人信息界面上传头像        我们在我们的头部进行数据查询和引用,就是通过user,然后找到我们的头像的元素,最后进行展示 

从0开始写Vue项目-Vue实现用户个人信息界面上传头像

        我们需要在我们的脚手架里面去获取用户User最新的数据,然后最后在我们的头部Header里面去进行引入并获取信息 从0开始写Vue项目-Vue实现用户个人信息界面上传头像

源码:

 

<template>
  <div style="display: flex; line-height: 60px">
    <div style="flex: 1">
      <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px"></span>
      <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
        <el-breadcrumb-item :to="'/mall/index'" >主页</el-breadcrumb-item>
        <el-breadcrumb-item >{{ currentPathName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-dropdown style="width: 130px; cursor: pointer">

      <div style="display: inline-block; float: right; margin-right: 10px">
        <img :src="user.avatarUrl" alt=""
             style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
        <span>{{user.nickname}}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      </div>

      <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
          <span style="text-decoration: none" @click="person">个人信息</span>
        </el-dropdown-item>
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
          <span style="text-decoration: none" @click="logout">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>

    </el-dropdown>

  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    collapseBtnClass: String,
    user: Object
  },
  computed: {
    currentPathName () {
      return this.$store.state.currentPathName;  //需要监听的数据
    }
  },
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  methods: {
    logout() {
      this.$router.push("/login")
      this.$message.success("退出成功")
    },
    person(){
      this.$router.push("/mall/person")
    }
  }
}
</script>

<style scoped>

</style>

其他请见:SpringBoot+Vue实现个人信息以及头像数据联动_慕言要努力的博客-CSDN博客_vue个人信息界面

⛵小结

        以上就是对从0开始写Vue项目-Vue实现用户个人信息界面上传头像简单的概述,后面会陆续更新其他的代码,请持续关注!!! 

从0开始写Vue项目-Vue实现用户个人信息界面上传头像

        如果这篇文章有帮助到你,希望可以给作者点个赞👍,创作不易,如果有对后端技术、前端领域感兴趣的,也欢迎关注 ,我将会给你带来巨大的收获与惊喜💝💝💝文章来源地址https://www.toymoban.com/news/detail-458614.html

到了这里,关于从0开始写Vue项目-Vue实现用户个人信息界面上传头像的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue实现个人网盘视频存储界面

    前言 随着互联网的发展,人们对于数据存储和共享的需求越来越大。个人网盘作为一种云存储服务,可以方便地存储和分享个人数据,如文档、图片、视频等。本文将介绍如何使用Vue框架开发一个个人网盘视频存储界面,实现视频上传、展示、播放、删除、训练、跨模态检索

    2024年02月10日
    浏览(40)
  • 【前端Vue】社交信息头条项目完整笔记第3篇:三、个人中心,TabBar 处理【附代码文档】

    社交媒体-信息头条项目完整开发笔记完整教程(附代码资料)主要内容讲述:一、项目初始化使用 Vue CLI 创建项目,加入 Git 版本管理,调整初始目录结构,导入图标素材,引入 Vant 组件库,移动端 REM 适配。二、登录注册准备,实现基本登录功能,登录状态提示,表单验证,验证码处理

    2024年04月16日
    浏览(51)
  • vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想要的信息?

    在Vue2项目中,可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中,具体取决于项目的需求和规模。 1. Vuex状态管理 在Vuex中定义一个user模块,用于存储用户信息,可以在登录成功后将用户信息存储到该模块中。 // store/user.js    const state = {          userInfo: \\\'\\\'  

    2023年04月25日
    浏览(52)
  • Java后台实现网站微信扫码登录功能,获取用户openid,及微信用户信息(小程序码方案),关联微信小程序(个人主体小程序也可以)

    目录 前言 下面展示操作流程 注册微信小程序 通过后台获取小程序码 前端处理 时序图理解 方案实现步骤 前言 很多业务场景之下我们需要实现  微信扫码登录  的需求,如: 同步网站与小程序的用户数据 。 需要获取用户微信相关基本信息,如头像、id等 实例:小程序上的

    2024年02月02日
    浏览(58)
  • vue3 微信扫码登录及获取个人信息实现的三种方法

    一、流程: 微信提供的扫码方式有两种,分别是: 根据文档我们可以知道关于扫码授权的模式整体流程为: 二、前置条件: 微信开发官网 申请: appid: ‘’, // 后端提供 redirect_uri: ‘’, // 后端提供 AppSecret // 后端提供 三、具体登录实现 实现方式一: 使用vue插件: 使用: 结果

    2023年04月13日
    浏览(50)
  • 电商小程序07显示用户个人信息

    在登录章节我们已经实现了用户名和密码登录首页的功能,在登录之后,可以切换到我的页面,显示用户的头像和名称,可以修改个人信息。本篇我们介绍一下个人信息如何显示。 在用户登录的时候,我们需要将用户的信息放入全局变量中,为此需要在代码区新建一个全局变

    2024年02月21日
    浏览(35)
  • springboot获取登录用户的个人信息

    在Spring Boot中,获取登录用户的个人信息通常需要使用Spring Security框架来进行身份认证和授权。Spring Security提供了一个名为SecurityContextHolder的上下文对象,它包含了当前请求的身份认证信息。通过SecurityContextHolder,可以访问当前已认证的用户的信息。 当使用 Spring Boot + Spring

    2023年04月19日
    浏览(76)
  • 从 0 开始实现一个 SpringBoot + Vue 项目

    参考:梦想屋A 后端开发软件:IntelliJ IDEA 前端开发软件:Visual Studio Code 后端框架:SpringBoot 后端语言:Java 前端框架:Vue 这是后面要用的妙妙小工具: 服务器连接工具:Termius 数据库:MySQL 数据库管理工具:Navicat Premium 数据库连接工具:MyBatis API 文档生成工具:Swagger API 文

    2024年02月21日
    浏览(39)
  • 《开始使用PyQT》 第01章 PyQT入门 03 用户界面介绍

    《开始使用PyQT》 第01章 PyQT入门 03 用户界面介绍 The user interface (UI) has become a key part of our everyday lives, becoming the intermediary between us and our ever-growing number of machines. A UI is designed to facilitate in human-computer interaction. The human needs to operate and control the machine to serve some purpose; meanwhile, t

    2024年02月21日
    浏览(40)
  • JavaWeb项目----实现用户登录、注册、对商品信息进行的添加、删除、修改功能

    在idea中创建有关类   web中写jsp页面,index.jsp是首页布局 运行效果如下:  登录页面 运行效果如下:   注册页面  运行效果如下:   登陆正确时跳转到zhuye.jsp主页页面( 使用Java脚本获取集合中对象的元素,放html标签中) 运行效果如下:   在登陆页面,密码或用户名输入

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包