修改密码功能的实现

需求：当点击"修改密码"按钮时，出现弹窗，用户在弹窗上可以进行更改密码的操作。

所用技术：Angular.js + BootStrap + JavaScript + JQuery + Ajax + Hibernate。

具体实现过程：

1.在当前页面添加"修改密码"按钮。

2.关于前台的一些操作。
点击"修改密码"按钮出现弹框。需要准备弹框和弹窗的内容即新密码和确认密码，和如何让弹窗显示，
还有弹窗右上角的x按钮的关闭事件、弹窗右下角的"关闭"按钮的关闭事件、以及获取用户的id值。
对用户输入密码的位数进行判断、两次密码的输入内容是否一致进行比较、
用户点击完"确定"按钮后，进行提示密码修改成功和隐藏弹框。
使用ajax将前台的数据参数传到后台Controller的指定方法中。

<div class="modal changepassesModal" id="tanchukuang">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<!-- 创建隐藏域，得到uid用户的id(js中无法使用el)，因为修改当前用户的密码，首先要知道获取当前用户所在数据表中的id-->
				<input name="uiid" type="hidden"/>
				<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true" id="gb">&times;</button>
				<h4 class="modal-title" id="myModalLabel">
					<i class="icon-info"></i><span style="margin-left: .5em;">修改密码</span>
				</h4>
			</div>

			<!-- BEGIN FORM 修改密码的第一要素：输入新密码-->
			<form class="form-horizontal" method="post" name="passForm"
				  novalidate>
				<div class="modal-body">
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3">新密码</label>
							<div class="input-icon col-md-7">
								<i class="fa fa-lock" style="margin-left: 1.5em;"></i> <input
									class="form-control placeholder-no-fix" type="password"
									placeholder="新密码" name="StorePassword" id="StorePassword" required /><span
									class="help-block" hidden   minlength="6" maxlength="6"
							></span>
							</div>
						</div>
						<!-- 修改密码的第二要素：确定新密码-->
						<div class="form-group">
							<label class="control-label col-md-3">确认密码</label>
							<div class="controls">
								<div class="input-icon col-md-7">
									<i class="fa fa-check" style="margin-left: 1.5em;"></i>
									<input class="form-control placeholder-no-fix" type="password"
										   placeholder="确认密码" name="newStorePassword" id="newStorePassword" required/><span
										class="help-block" hidden  minlength="6" maxlength="6"
								></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 关闭和确定修改-->
				<div class="modal-footer">
					<button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn blue queding">确定</button>
				</div>
			</form>

			<!-- END FORM-->
		</div>
	</div>
</div>

3.后台Controller方法接收参数uid(用户的id)和password(用户所修改的新密码)进行处理：
//@RequestMapping()注解代表的是给当前方法起一个外资源进行访问的名称，value为名称，method为请求方式。
@RequestMapping(value = “updatePassword”,method = RequestMethod.POST)
@ResponseBody //使用@ResponseBody接收前台ajax传来的json类型的数据参数
/**
* 接收前台传来的uid和password，使用@RequestParam来进行接收
/
public Map<String, String> updatePassword(@RequestParam(defaultValue = “0”) String uid, @RequestParam(defaultValue = “0”) String password){
Map<String,String> map = new HashMap<String,String>();
/*
* 随机生成6位字符，调用已封装好类BaseUtils和它的静态方法getCharAndNumr(int count);
* 返回值为String类型。
/
String random = BaseUtils.getCharAndNumr(6);
/*
* MD5加密：由于需要对接收到前台用户输入的密码进行加密，
* 先调用已经封装好的BaseUtils类和它的静态方法getMD5(String str)进行加密。
/
String newPassword = BaseUtils.getMD5(password); //password为前台ajax传来的用户输入的密码
/*
*由于MD5加密后的密码还不够安全，所以需要加盐值，也就是上面所随机生成的6位字符。
*MD5加密+盐值
*/
String lastPassWord = BaseUtils.getMD5(newPassword+random);
//将最终加密后的用户密码加入map中
map.put(“password”,lastPassWord);
//调用Service业务层的更新数据库操作的方法,在调用之前，需要将UserService接口进行使用注解
//@Autowired
//private UserService userService; 进行配入当前Controller中
userService.updateNewByCondition(map,uid);
return map;
}

4.在相应的Dao数据层接口中创建实现更改数据库用户密码操作的方法：
该方法里有两个参数，分别是Map类型的map和String类型的uid，
map里有前台传来的用户密码，uid是当前用户在数据库中的唯一id值。

在Dao数据层接口中的实现类中实现Dao数据层接口中的更改数据库操作的方法，
里面的内容是对数据库进行更改密码的具体代码实现：
@Override
public void updateNewByCondition(Map<String, String> map, String uid) {

String sql = “update smk_user set “; //具体的sql语句，更新表
String hql = “”;
//遍历password的key和value,得到password
for (Map.Entry<String, String> entry : map.entrySet()) {
hql += " u_” + entry.getKey() + " = '” + entry.getValue() + “’,”;
}
//不为空判断，截取","
if (StringUtils.isNotBlank(hql)) {
hql = hql.substring(0, hql.length() - 1);
}
//sql语句的拼接，给uid加上’’
sql = sql + hql +" where id =’"+uid+"’";
//查看控制台输出的sql语句正确与否
System.out.println("sql = "+sql);
//执行sql语句更新操作
Query query = getSessions().createSQLQuery(sql);
query.executeUpdate();
}

在Service业务层接口中创建与Dao数据层接口一样的方法：

然后在Service业务层接口的实现类ServiceImpl中实现Service业务层接口中的方法：

里面调用的是Dao数据层接口中的方法，所以，需要把具体的sql写在Dao数据层接口的实现类DaoImpl中，
在Controller中直接调用 即可。

总结：

一、前台需要做的：
1.创建"修改密码"按钮。
2.创建弹窗，添加弹窗内容，点击"修改密码"按钮弹窗出现。
3.给弹窗添加关闭事件。
4.判断两次密码输入内容是否一致，并提示用户：“密码输入不一致”。
5.判断密码输入内容不能为空，并提示用户：“密码不得为空”。
6.判断密码输入位数进行限定，并提示用户:“密码只可为6位”。
7.判断两次密码输入内容一致，并提示用户：“密码修改成功”。
8.提示"密码修改成功"后给弹窗添加隐藏事件。
9.将当前用户的uid值和password密码获取到，并交给ajax去处理，ajax将uid和password参数传给后台Controller。

二、后台需要做的：
1.给Controller方法创建外来资源访问的名称，和相对应的请求方法。
2.添加注解@ResponseBody接收ajax中json类型的数据参数。
3.在Controller方法中使用@RequestParam接收前台传来的uid和password参数值。
4.生成6位随机数，把前台传来用户输入的密码进行MD5加密处理，再加盐值即为最终数据库需要存储的用户密码。
5.将最终经过加密后的密码加入到map中。
6.在Dao数据层接口中创建需要修改数据库用户密码的方法，在Dao数据层接口中的实现类DaoImpl中进行实现，
实现类里是对数据库用户密码修改的具体操作的代码实现。
7.在Service业务层接口中创建与Dao数据层接口中一致的方法，在Service业务层接口的实现类ServiceImpl中实现Service业务层接口中的 此方法，方法体里调用的是Dao数据层接口中的方法。
8.在Controller中进行调用Service接口的此方法即可，在调用之前需要使用注解@Autowired 把Service接口装配进来。

扫描二维码关注公众号，回复： 5705305 查看本文章