Maison > interface Web > js tutoriel > le corps du texte

Vue implémente des fonctions de visualisation d'informations personnelles et de modification de mot de passe

不言
Libérer: 2018-05-07 14:51:11
original
4989 Les gens l'ont consulté

Cet article vous présente l'implémentation par Vue des fonctions d'affichage des informations personnelles et de modification des mots de passe à travers un exemple de code. L'article présente également l'implémentation par Vue des fonctions d'affichage et de masquage des mots de passe. C'est très bon et a une certaine valeur de référence. pouvez nous rejoindre. Jetons un coup d'œil

Le morceau de code suivant présente Vue pour implémenter les fonctions d'affichage des informations personnelles et de modification de mot de passe :

//用了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>
Copier après la connexion
.

Cliquez pour afficher Vue pour implémenter l'affichage du mot de passe et masquer la fonction de commutation

Recommandations associées :

Vue pour implémenter les étapes de connexion autorisées WeChat explication détaillée


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!