显示用户密码功能的总结

本文总结了显示用户密码功能的实现步骤,包括前端获取用户ID、通过Ajax传递ID到后台、后台查询密码并返回。在实现过程中遇到了诸如获取用户ID失败、Ajax请求问题、查询SQL无效等挑战,详细探讨了异步与同步的区别,并记录了解决这些问题的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大思路:
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">&times;</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>

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


  function tantan() {
			$("#chakankuang").show();
        }
		<!-- 点击显示密码按钮出现弹窗-->
		function chakan() {
           $("#chakankuang").show();
        }

        <!-- 确定按钮的关闭事件-->
		$(".queding").click(function() {
		    $("#chakankuang").hide();
		})

        <!--  弹窗右上角x的关闭事件-->
		$("#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.异步显示的用户密码需要先清空再加载

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值