显示用户密码功能的总结

川长思鸟来 2022-02-23 12:37 202阅读 0赞

**大思路：**  
1.前台获取当前用户id  
2.前台将用户id传递后台  
3.后台根据用户id查询密码  
4.后台查询到的用户密码传给前台并显示

**思路细分：**  
1.前台获取当前用户id  
a.使用BootStrap在相应的jsp页面上添加显示密码按钮  
b.使用BootStrap创建弹框以及内容  
c.使用JavaScript给按钮和弹框绑定事件  
b.使用Angular.js获取用户id(Angular.js形式ajax)  
2.前台将用户id传递后台  
a.将获取到的用户id放入Angular.js  
b.使用Angular.js(ajax)将用户id传递给Controller的方法  
3.后台根据用户id查询密码  
a.Controller方法接收用户id  
b.调用ServiceImpl查询数据库的方法  
c.从集合中获取用户密码  
d.判断是否为空、设置ResponseResult(异步)  
响应HTTP状态码、设置响应数据、响应消息  
4.后台查询到的用户密码传给前台并显示  
a.使用ResponseResult类的属性加入用户密码信息  
b.前台使用Angular.js(ajax)接收后台的用户密码数据，并使用Angular.js显示用户密码

**具体代码实现：**

前台Jsp页面：

<a class="btn blue xianshi" href="javascript:;"
    data-ng-click="showPassword(agent);" onclick="tantan();">显示密码</a>
    
    
    	<div class="modal changepassesModal" id="chakankuang">
    		<div class="modal-dialog">
    			<div class="modal-content">
    				<div class="modal-header">
    
    					<button type="button" class="close" data-dismiss="modal"
    							aria-hidden="true" id="gb">×</button>
    					<h4 class="modal-title" id="myModalLabel">
    						<i class="icon-info"></i><span style="margin-left: .5em;">查看密码</span>
    					</h4>
    				</div>
    
    
    				<div class="form-horizontal" method="post" name="passForm"
    					  novalidate>
    					<div class="modal-body">
    						<div class="form-body">
    
                                <span style="position: relative; left: 180px; font-size: 18px;">
    								您的密码为：<span data-ng-bind="password"></span>
    							</span>
    						</div>
    					</div>
    
    					
    					<div class="modal-footer">
    						<button type="button" class="btn blue queding">确定</button>
    					</div>
    				</div>
    
    				
    			</div>
    		</div>
    	</div>
    
    
      function tantan() {
    			$("#chakankuang").show();
            }
    		
    		function chakan() {
               $("#chakankuang").show();
            }
    
            
    		$(".queding").click(function() {
    		    $("#chakankuang").hide();
    		})
    
            
    		$("#gb").click(function () {
    			$("#chakankuang").hide();
            })

前台JavaScript：

$scope.showPassword = function(agent){
    				// alert(JSON.stringify(obj[1]));
                    var id =agent[1];
                    $scope.password = " ";
                    $http.get('agent/showPass.smk?uid='+id, {
                        headers : {
                            'X-Requested-With' : 'XMLHttpRequest'
                        }
                    }).success(function(data) {
                        if (data.nologin === true) {
                            msgModal('登录超时,请点击确定重新登录', 'login/logout.smk');
                        } else {
    						if(data.status === 200){
                                $scope.password = data.data;
    						} else {
    
    						}
                        }
                    }).error(function() {
                        msgModal('亲，请求过于频繁，请稍后再试 ^_^');
                        $scope.nolist = '暂时无数据!';
                    });
    
    
                };

后台Controller：

@RequestMapping(value = "showPass",method = RequestMethod.GET)
    	@ResponseBody
    	public ResponseResult showPass(@RequestParam(defaultValue = "0") String uid){
          //System.out.println("当前用户id："+id);
    		ResponseResult responseResult = new ResponseResult();
    		if(StringUtils.isNotBlank(uid)) {
    			Map<String, String> paramMap = new HashMap<String, String>();
    			paramMap.put("id", uid);
    			List<User> userList = userService.findByCondition(paramMap, null, 1, new ArrayList<User>(0));
                //System.out.println(id + "用户的信息是:" + userList);
    			
    			String password = userList.get(0).getPasswordPlain();
    
                //System.out.println("当前用户的密码:"+password);
    			responseResult.setStatus(200);
    			responseResult.setData(password);
    		} else {
    			responseResult.setStatus(500);
    			responseResult.setMsg("");
    		}
    		
    		
    		return responseResult;
    	    }

过程中出现的问题：  
1.前台获取不到当前用户id  
2.没有进入ajax，ajax未生效  
3.DaoImpl中的查询sql未生效  
4.ajax没有进入Controller方法中  
5.ajax请求Controller方法 404  
6.获取不到list集合中的用户密码  
7.异步与同步的区分和概念  
8.前台取用户密码值显示不正确  
9.异步显示的用户密码需要先清空再加载