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实现个人信息查看和密码修改功能,希望对大家有所帮助

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/489992.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

世界十大最美方程式

来源&#xff1a;数学职业家自从科学诞生后&#xff0c;不可避免地就会用到方程式&#xff0c;这些方程式以其独特的作用服务于人类的生产创造以及各门学科。而最近几百年的时间&#xff0c;更是方程式数量极大增加的时候&#xff0c;同时也是科学技术突飞猛进的年代。从侧面看…

160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘

一、浏览器渲染页过程描述 1、浏览器解析html源码&#xff0c;然后创建一个DOM树。 在DOM树中&#xff0c;每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。 DOM树的根节点就是documentElement&#xff0c;对应的是html标签。 2、浏…

小程序 pagescrollto_微信小程序学习笔记(三)-- 首页及详情页开发

一、常用组件在上一个章节中讲解了封装请求数据的模块&#xff0c;在此处请求轮播图的数据1.首页轮播图数据的请求以及渲染1.1 轮播图数据的请求 pages/home/home.jsimport 2 使用组件 - 视图容器 - swiper滑块视图容器。其中只可放置swiper-item组件&#xff0c;否则会导致未定…

云计算与边缘计算协同 九大应用场景

来源&#xff1a;物联网报告中心前言2019 年边缘计算备受产业关注&#xff0c;一度引起了资本市场的投资热潮&#xff0c;很多人把2019 年称作边缘计算的元年。理性来看&#xff0c;造成如此火爆局势难免有一些炒作因素在推波助澜&#xff0c;毕竟边缘计算的概念存世也已多年。…

cat3 utp是不是网线_网线/双绞线上各标识CAT, AWG, PR, UTP/STP/FTP/SFTP的含义

CAT5, CAT5e, CAT6表示网线类别, 常见的有 CAT5, CAT5e, CAT6分别表示五类, 超五类, 六类网线24AWG, 26AWGAmerican Wire Gauge是美制电线标准, 表示电缆直径. AWG值是导线厚度(以英寸计)的函数, 24AWG约为0.511mm&#xff0c;4pr表示有四对双绞线UTPUnshielded Twisted Pair 非…

Wireshark过滤器表达式的规则

1、抓包过滤器语法和实例 抓包过滤器类型Type&#xff08;host、net、port&#xff09;、方向Dir&#xff08;src、dst&#xff09;、协议Proto&#xff08;ether、ip、tcp、udp、http、icmp、ftp等&#xff09;、逻辑运算符&#xff08;&& 与、|| 或、&#xff01;非&…

《深入浅出WPF》学习笔记之深入浅出话属性

依赖属性是一种可以从父级元素继承&#xff0c;并且可以通过Binding从数据源获取&#xff0c;当从父级继承时不占用内存的属性系统。拥有依赖属性的对象称为依赖对象。WPF允许在创建对象时并不分配用于存储数据的空间&#xff0c;而在需要时实时分配空间或直接借用父级数据&…

sql 创建表时AUTO_INCREMENT=10

默认地&#xff0c;主键的开始值是 1&#xff0c;每条新记录递增 1&#xff0c;AUTO_INCREMENT10 代表初始值为10。

一年代码功能点的创新性怎么写_查新报告的查新点(创新点)写法,参考

创新点(查新点)写法参考(要求&#xff1a;尽量具体&#xff0c;简明扼要&#xff0c;突出核心亮点&#xff0c;用专业术语。不要写的笼统、抽象、宽泛、上位)。可从结构、技术、参数、功能等方面考虑(并非全部要写)&#xff1a;1、结构方面的创新(前面部分是具体的创新结构形式…

查询手机号段对应地区编码_2020陕西专升本考试今日起查询成绩啦

专升本考试顺利结束,我们终于迎来了验收成果的时刻,每位参与专升本的同学都是最棒的,现在 我们一起去揭秘考试成绩吧&#xff01;专升本成绩查询指南成绩查询及志愿填报登陆“陕西省教育考试院”或“陕西省招生考试信息网”陕西招生考试信息网http://www.sneac.com/陕西省教育…

李德仁院士:5G时代空间信息如何实现智能服务

李德仁院士来源&#xff1a;光明日报【编者按】随着5G时代的到来&#xff0c;物联网、云计算、大数据等技术快速发展。信息基础设施日益完善&#xff0c;全球时空大数据呈爆发式增长。在这样的时代背景下&#xff0c;如何实现空间感知和空间认知的智能化&#xff0c;在正确的时…

个人对响应式布局的理解

从字面上理解&#xff0c;响应式布局即CSS布局随着屏幕尺寸的变换而变化。首先我们要搞清楚什么是固定布局&#xff0c;什么是流式布局。固定布局(Fixed Layout)使用固定宽度的包裹(Wrapper), 内部的各个部分可以使用百分比或者固定的宽度来表示. 这里最重要的是, 外面的所谓包…

jmeter 不同场景 比例_在JMeter测试中如何根据业务场景来控制运行比例

性能测试混合场景中&#xff0c;我们需要组合多个业务操作到场景中来。比如有一个论坛的业务分布如下&#xff1a;开新帖与回复帖子的比例为2:3&#xff0c;那么我们在JMeter测试计划中如何控制其比例呢&#xff1f;下面我们介绍两种方式&#xff1a;1.多线程组方式2.逻辑控制器…

python爬取新浪新闻首页_学习了《python网络爬虫实战》第一个爬虫,爬取新浪新闻...

请安装anaconda,其中附带的spyder方便运行完查看变量 1.进入cmd控制台&#xff0c; 输入 pip install BeautifulSoup4 pip install requests 2.编写代码&#xff0c;代码已经很清晰了&#xff0c;直接运行不会报错并有成功的结果def getNewsDetail(newsUrl): import requests f…

sql去重查询

例如&#xff0c;从 "Websites" 表的 "country" 列中选取唯一不同的值 SELECT DISTINCT country FROM Websites;

计算机和人类“看”法不同,但这重要么?

来源&#xff1a;大数据文摘“看”这个动作一直被认为是生物所独有的。当工程师第一次“教”计算机“看”这个动作时&#xff0c;他们理所当然地认为计算机可以像人类眼睛一样进行观看。约克大学&#xff08;York University&#xff09;计算机科学家约翰托索斯&#xff08;Joh…

获取项目根路径,并在其下创建一个名称为userData 的目录。

NSArray *pathsNSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES); NSString *documentsDirectory [paths objectAtIndex:0]; // 创建文件系统管理器 NSFileManager *fileManager [[NSFileManageralloc] init]; // 判断userData 目录是否存在 …

svn拉取文件合并_SVN的分支使用

使用过git版本管理的同学大部分都使用过分支&#xff0c;git创建切换分支非常直观&#xff0c;SVN则相对来说没有那么强的分支的概念。本文主要介绍SVN中的分支使用。SVN默认的生成目录如下通常 branches 目录下为开发分支&#xff0c;tags 目录为标签目录&#xff0c;trunk 为…

python编程入门单例_python实现单例模式怎么写啊?

这个网上有很多的&#xff0c;你可以搜一搜&#xff0c;单例设计模式很多面试官都会考的&#xff0c;最好是记住一两个&#xff0c;我下面写一个例子给你看一下 使用__new__方法 在__new__方法中把类实例绑定到类变量_instance上&#xff0c;如果cls._instance为None表示该类还…