지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Vue는 개인정보 열람 및 비밀번호 수정 기능을 구현합니다.

Vue는 개인정보 열람 및 비밀번호 수정 기능을 구현합니다.

不言
풀어 주다： 2018-05-07 14:51:11
원래의
5043명이 탐색했습니다.

이 글에서는 Vue의 비밀번호 표시 및 숨기기 전환 기능 구현에 대해 소개합니다. 관심 있는 친구들은 참고할 만한 가치가 있습니다. 살펴보겠습니다.

다음 코드는 Vue의 개인 정보 보기 및 비밀번호 수정 기능을 소개합니다. 구체적인 코드는 다음과 같습니다. 

//用了element组件，自己要加载和引入
<template>
   <p class="all-container">
    <p 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>
      <p class="grid-content bg-purple">
       <el-button type="primary" @click="EditorUserClick(&#39;userlist&#39;)" >保存</el-button>
      </p>
     </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=&#39;newkey1&#39; type="password"></el-input></el-col>
        </el-form-item>
        </el-form>
        <p class="grid-content bg-purple">
       <el-button type="primary" @click="submitForm(&#39;ruleForm&#39;)">保存</el-button>
      </p>
     </el-tab-pane>
    </el-tabs>
    </p>
   </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의 비밀번호 표시-숨기기 전환 기능 구현을 보려면 클릭하세요.

관련 권장 사항:

vue


에서 WeChat 인증 로그인을 구현하는 단계에 대한 자세한 설명

위 내용은 Vue는 개인정보 열람 및 비밀번호 수정 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
정보 비밀번호 확인하다
원천：php.cn
이전 기사：Vue 기반 드래그 앤 드롭 기능 구현 다음 기사：vue-element 컴포넌트를 기반으로 음악 플레이어 기능 구현
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
반환 값의 변수 형식은 무엇입니까? 저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
에서 2024-04-06 21:55:20
0
1
778
스도쿠 검사기가 작동하지 않나요? 오류를 식별하는 데 도움을 줄 수 있는 사람이 있나요? 온라인 편집기에서 모든 것을 시도했지만 여전히 오류가 발생합니다. 하지만 내 컴퓨터의 VSCode에서 이 작업을 수행하면 제대로 작동합니다. 혼란스러워서 버그를 ...
에서 2024-04-06 21:21:07
0
1
474
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿