vue 找回密码_vue实现个人信息查看和密码修改功能
下面一段代碼給大家介紹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實現個人信息查看和密碼修改功能，希望對大家有所幫助
如您對本文有疑問或者有任何想說的，請點擊進行留言回復，萬千網友為您解惑！
總結
以上是生活随笔為你收集整理的vue 找回密码_vue实现个人信息查看和密码修改功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 车险赔付率分析报告_车险有变！价格…
- 下一篇： npm 全局安装vuecli报错_前端脚