逻辑处理：
1.输入原密码与数据库中查询处理的密码进行匹配
2.匹配成功,更新数据库密码字段值
回调处理：
密码修改成功(服务器处理完成)以后,重定位到登录页面
-----------------------------------------------------------------------------------------------------------------------
Dao接口：
//根据userId查找User,用于验证密码是否正确,以便于修改密码
public User findByUserId(String userId);
public int modifyPassword(Map params);//修改密码注意：第一个方法根据userId查找对应的用户，第二个方法用于修改密码
-----------------------------------------------------------------------------------------------------------------------
Mapper文件：
<!-- 根据userId查找User,用于验证密码是否正确,以便于修改密码 -->
<select id="findByUserId" parameterType="string" resultType="cn.tedu.cloud_note.entity.User">
select * from cn_user where cn_user_id = #{userId}
</select>
<!-- 修改密码 -->
<update id="modifyPassword" parameterType="map">
update cn_user set cn_user_password = #{newPwd}
where cn_user_id = #{userId}
</update>注意：修改密码的时候需要两个参数，一个是userId，一个是新输入的密码
-----------------------------------------------------------------------------------------------------------------------
业务层接口：
//根据userId修改密码
public NoteResult<Object> modifyPassword(String userId,String lastPwd,String newPwd);注意：传入三个参数，userId，原始密码，新密码，userId用于找到是哪一条记录
-----------------------------------------------------------------------------------------------------------------------
业务层实现类：
//修改密码
public NoteResult<Object> modifyPassword(String userId,String lastPwd,String newPwd) {
//先对两个密码进行md5加密处理
String md5LastPwd = NoteUtil.md5(lastPwd);
String md5NewPwd = NoteUtil.md5(newPwd);
NoteResult<Object> result = new NoteResult<Object>();
//密码校验(输入密码与原密码是否符合)
User user = userDao.findByUserId(userId);
if(user == null){//密码不存在
result.setStatus(2);
result.setMsg("密码不存在");
return result;
}
String pwd = user.getCn_user_password();//查询的密码
if(!md5LastPwd.equals(pwd)){//查询出的密码和用户输入的密码不匹配
result.setStatus(3);
result.setMsg("密码错误");
return result;
}
//验证密码正确后,修改新输入的密码
//服务器传入两个参数,newPwd为新的密码,要进行MD5加密处理,然后将两个参数放入Map
Map<String,Object> params = new HashMap<String,Object>();
params.put("userId", userId);
params.put("newPwd", md5NewPwd);
userDao.modifyPassword(params);
int rows = userDao.modifyPassword(params);
if(rows == 1){
result.setStatus(0);
result.setMsg("修改密码成功");
return result;
}
result.setStatus(1);
result.setMsg("修改密码失败");
return result;
}
result.setStatus(0);
result.setMsg("修改密码成功");
return result;
}
result.setStatus(1);
result.setMsg("修改密码失败");
return result;
}
}注意：传入三个参数，先将原始密码和新密码进行MD5加密处理，通过userId找到该User，验证原始密码是否正确，若正确则修改密码
-----------------------------------------------------------------------------------------------------------------------
Controller层：
package cn.tedu.cloud_note.controller;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.tedu.cloud_note.service.UserService;
import cn.tedu.cloud_note.util.NoteResult;
//修改密码
@Controller
@RequestMapping("/user")
public class ModifyPwdController {
@Resource(name="userService")
private UserService service;
@RequestMapping("/modify.do")
@ResponseBody
public NoteResult<Object> execute(String userId,String lastPwd,String newPwd){
NoteResult<Object> result = service.modifyPassword(userId,lastPwd,newPwd);
return result;
}
}-----------------------------------------------------------------------------------------------------------------------
点击修改密码后弹出以下修改页面：
进入修改密码的主页面
-----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>修改密码</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/login.css"/>
<script type="text/javascript" src="scripts/basevalue.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/cookie_util.js"></script>
<script type="text/javascript" src="scripts/base64.js"></script>
</head>
<body>
<div class="global">
<div class="sig sig_in" tabindex='4' id='zc'>
<dl>
<dt>
<div class='header'>
<h3>修改密码</h3>
</div>
</dt>
<dt></dt>
<dt>
<div class='letter'>
原密码: <input type="text" name="" id="last_password" tabindex='1'/>
<div class='warning' id='warning_1'><span></span></div>
</div>
</dt>
<dt>
<div class='letter'>
新密码: <input type="password" name="" id="new_password" tabindex='2'/>
<div class='warning' id='warning_2'><span></span></div>
</div>
</dt>
<dt>
<div class='password'>
确认新密码: <input type="password" name="" id="final_password" tabindex='3'/>
<div class='warning' id='warning_3'><span></span></div>
</div>
</dt>
<dt>
<div>
<input type="button" name="" id="changePassword" value=' 确 定 ' tabindex='4'/>
<input type="button" name="" id="back" value=' 关 闭 ' tabindex='5'/>
<script type="text/javascript">
function get(e){
return document.getElementById(e);
}
//单击返回按钮回退页面
get('back').onclick=function(){
get('zc').className='sig sig_out';
window.history.back();
window.opener=null;
window.open('','_self');
window.close();
}
//鼠标移出事件(校验格式)
window.onload=function(){
//原始密码的校验
$("#last_password").blur(function(){
var lpassword=$("#last_password").val().trim();
if(lpassword == ""){
$("#warning_1").show();
$("#warning_1 span").html("原密码不能为空");
}else{
$("#warning_1").hide();
}
});
//新密码的校验
$("#new_password").blur(function(){
var npassword=$("#new_password").val().trim().length;
if(npassword<6 && npassword>0){
$("#warning_2").show();
$("#warning_2 span").html("新密码长度过短");
}else if(npassword == ""){
$("#warning_2").show();
$("#warning_2 span").html("新密码不能为空");
}else{
$("#warning_2").hide();
}
});
//确认密码的校验
$("#final_password").blur(function(){
var npassword=$("#new_password").val().trim();
var fpassword=$("#final_password").val().trim();
if(npassword != fpassword){
$("#warning_3").show();
$("#warning_3 span").html("密码输入不一致");
}else{
$("#warning_3").hide();
}
});
//鼠标移入input时候,提示信息隐藏
$("#last_password").focus(function(){
$("#warning_1").hide();
});
$("#new_password").focus(function(){
$("#warning_2").hide();
});
$("#final_password").focus(function(){
$("#warning_3").hide();
});
//绑定确认按钮单击事件
$("#changePassword").click(function(){
//清空3个提示框的样式
$("#warning_1").hide();
$("#warning_2").hide();
$("#warning_3").hide();
//获取请求参数共计4个,用户输入的3个,还有一个是Cookie中的用户userId(是否超时)
var lastPwd = $("#last_password").val().trim();
var newPwd = $("#new_password").val().trim();
var finalPwd = $("#final_password").val().trim();
//Cookie中的userId
var userId = getCookie("userId");
//参数验证(要求密码不能为空)
var ok = true;
if(lastPwd == ""){
$("#warning_1 span").html("原密码不能为空");
$("#warning_1").show();
ok = false;
//此处不给与提示,后续不发送ajax
}
if(newPwd == ""){
ok = false;
$("#warning_2 span").html("新密码不能为空");
$("#warning_2").show();
}else if(newPwd.length <6 && newPwd.length>0){
ok = false;
$("#warning_2 span").html("新密码长度过短");
$("#warning_2").show();
}
if(finalPwd != newPwd){
$("#warning_3 span").html("密码输入不一致");
$("#warning_3").show();
ok = false;
}
if(userId == null){//超时2小时
ok = false;
window.location.href = "log_in.html";//跳转到登录页面
}
//发送ajax请求
if(ok){
$.ajax({
url:path + "/user/modify.do",
type:"post",
data:{"userId":userId,"lastPwd":lastPwd,"newPwd":newPwd},
dataType:"json",
success:function(result){
if(result.status == 0){//修改成功
//跳转到登录页面
window.location.href = "log_in.html";
}else if(result.status == 2){
//原始密码不存在
$("#warning_1 span").html(result.msg);
$("#warning_1").show();
}else if(result.status == 3){
//原始密码错误
$("#warning_1 span").html(result.msg);
$("#warning_1").show();
}
},
error:function(){alert("错误");}
});
}
});
}
</script>
</div>
</dt>
</dl>
</div>
</div>
</body>
</html>注意：
页面第一个功能：单击关闭按钮，返回之前的主页面；
页面第二个功能：鼠标移入和移出事件对input中输入信息的校验
例如：鼠标移入时候，input后面的提示信息不再显示，鼠标移出input时候，若符合格式则不显示提示，若不符合则显示提示；
页面第三个功能：单击确定按钮，会对三个input里面的信息进行校验（包括用户超时），若不符合，则提示信息，若符合，则跳转到登录页面；
-----------------------------------------------------------------------------------------------------------------------
js的页面还可以采用如下写法，不用每次移出input去校验，而是点击"确定"按钮后才提交校验，部分为js脚本校验，部分为ajax校验，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>修改密码</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/login.css"/>
<script type="text/javascript" src="scripts/basevalue.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/cookie_util.js"></script>
<script type="text/javascript" src="scripts/base64.js"></script>
<script type="text/javascript">
$(function(){
//关闭按钮-回退页面
$("#back").click(function(){
window.location.href = document.referrer;//referrer 属性可返回载入当前文档的文档的 URL
});
//修改密码
$("#changePassword").click(function(){
//获取参数
var userId = getCookie("userId");
var last_password = $("#last_password").val().trim();//原密码
var new_password = $("#new_password").val().trim();//新密码
var final_password = $('#final_password').val().trim();//确认密码
var ok = true;
//清除校验提示
$("#warning_1").hide();
$("#warning_2").hide();
$("#warning_3").hide();
//原密码校验--非空
if(last_password == ""){
ok = false;
$("#warning_1 span").html("原密码不能为空!");
$("#warning_1").show();
}
//新密码校验--非空 长度
if(new_password == ""){
ok = false;
$("#warning_2 span").html("新密码不能为空!");
$("#warning_2").show();
}else if(new_password.length < 6 && new_password.length > 0){
ok = false;
$("#warning_2 span").html("密码不能小于6位!");
$("#warning_2").show();
}
//确认密码
if(new_password != final_password){
ok = false;
$("#warning_3 span").html("输入密码不一致!");
$("#warning_3").show();
}
if(ok){
$.ajax({
url: path + "/user/modify.do",
type:"post",
data:{"userId":userId,"new_pwd":new_password,"old_pwd":last_password},
dataType:"json",
success:function(result){
if(result.status == 0){//定位到登录页面
window.location.href = "log_in.html";
}else if(result.status == 2){//原密码错误
$("#warning_1 span").html(result.msg);
$("#warning_1").show();
}
},
error:function(){
alert("修改密码失败");
}
});
}
});
});
</script>
</head>
<body>
<div class="global">
<div class="sig sig_in" tabindex='4' id='zc'>
<dl>
<dt>
<div class='header'>
<h3>修改密码</h3>
</div>
</dt>
<dt></dt>
<dt>
<div class='letter'>
原密码: <input type="text" name="" id="last_password" tabindex='1'/>
<div class='warning' id='warning_1'><span></span></div>
</div>
</dt>
<dt>
<div class='letter'>
新密码: <input type="password" name="" id="new_password" tabindex='2'/>
<div class='warning' id='warning_2'><span></span></div>
</div>
</dt>
<dt>
<div class='password'>
确认新密码: <input type="password" name="" id="final_password" tabindex='3'/>
<div class='warning' id='warning_3'><span></span></div>
</div>
</dt>
<dt>
<div>
<input type="button" name="" id="changePassword" value=' 确 定 ' tabindex='4'/>
<input type="button" name="" id="back" value=' 关 闭 ' tabindex='5'/>
</div>
</dt>
</dl>
</div>
</div>
</body>
</html>
扫一扫
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
