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

//用了element组件，自己要加载和引入

//这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了

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"

});

}

});

}

});

}

}

};

点击查看

总结

以上所述是小编给大家介绍的vue实现个人信息查看和密码修改功能，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！