<template>
<div class="box">
<el-steps
:active="1"
finish-status="success"
simple
style="margin-top: 20px"
>
<el-step title="输入账号"></el-step>
<el-step title="重设密码"></el-step>
<el-step title="修改成功"></el-step>
</el-steps>
<div class="Maincontent">
<el-input
v-model="username"
prefix-icon="el-icon-user-solid"
placeholder="请输入您要更改的账号"
></el-input>
<br />
<el-button type="primary" @click="reconfirm()">确认提交</el-button>
<br />
</div>
<br />
<el-link @click="openEmali()" type="info">使用邮箱修改密码</el-link>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
username: "",
};
},
methods: {
openEmali() {
this.$router.push("/6/");
},
reconfirm() {
localStorage.setItem("username", this.username);
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8087/getUsername`,
// URL中的查询参数
//GET需要params参数;
params: {
username: this.username,
},
})
.then((res) => {
console.log(res.data.username);
if (res.status === 200 && res.data.username != null) {
this.$message.success("确定成功");
this.$router.push("/4/");
} else {
this.$message.error("没有这个账号");
}
})
.catch((err) => {
console.log(err);
this.$message.error("网络连接超时");
});
},
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
.main {
margin: 100px auto;
width: 1185px;
height: 800px;
border-radius: 5px 5px 5px 5px;
background-color: #fff;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.el-input {
margin-bottom: 20px;
margin-top: 100px;
}
.Maincontent {
margin-top: 100px;
}
</style>
<template>
<div class="box">
<el-steps
:active="2"
finish-status="success"
simple
style="margin-top: 20px"
>
<el-step title="输入账号"></el-step>
<el-step title="重设密码"></el-step>
<el-step title="修改成功"></el-step>
</el-steps>
<div class="Maincontent">
<el-input
v-show="false"
v-model="username"
class="begininput"
prefix-icon="el-icon-user-solid"
placeholder="请再次输入您的账号"
></el-input>
<br />
<el-input
v-model="Oldpassword"
prefix-icon="el-icon-view"
placeholder="请输入您之前的密码"
></el-input>
<br />
<el-input
class="endinput"
v-model="password"
prefix-icon="el-icon-view"
placeholder="请输入您要更改的密码"
></el-input>
<br />
<el-button @click="Update()" type="primary">确认修改</el-button>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
password: "",
Oldpassword: "",
username: "",
};
},
methods: {
Update() {
let uname = localStorage.getItem("username");
console.log(uname);
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8087/getIf`,
// URL中的查询参数
//GET需要params参数;
params: {
// username: this.username,
password: this.password,
word: this.Oldpassword,
username: uname,
},
})
.then((res) => {
console.log(res.data);
if (res.status === 200 && res.data >= 1) {
this.$message.success("修改成功");
this.$router.push("/5/");
localStorage.removeItem("username");
} else {
this.$message.error("修改失败");
}
})
.catch((err) => {
console.log(err);
this.$message.error("网络连接超时");
});
},
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
.main {
margin: 100px auto;
width: 1185px;
height: 800px;
border-radius: 5px 5px 5px 5px;
background-color: #fff;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.begininput {
margin-bottom: 3px;
}
.endinput {
margin-top: 1px;
margin-bottom: 30px;
}
.Maincontent {
margin-top: 50px;
}
</style>标签：username,axios,res,margin,localStorage,5px,使用,0px,方法 From： https://www.cnblogs.com/ZhuAo/p/16881994.html