vue怎樣做出密碼修改與個人資訊檢視功能

這次帶給大家vue怎樣做出密碼修改與個人資訊檢視功能，vue做出密碼修改與個人資訊檢視功能的注意事項有哪些，以下是實戰案例，一起來看一下。

下面一段程式碼介紹vue實作個人資訊檢視和密碼修改功能，具體程式碼如下所述：

//用了element组件，自己要加载和引入
<template>
   <p>
    </p>
<p>
     <el-tabs>
     <el-tab-pane>
      <el-form>
        <el-form-item>
          <el-upload>
          <img  class="avatar lazy" src="/static/imghwm/default1.png" data-src="userlist.avatar_url" alt="vue怎樣做出密碼修改與個人資訊檢視功能" >
          <i></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
         <el-col> <el-input></el-input></el-col>
        </el-form-item>
        <el-form-item>
         <el-col>  <el-input></el-input></el-col>
        </el-form-item>
        <el-form-item>
         <el-col>  <el-input></el-input></el-col>
        </el-form-item>
        <el-form-item>
         <el-col>
          <el-input></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <p>
       <el-button>保存</el-button>
      </p>
     </el-tab-pane>
     <el-tab-pane>
      <el-form>
       <el-form-item>
         <el-col>  <el-input></el-input></el-col>
        </el-form-item>
        <el-form-item>
         <el-col><el-input></el-input></el-col>
        </el-form-item>
        <el-form-item>
         <el-col>  <el-input></el-input></el-col>
        </el-form-item>
        </el-form>
        <p>
       <el-button>保存</el-button>
      </p>
     </el-tab-pane>
    </el-tabs>
    </p>
   
</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實作密碼顯示隱藏切換功能

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

ES6中Promise使用步驟詳解

#怎麼用React Form完成元件封裝

#

以上是vue怎樣做出密碼修改與個人資訊檢視功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！