基于YangMVC的异步密码修改
贺运良
1 环境：
前端HTML+JQuery + Jquery weui，后端 YangMVC框架。 使用异步加载方法验证用户。
2 功能
实现修改密码。
3 数据
在localStorage.uid中存储了用户的id
4 思路
通过localStorage读取uid，然后使用JQuery的 $.post发送请求给服务器。将
uid、原密码、新密码发送给服务器。
服务器完成验证和修改密码操作。
5 代码实现
1.确认修改哪个用户
通过调用用户名即uid，确认需要修改密码的用户（获取主键）
Model m=T("usr").get(param("uid"));//获取主键（获取到你需要修改的在usr表中的哪一行用户）
if(m==null){
outputJSON(Ret.fail("用户不存在"));//判断用户是否存在
return;
}2.判断输入的原密码是否正确
···java
if(m.get(“pwd”).equals(param(“pwd”))){//判断原密码和前端输入的旧密码是否正确
}
3.原密码输入正确之后，用输入的新密码替代原密码，保存修改后，即修改成功
```java
if(m.get("pwd").equals(param("pwd"))){
m.put("pwd", param("newpwd")).save();//将密码修改成新密码并保存
outputJSON(Ret.ok("修改成功"));
}else{
outputJSON(Ret.fail("原密码不对"));
}
<div class="se-preview-section-delimiter"></div>
6 完整代码
6.1 前端
“`
# 6 完整代码
## 6.1 前端
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css" />
<link rel="stylesheet" type="text/css" href="iconfont.css" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.haha{
background-color: #62b900;
height: 150px;
width: 100%;
display: block;
}
.top img{
float:left;
width: 65px;
margin-top:40px;
margin-left:40px;
}
.top p{
float:left;
display: block;
margin-top:60px;
margin-left: 20px;
font-size: 26px;
color:black;
font-family: 微软雅黑;
}
.money a{
margin-left: 30px;
font-size: 60px;
font-family:黑体;
display: block;
}
.re img{
float:left;
width: 20px;
margin-top:10px;
margin-left:15px;
}
h1,table{
text-align: center;
font-family:黑体;
}
tr{
width: 200px;
height: 30px;
}
td{
width: 300px;
height: 30px;
}
.ag{
position:fixed;
bottom:0px;
height: 52px;
width: 400px;
}
.ss{
margin-left: 15px;
}
</style>
</head>
<body>
<div class="haha">
<div class="re">
<a href="setup.html"><img src="img/return.png" alt="" /></a></div>
<div class="top">
<img src="img/change_number.png" alt="" />
<p>修改密码</p></div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">旧密码</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="input" placeholder="请输入当前密码" id="pwd">
</div>
</div>
<pre> </pre>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">新密码</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="input" pattern="[0-6]*" placeholder="请输入新密码" id="newpwd">
</div>
</div>
<pre> </pre>
<a href="#" class="weui-btn weui-btn_primary" onclick="change()">OK</a>
<script>
function change(){
$.post("http://localhost:8080/change",{
pwd:$("#pwd").val(),
uid:localStorage.uid,
newpwd:$("#newpwd").val()
},
function(data,status){
//alert("数据: \n" + data.result + "\n状态: " + status);
if(status != "success"){
alert("网络无法连接");
return;
}
if(data.result == "ok"){
alert(data.msg);
location.href='setup.html';
}else{
alert(data.msg);
}
}
);
}
</script>
</body>
</html>
<div class="se-preview-section-delimiter"></div>
2后端代码
## 2后端代码
```java
public void change() {
Model m=T("usr").get(param("uid"));
if(m==null){
outputJSON(Ret.fail("用户不存在"));
return;
}
if(m.get("pwd").equals(param("pwd"))){
m.put("pwd", param("newpwd")).save();
outputJSON(Ret.ok("修改成功"));
}else{
outputJSON(Ret.fail("原密码不对"));
}
}
类似资料：