修改密码功能的实现

谁借莪１个温暖的怀抱￠ 2022-02-26 02:46 414阅读 0赞

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

## 所用技术： BootStrap + JavaScript + JQuery + Ajax + Hibernate。 ##

![在这里插入图片描述][20190328163820907.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]  
**具体实现过程：**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 3]  
**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值。  
![在这里插入图片描述][20190329091821864.png]  
在Dao数据层接口中的实现类中实现Dao数据层接口中的更改数据库操作的方法，  
里面的内容是对数据库进行更改密码的具体代码实现：  
@Override  
public void updateNewByCondition(Map<String, String> map, String uid) \{

String sql = “update smk\_user set “; //具体的sql语句，更新表  
String hql = “”;  
//遍历map中对象的key和value。  
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数据层接口一样的方法：  
![20190329093216343.png][]  
然后在Service业务层接口的实现类ServiceImpl中实现Service业务层接口中的方法：  
![在这里插入图片描述][20190329093303451.png]  
里面调用的是Dao数据层接口中的方法，所以，需要把具体的sql写在Dao数据层接口的实现类DaoImpl中，  
在Controller中直接调用![在这里插入图片描述][20190329093413793.png] 。

但是现在有一个问题，数据库里虽然保存了用户所新修改的密码md5密文，  
当用户去使用这个新密码去登录时，还是会登录不上。  
因为数据库中没有去保存用户所新修改的密码明文，保存的仍然是用户之前的旧密码的明文，  
也没有保存随机生成的6位盐值，用户登录使用账号和新密码去登录时，  
需要去与数据库中的当前用户所对应的md5密文进行比对，所以，需要去保存这两个值。  
![在这里插入图片描述][20190329110243394.png]

**总结：**

**一、前台需要做的：**  
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接口装配进来。  
9.不要忘记保存用户新密码明码和随机生成的6位盐值存储数据库中。

[20190328163820907.png]: /images/20220226/1fd95e1144824b1da46383f41d98e52c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]: /images/20220226/ff31f35e549947d386c4d6da91d07bc9.png
[20190328164228764.png]: /images/20220226/6b808dd4fdf1489b9f7f716576a62249.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 1]: /images/20220226/e62f519f62a7475185bcfc841911ae27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190328164946628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 3]: /images/20220226/6541070de7854271aa04964492076def.png
[20190329091821864.png]: /images/20220226/ffd2d427ee654cfe8bdb5126b130ad95.png
[20190329093216343.png]: /images/20220226/eee910ee0a3e4ea6915c5900359673fb.png
[20190329093303451.png]: /images/20220226/0991c04965634c549640f39661672438.png
[20190329093413793.png]: /images/20220226/f5e2de43ebf84e61a2d271f944bf4c5d.png
[20190329110243394.png]: /images/20220226/cb359340c8c8417c86763b63c0ef80de.png