前言：
最近项目组需要做一个修改密码的功能，为大家介绍一下。
modify-password.html：
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">修改密码</h1>
</header>
<body>
<div class="username">请确认您现在登录的账户为：
<br>
<label><b>{{userCode}} {{userName}}</b></label>
</div>
<br>
<div>
<input id="password" type="password" placeholder="请输入原密码" maxlength="20" [(ngModel)]="passwordContent" pPassword />
</div>
<div>
<input id="newpassword" type="password" placeholder="请设置新密码" maxlength="20" [(ngModel)]="newpasswordContent" pPassword />
</div>
<div class="mod-form-block password input">
<input id="newagainpassword" type="password" placeholder="请再次确认新密码" maxlength="20" [(ngModel)]="newagainpasswordContent" pPassword />
</div>
<button id="login" type="submit" (click)='doSubmit()'>确定提交</button>
</body>modify-password.css：
body{
margin-left: 10%;
margin-top: 20%;
width: 80%;
font-size: 18px;
}
button{
font-family: "Microsoft YaHei","Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #3385ff;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 16px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
input:hover,input:active,input:focus {
border-color: #3385ff;
}modify-password.ts：
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { InterceptorService } from '../../../shared/interceptor.service';
import { LocalStorage } from '../../../shared/exam-configure.storage';
@Component({
selector: 'app-modify-password',
templateUrl: './modify-password.component.html',
styleUrls: ['./modify-password.component.css']
})
export class ModifyPasswordComponent implements OnInit {
constructor(
public router: Router,
public http: InterceptorService,
public storage: LocalStorage
) { }
ngOnInit() {
this.beginEnter();
}
//输入框的内容，通过双向绑定与输入框绑定
passwordContent: string;
newpasswordContent: string;
newagainpasswordContent: string;
//后端传来的数据
userId: any;
userCode: string;
userName: string;
password: string;
beginEnter() {
document.getElementById("password").focus();
//显示教师登录的用户名
let userId = localStorage.getItem('userId');
if (userId != null && userId != '') {
this.userId = localStorage.getItem("userId");
this.userCode = localStorage.getItem('userCode');
this.userName = localStorage.getItem('userName');
this.password = localStorage.getItem('passWord');
} else {
mui.alert('读取用户失败，请重新登录！', '提示', function () {
});
this.router.navigateByUrl('login');
}
}
/**
* 判断字符串是否为 null或为 "" 值，是则返回true，否返回false
* @param obj 字符串
*/
isStrEmpty(obj: string) {
if (obj == undefined || obj == null || obj.trim() == "") {
return true;
}
return false;
}
/**
* 提示框
*/
DiaMessage: "";
showDialog(string) {
this.DiaMessage = string;
this.display = true;
}
/** -------------修改用户密码-----------------
* @param password 密码
* @param newpassword 新密码
* @param newagainpassword 再次确认新密码
*/
message = "";
display = false;
doSubmit() {
if (this.isStrEmpty(this.passwordContent)) {
document.getElementById("password").focus();
mui.alert('原始密码不能为空，请填写原始密码！', '提示', function () {
});
return;
}
if (this.isStrEmpty(this.newpasswordContent)) {
document.getElementById("newpassword").focus();
mui.alert('新密码不能为空，请填写新密码！', '提示', function () {
});
return;
}
if (this.isStrEmpty(this.newagainpasswordContent)) {
document.getElementById("newagainpassword").focus();
mui.alert('确认新密码不能为空，请确认新密码！', '提示', function () {
});
return;
}
if (this.password != this.passwordContent) {
document.getElementById("password").focus();
mui.alert('原密码核对失败，请重新输入原密码进行验证！', '提示', function () {
});
this.passwordContent = "";
this.newpasswordContent = "";
this.newagainpasswordContent = "";
return;
}
if (this.newpasswordContent != this.newagainpasswordContent) {
mui.alert('两次输入的新密码不同，请重新确认新密码！', '提示', function () {
});
document.getElementById("newagainpassword").focus();
this.newagainpasswordContent = "";
return;
}
if (this.password == this.newpasswordContent) {
mui.alert('新密码与原密码相同，请重新设置新密码！', '提示', function () {
});
document.getElementById("newpassword").focus();
this.newpasswordContent = "";
this.newagainpasswordContent = "";
return;
}
else {
/**
* 修改密码
* @param userId 用户id
* @param userCode 用户code
* @param password 新的密码
* @return 是否修改成功
*/
if (this.newpasswordContent != null) {
let modifypasswordUrl = 'authorityManagement-web/user/updateUserPassword/' + this.userId + '/' + this.userCode + '/' + this.newpasswordContent;
this.http.post(modifypasswordUrl, '').toPromise().then(
res => {
if (res.json().code == '0000') {
mui.alert('恭喜你，密码修改成功,请使用新密码重新登录！', '提示', function () {
});
this.passwordContent = "";
this.newpasswordContent = "";
this.newagainpasswordContent = "";
//修改密码后用户需要用新密码重新登录
this.logout();
} else {
mui.alert('修改密码失败，请重新修改密码！', '提示', function () {
});
}
}
)
}
}
}
//退出
logout() {
const UserCode = localStorage.getItem('userCode');
const quitURL = 'authorityManagement-web/access/logout/' + UserCode;
this.http.get(quitURL).subscribe(
res => {
if (res.json().code == '0000') {
localStorage.clear();
this.router.navigateByUrl('login');
}
}
);
}
}实现效果：
小结：
逻辑和功能实现其实并不难，多做一做收获更多！