大思路:
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>
<!-- 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.异步显示的用户密码需要先清空再加载