easyui+ssm+shiro做的登录注册修改密码审核用户(四)
修改密码页面的具体实现步骤
修改密码：根据输入原账号和原密码来判断是否存在改用户，若存在，再输入新密码和确认密码，这两个要一致，下面还要有个返回登录页面的a标签
根据这张效果图，我们可以需要一个form表单用来传递参数，参数一共有两个，还有两个按钮
修改密码的form表单代码如下，前端通过ajax把name值传给后台
<div class="form-bottom" style="height:400px;">
<form id="updatePwdForm" action="" method="post" class="login-form" target="iframe">
<div class="form-group">
<input type="text" class="form-control" name="username" id="usernameId" placeholder="请输入原账号" required="true" style="margin-left:3px;">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="pwdId" placeholder="请输入旧密码" required="true" style="margin-left:3px;">
</div>
<div class="form-group">
<input type="password" class="form-control" name="newPwd" id="newPwdId" placeholder="请输入新密码" required="true" style="margin-left:3px;">
</div>
<div class="form-group">
<input type="password" class="form-control" name="cfgPwd" id="cfgPwdId" onchange="confirmPwd()" placeholder="请再次确认密码" required="true" style="margin-left:3px;">
</div>
<div class="box-footer" style="padding-top:10px;">
<button id="savePassWord" type="submit" class="btn" onclick="doUpdatePwd()">保存密码</button>
<p></p>
<a style='color:blue' href='javascript:void(0)' title='返回登录页面' onclick='returnLogin()'><span style="font-size:16px;">返回登录页面</span></a>
</div>
</form>
<iframe id="iframe" name="iframe" style="display:none;"></iframe>
</div>第二步：根据保存密码按钮的 οnclick="doUpdatePwd()" 的方法修改用户密码信息，根据用户账号，用户密码，用户新密码这三个参数来修改密码，
var username = $("#usernameId").val(); 根据用户账号id获取用户账号
var password = $("#pwdId").val(); 根据用户密码id获取用户密码
var newPwd = $("#newPwdId").val(); 根据用户新密码id获取用户新密码
判断这三个是否为空，为空直接return，不为空就使用ajax传参，在注册的时候再做判断，如果原账号错误会弹出提示原账号错误，请重新输入 如果是原密码错误会弹出提示原密码错误，请重新输入，如果输入都正确就会弹出 "保存成功"
var t = "false";
function doUpdatePwd(){
var username = $("#usernameId").val();
var password = $("#pwdId").val();
var newPwd = $("#newPwdId").val();
if(username==''){
return;
}
if(password==''){
return;
}
if(newPwd==''){
return;
}
$.ajax({
dataType: false,
type : "post",
url : "${ctx}/shiroUpdatePwd",
data : {"userName" : username , "password" : password , "newPwd" : newPwd},
async: false,
success : function(data) {
if(data == "201"){
$.messager.alert('温馨提示','原密码错误，请重新输入!',"error");
}
if(data == "500"){
$.messager.alert('温馨提示','原账号错误，请重新输入!',"error");
}
if(data == "200"){
$.messager.alert('温馨提示','保存成功!');
}
},
error : function(){
}
})
}判断两次输入的密码是否一致，不一致则弹出提示 “两次输入密码不一致，请重新输入”
/* 验证新密码和确认密码是否一致 */
function confirmPwd(){
var password = $("#newPwdId").val();
var repassword = $("#cfgPwdId").val();
if(password == repassword) {
t="ture";
}else {
$.messager.alert('温馨提示',"两次输入密码不一致，请重新输入",'error');
t="false";
}
}效果如下图：
写后台接口之前要先在spring-shiro.xml和ShiroService里面加上shiro配置，如果不加的话绝对进不了后台，这是因为shiro框架在登录之前做了限制
ShiroService的初始化权限
/**
* 初始化权限
*/
public Map<String, String> loadFilterChainDefinitions() { // 权限控制map.从数据库获取
Map<String, String> filterChainDefinitionMap = new LinkedHashMap<String, String>();
filterChainDefinitionMap.put("/findUserByUserNamePassword", "anon");
filterChainDefinitionMap.put("/find", "anon");
filterChainDefinitionMap.put("/findUserByName", "anon");
filterChainDefinitionMap.put("/selUser", "anon");
filterChainDefinitionMap.put("/register", "anon");
filterChainDefinitionMap.put("/shiroRegister", "anon");
filterChainDefinitionMap.put("/updatePwd", "anon");
filterChainDefinitionMap.put("/sysUser/**", "anon");
filterChainDefinitionMap.put("/login", "anon");
filterChainDefinitionMap.put("/error/**", "anon");
filterChainDefinitionMap.put("/kickout", "anon");
filterChainDefinitionMap.put("/logout", "logout");
filterChainDefinitionMap.put("/css/**", "anon");
filterChainDefinitionMap.put("/js/**", "anon");
filterChainDefinitionMap.put("/img/**", "anon");
filterChainDefinitionMap.put("/libs/**", "anon");
filterChainDefinitionMap.put("/favicon.ico", "anon");
filterChainDefinitionMap.put("/verificationCode", "anon");
List<Permission> permissionList = permissionService.selectAll(1);
for (Permission permission : permissionList) {
if (StringUtils.isNotBlank(permission.getUrl()) && StringUtils.isNotBlank(permission.getPerms())) {
String perm = "perms[" + permission.getPerms() + "]";
filterChainDefinitionMap.put(permission.getUrl(), perm + ",kickout");
}
}
filterChainDefinitionMap.put("/**", "user,kickout");
return filterChainDefinitionMap;
}spring-shiro.xml的配置
<!-- 6. 配置ShiroFilter,id必须和web.xml中的DelegatingFilterProxy中的相同 -->
<bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean">
<property name="securityManager" ref="securityManager"/>
<property name="loginUrl" value="/login"/>
<property name="successUrl" value="/home"/>
<property name="unauthorizedUrl" value="/error"/>
<property name="filterChainDefinitions">
<value>
/selUser anon
/findUserByUserNamePassword anon
/find anon
/findUserByName anon
/login = anon
/shiroRegister = anon
/shiroLogin = anon
/register = anon
/shiroUpdatePwd = anon
/logout = logout
/updatePwd = anon
/editUser = anon
/sysUser/** = anon
/resource/** = anon
#everything else requires authentication:
/** = authc
</value>
</property>
</bean>配置好这两个之后就算没有登录也可以跳转到指定的修改密码页面
/**
* 加载修改密码页面
* @return
*/
@RequestMapping("/updatePwd")
public String toUpdatePwdPage(){
return "/security/updatepwd";
}写了这个之后，还要再到login.jsp页面写个修改密码的跳转方法
//修改方法
function updatePwd(){
location.href = "${ctx}/updatePwd";
}第三步：修改密码的后台接口
把从前端用Ajax传递过来的参数放到updatePwd方法的参数中去，前后端如果name不一致可以用@RequestParam进行接收
直接return userService的updatePwd方法,传userName,password,newPwd参数
/**
*修改用户密码
* @param username
* @param password
* @param request
* @return
*/
@RequestMapping("/shiroUpdatePwd")
@ResponseBody
public String updatePwd(@RequestParam String userName,@RequestParam String password, @RequestParam String newPwd) {
return userService.updatePwd(userName, password, newPwd);
}修改密码的service实现方法
改方法的业务逻辑如下：
先调用userDao里面的根据用户名查询用户的方法，如果用户为空直接返回字符串500，else if用户不为空，就把修改好的密码用shiro加密方法加密，再判断如果 !user.getPassword().equals(pwd); 原密码与当前加密的密码不相等,就直接返回字符串201,如果是其他的情况，就把修改好的新密码用MD5加密，然后设置密码为新加密的密码，调用userDao的updateUserPwd方法
/**
* 修改用户密码
*/
@Override
public String updatePwd(String userName,String password,String newPwd) {
User user = userDao.findUserByName(userName);
if(user == null){
System.out.println("原账号错误");
return "500";
}else if(user != null){
String pwd = jiami(userName,password);
if(!user.getPassword().equals(pwd)){
System.out.println("原密码错误");
return "201";
}else{
// 将用户名和新密码封装为UsernamePasswordToken对象
UsernamePasswordToken token = new UsernamePasswordToken(userName,newPwd);
//MD5加密密码
String hashAlgorithName = "MD5";
Object credentials = newPwd;
Object salt = ByteSource.Util.bytes(userName);
int hashIterations = 1024;
Object result = new SimpleHash(hashAlgorithName,credentials,salt,hashIterations);
//设置密码为新加密的密码
user.setPassword(String.valueOf(result));
//设置用户名
user.setUserName(userName);
/*HashMap<String,String> para1=new HashMap<String,String>();
para1.put("userName", userName);
para1.put("newPwd", String.valueOf(result1));*/
//调用userDao的updateUserPwd方法根据id和密码修改用户密码
userDao.updateUserPwd(user.getId(),String.valueOf(result));
return "200";
}
}
return "";
}修改密码的UserDao接口
参数：id和password
/**
* 修改用户密码
* @param username
* @param ordpPassword
* @param password
*/
int updateUserPwd(@Param("id") String id,@Param("password")String password);修改密码的UserMapper.xml
根据用户id修改用户密码，parameterType是java.lang.String类型
<!-- 修改用户密码 -->
<update id="updateUserPwd" parameterType="java.lang.String">
update SYS_USER
set
PASSWORD=#{password}
where
ID=#{id}
</update>解决form表单一保存就自动刷新的问题
在form表单上加个 target="iframe" 的属性，在form表单外面加个<iframe id="iframe" name="iframe" style="display:none;"></iframe>
<form id="updatePwdForm" action="" method="post" class="login-form" target="iframe">
<form>
<iframe id="iframe" name="iframe" style="display:none;"></iframe>修改密码页面的完整jsp代码
<%@page import="java.net.InetAddress"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="com.yhzn.common.util.ConfigUtil"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<%
String hostAddress = "";
try{
InetAddress address = InetAddress.getLocalHost();
hostAddress = address.getHostAddress();
}catch(Exception e){
e.printStackTrace();
}
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title><%=ConfigUtil.getConfig("companyName") %></title>
<meta name="description" content="User login page" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- CSS -->
<link rel="stylesheet"
href="${ctx}/resource/plugins1/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="${ctx}/resource/plugins1/assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="${ctx}/resource/plugins1/assets/css/form-elements.css">
<link rel="stylesheet"
href="${ctx}/resource/plugins1/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="${ctx }/resource/plugins/easyui-me/columns.css">
<link rel="stylesheet" type="text/css" href="${ctx }/resource/plugins/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${ctx }/resource/plugins/easyui-me/style.css">
<link rel="stylesheet" href="${ctx }/resource/plugins/validform/Validform.css" />
<script src="${ctx }/resource/plugins/easyui/jquery.min.js"></script>
<script src="${ctx }/resource/plugins/easyui/jquery.easyui.min.js"></script>
<script src="${ctx }/resource/plugins1/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx }/resource/plugins1/assets/js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="${ctx }/resource/plugins/validform/Validform_v5.3.2_min.js"></script>
<style type="text/css">
.form-control:{
margin-top:10px;
}
</style>
</head>
<body>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1><strong><%=ConfigUtil.getConfig("companyName") %></strong></h1>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>修改密码</h3>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<!-- easyui-combotree -->
<div class="form-bottom" style="height:400px;">
<form id="updatePwdForm" action="" method="post" class="login-form" target="iframe">
<div class="form-group">
<input type="text" class="form-control" name="username" id="usernameId" placeholder="请输入原账号" required="true" style="margin-left:3px;">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="pwdId" placeholder="请输入旧密码" required="true" style="margin-left:3px;">
</div>
<div class="form-group">
<input type="password" class="form-control" name="newPwd" id="newPwdId" placeholder="请输入新密码" required="true" style="margin-left:3px;">
</div>
<div class="form-group">
<input type="password" class="form-control" name="cfgPwd" id="cfgPwdId" onchange="confirmPwd()" placeholder="请再次确认密码" required="true" style="margin-left:3px;">
</div>
<div class="box-footer" style="padding-top:10px;">
<button id="savePassWord" type="submit" class="btn" onclick="doUpdatePwd()">保存密码</button>
<p></p>
<a style='color:blue' href='javascript:void(0)' title='返回登录页面' onclick='returnLogin()'><span style="font-size:16px;">返回登录页面</span></a>
</div>
</form>
<iframe id="iframe" name="iframe" style="display:none;"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
/*
* 全屏背景图
*/
$.backstretch("resource/plugins1/assets/img/backgrounds/33.jpg");
/*
Form validation
*/
$('.login-form input[type="text"], .login-form input[type="password"], .login-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});
});
function returnLogin(){
window.location.href="${ctx}/login"
}
var t = "false";
function doUpdatePwd(){
var username = $("#usernameId").val();
var password = $("#pwdId").val();
var newPwd = $("#newPwdId").val();
if(username==''){
return;
}
if(password==''){
return;
}
if(newPwd==''){
return;
}
$.ajax({
dataType: false,
type : "post",
url : "${ctx}/shiroUpdatePwd",
data : {"userName" : username , "password" : password , "newPwd" : newPwd},
async: false,
success : function(data) {
if(data == "201"){
$.messager.alert('温馨提示','原密码错误，请重新输入!',"error");
}
if(data == "500"){
$.messager.alert('温馨提示','原账号错误，请重新输入!',"error");
}
if(data == "200"){
$.messager.alert('温馨提示','保存成功!');
}
},
error : function(){
}
})
}
/* 验证新密码和确认密码是否一致 */
function confirmPwd(){
var password = $("#newPwdId").val();
var repassword = $("#cfgPwdId").val();
if(password == repassword) {
t="ture";
}else {
$.messager.alert('温馨提示',"两次输入密码不一致，请重新输入",'error');
t="false";
}
}
</script>
</body>
</html>
扫一扫
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
