vue实现个人信息查看和密码修改功能


Posted in Javascript onMay 06, 2018

下面一段代码给大家介绍vue实现个人信息查看和密码修改功能,具体代码如下所述:

//用了element组件,自己要加载和引入
<template>
   <div class="all-container">
    <div class="all-container-padding bg" >
     <el-tabs v-model="activeName" @tab-click="handleClick">
     <el-tab-pane label="基本信息" name="first">
      <el-form :model="userlist" :rules="rules" ref="EditorUserForms">
        <el-form-item label="头像" prop="avatar_url" :label-width="formLabelWidth">
          <el-upload class="avatar-uploader" action="//shujiaoke.oss-cn-hangzhou.aliyuncs.com" :before-upload="beforeupload" :data="uploadParm" :show-file-list="false" :on-success="handleUpSuccess">
          <img v-if="userlist.avatar_url" :src="userlist.avatar_url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon " style="width:80px;height:80px;"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
         <el-col :span="8"> <el-input v-model="userlist.username" disabled ></el-input></el-col>
        </el-form-item>
        <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
         <el-col :span="8">  <el-input v-model="userlist.phone" placeholder="请输入电话"></el-input></el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
         <el-col :span="8">  <el-input v-model="userlist.email" placeholder="请输入邮箱"></el-input></el-col>
        </el-form-item>
        <el-form-item label="用户角色" prop="full_name" :label-width="formLabelWidth">
         <el-col :span="8">
          <el-input v-model="userlist.full_name" disabled ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="grid-content bg-purple">
       <el-button type="primary" @click="EditorUserClick('userlist')" >保存</el-button>
      </div>
     </el-tab-pane>
     <el-tab-pane label="修改密码" name="second">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
       <el-form-item label="原密码" prop="pass" :label-width="formLabelWidth">
         <el-col :span="8">  <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password"></el-input></el-col>
        </el-form-item>
        <el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth">
         <el-col :span="8"><el-input v-model="ruleForm.newpass" placeholder="请输入新密码" id="newkey" type="password"></el-input></el-col>
        </el-form-item>
        <el-form-item label="重复新密码" prop="checknewpass" :label-width="formLabelWidth">
         <el-col :span="8">  <el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password"></el-input></el-col>
        </el-form-item>
        </el-form>
        <div class="grid-content bg-purple">
       <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </div>
     </el-tab-pane>
    </el-tabs>
    </div>
   </div>
</template>
<script>
//这些不要在意,这些是我们自定义的接口,用的时候就直接拿来了
import {fetchAll,fetchByID,fetchList,postData,putData,deleteByID,deleteAllByID,guid,bytesToSize} from "@/api/dbhelper";
//这一步很重要,一般我们直接从后台拿过来输出来会是在data里面,但是我发现却在store里面,这里就要用到vuex
import { mapGetters } from "vuex";
export default {
 data() {
/*****检验两次密码是否一致***/
  var validatePass = (rule, value, callback) => {
   if (value === "") {
    callback(new Error("请输入密码"));
   } else {
    if (this.ruleForm.checknewpass !== "") {
     this.$refs.ruleForm.validateField("checknewpass");
    }
    callback();
   }
  };
  var validatePass2 = (rule, value, callback) => {
   if (value === "") {
    callback(new Error("请再次输入密码"));
   } else if (value !== this.ruleForm.newpass) {
    callback(new Error("两次输入密码不一致!"));
   } else {
    callback();
   }
  };
  return {
   uploadParm: {}, //图片的上传
   ruleForm: {},//修改密码的表单
   activeName: "first",
   loading: true,
   baseUrl: process.env.BASE_API,
   userlist: {},//用户信息表单
   formLabelWidth: "150px",
  /***校验***/
   rules: {
    phone: [
     {
      required: true,
      message: "请输入电话号码"
     },
     {
      pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      message: "手机格式不对"
     }
    ],
    email: [
     {
      required: true,
      message: "请输入电子邮箱"
     },
     {
      pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
      message: "请输入有效的邮箱"
     }
    ],
    pass: [
     {
      required: true,
      trigger: "blur",
      message: "请输入密码"
     }
    ],
    newpass: [
     {
      validator: validatePass,
      trigger: "blur"
     }
    ],
    checknewpass: [
     {
      validator: validatePass2,
      trigger: "blur"
     }
    ]
   }
  };
 },
 created() {
  this.getUser();
  this.upload();
 },
 computed: {
  ...mapGetters(["username"])
 },
 methods: {
  //获取个人用户的信息
  getUser() {
   postData("接口", this.username).then(response => {
    if (response.status === 200) {
     this.userlist = response.data;
     this.loading = false;
     console.log(this.userlist, 9696);
    } else {
     this.$message({
      message: "获取信息失败," + response.message,
      type: "error"
     });
    }
   });
  },
  //tab切换
  handleClick(tab, event) {
   console.log(tab, event);
  },
  //上传参数图片初始化
  upload() {
   var currentTimeStamp = new Date().getTime() / 1000;
   if (
    this.uploadParams == null ||
    this.uploadParams.expire + 3 < currentTimeStamp
   ) {
    this.$store
     .dispatch("GetUploadParams")
     .then(req => {
      this.uploadParm = req.data;
     })
     .catch(err => {
      this.$message({ message: err.message, type: "warning" });
     });
   } else {
    this.uploadParm = this.uploadParams;
   }
  },
  //上传之前
  beforeupload(file) {
   this.uploadParm.key = this.uploadParm.dir + guid();
   // console.log(this.uploadParm)
  },
  //图片上传上传成功
  handleUpSuccess(response, file, fileList) {
   var newfile = {
    name: file.name,
    type: file.raw.type,
    size: bytesToSize(file.size),
    url: this.uploadParm.key
   };
   postData("file", newfile).then(response => {
    if (response.status == 200) {
     this.$message({ message: "修改成功", type: "success" });
     this.userlist.style_file_id = response.data.id;
     this.userlist.avatar_url = this.baseUrl + response.data.url;
    } else {
     this.$message({ message: "修改失败", type: "error" });
    }
   });
   console.log(this.userlist);
  },
  //修改密码
  submitForm(ruleForm) {
   var obj = {
    username: this.username,
    oldpwd: this.ruleForm.pass,
    newpwd: this.ruleForm.newpass
   };
   console.log(obj);
   postData("接口", obj).then(response => {
    if (response.status == 200) {
     this.$message({
      message: "保存成功",
      type: "success"
     });
    } else {
     this.$message({
      message: "修改失败" + response.message,
      type: "error"
     });
    }
   });
  },
  // 编辑提交的方法
  EditorUserClick() {
   this.$refs.EditorUserForms.validate(valid => {
    if (valid) {
     console.log(this.userlist);
     putData("接口", this.userlist).then(response => {
      if (response.status == 200) {
       this.$message({
        message: "编辑成功",
        type: "success"
       });
      } else {
       this.$message({
        message: "修改失败" + response.message,
        type: "error"
       });
      }
     });
    }
   });
  }
 }
};
</script>

点击查看vue实现密码显示隐藏切换功能

总结

以上所述是小编给大家介绍的vue实现个人信息查看和密码修改功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 读取图片文件的大小
Jun 25 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
基于vue-element组件实现音乐播放器功能
May 06 #Javascript
VueJs组件之父子通讯的方式
May 06 #Javascript
vue自动化表单实例分析
May 06 #Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 #Javascript
JS中this的指向以及call、apply的作用
May 06 #Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 #Javascript
Less 安装及基本用法
May 05 #Javascript
You might like
php缓存技术介绍
2006/11/25 PHP
php 图片上传类代码
2009/07/17 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
关于车尾的标语大全
2015/08/11 职场文书
春节随笔
2015/08/15 职场文书
python 中的@运算符使用
2021/05/26 Python
Python 绘制多因子柱状图
2022/05/11 Python