easyui+ssm+shiro做的登录注册修改密码审核用户(三)
注册页面的具体实现步骤
根据这张效果图，我们可以需要一个form表单用来传递参数，参数一共有四个，还有两个按钮
注册的form表单代码如下，前端通过ajax把name值传给后台
<div class="form-bottom">
<form id="registerForm" action="" method="post" class="login-form">
<div class="form-group">
<input type="text" id="personId" name="personId" placeholder="请选择用户姓名..." class="easyui-combotree" required="true" style="width:100%;font-size: 16px;padding-left: 23px;">
</div>
<div class="form-group">
<input type="text" name="username" onchange="exties()" placeholder="请输入用户账号..." class="form-username form-control" id="form-username" required="true">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="请输入密码..." class="form-password form-control" id="form-password" required="true">
</div>
<div class="form-group">
<input type="password" onchange="checkpassword()" placeholder="再次输入密码..." class="form-password form-control" id="form-pasword" required="true" >
</div>
<span id="tishi"></span></input>
<br>
<button type="submit" class="btn" onclick="regist()">注册</button><!-- 使用button按钮事件 -->
<p></p>
<a style='color:blue' href='javascript:void(0)' title='返回登录页面' onclick='returnLogin()'><span style="font-size:16px;">返回登录页面</span></a>
</form>
</div>第一步：获取用户姓名的combotree
$(function(){
//获取用户姓名的combotree
$("#personId").combotree({
url : "${ctx }/sysUser/getSysPersonList",
data : {"personId":""},
method: 'get',
ines: true,
multiple: false,
onBeforeSelect: function (node) {
if(node.name){
$("#personId").tree("unselect");
}
}
})
});SysUserController控制类的getSysPersonList方法代码
/**
* 获取人员列表
* @param id
* @return
* @throws IOException
*/
@RequestMapping(value="/getSysPersonList",method= RequestMethod.GET)
@ResponseBody
public String getSysPersonList(String personId,HttpServletRequest request) throws IOException {
String str ="";
StringBuilder json = new StringBuilder();
HashMap<String,Object> map = new HashMap<String,Object>();
map.put("id", personId);
map.put("rootKey", "BMLBDM");
map.put("parentKey", "BMLBDM");
// 获取部门字典代码
List<SysDict> sysDictList = sysDictService.findDictListByMap(map);
// 遍历子节点下的子节点
if(sysDictList!=null && sysDictList.size()!=0){
json.append("[");
for (SysDict s : sysDictList) {
json.append("{\"id\":\"" +s.getId()+ "\"");
json.append(",\"text\":\"" +s.getDictValue() + "\"");
json.append(",\"state\":\"open\"");
json.append(",\"name\":\"parent\"");
map.put("dept", s.getDictValue());
// 该节点有子节点
// 设置为关闭状态,而从构造异步加载tree
List<Person> sList = personService.queryPersonListByMap(map);
if(sList!=null && sList.size()!=0){// 存在子节点
json.append(",\"children\":[");
json.append(dealSysJsonFormat(sList,personId));// 存在子节点的都放在一个工具类里面处理了
json.append("]");
}
json.append("},");
}
str = json.toString();
str = str.substring(0, str.length()-1);
str+="]";
}
return str;
} 第二步：根据注册按钮的 οnclick="regist()" 的方法注册用户信息，根据用户姓名，用户密码和用户的personId获取到对应的值
var personId = $("#personId").combotree("getValue"); 获取用户Id的下拉树 getValue获取的是id
var trueName= $("#personId").combotree("getText"); getText获取的是用户姓名
判断这四个是否为空，为空直接return
使用exists()方法判断账号是否存在
使用ajax传参，成功弹出提示 “注册成功,等管理人员审核！”
var t;
function regist(){
var username = $("#form-username").val();
var password = $("#form-password").val();
var personId = $("#personId").combotree("getValue");
var trueName= $("#personId").combotree("getText");
if(username==''){
return;
}
if(password==''){
return;
}
if(personId==''){
return;
}
if(trueName==''){
return;
}
if(!checkpassword()){
return;
}
exties();
if(t){
$.ajax({
dataType: "json",
type : "post",
url : "${ctx}/shiroRegister",
data : {"userName" : username,"password" : password,"personId" : personId,"trueName" : trueName},
async: false,
success : function(data) {
$.messager.alert("提示","注册成功,等管理人员审核！");
},
error : function(){
}
})
}
}写后台接口之前要先在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("/register")
public String toRegistPage(){
return "/security/register";
}
写了这个之后，还要再到login.jsp页面写个注册用户的的跳转方法
function register(){
location.href = "${ctx}/register";
}注册的controller接口
大致思路就是注册用户其实就是添加用户
先把从前端用Ajax传递过来的参数放到register方法的参数中去，前后端如果name不一致可以用@RequestParam进行接收
先创建一个用户，然后再把传过来的参数set进去，注册的密码要用MD5加密，然后再调用userService的register方法
/**
* 注册
* @param username
* @param password
* @param request
* @return
*/
@RequestMapping(value="/shiroRegister", method = RequestMethod.POST)
@ResponseBody
public String register(@RequestParam("userName") String userName, @RequestParam("password") String password,@RequestParam("trueName") String trueName,@RequestParam("personId") String personId,HttpServletRequest request) {
User user = new User();
user.setUserName(userName);
user.setPassword(password);
user.setTrueName(trueName);
user.setPersonId(personId);
//shiro盐值加密
String hashAlgorithName = "MD5";
Object credentials = user.getPassword();
Object salt = ByteSource.Util.bytes(user.getUserName());
int hashIterations = 1024;
Object result = new SimpleHash(hashAlgorithName,credentials,salt,hashIterations);
user.setPassword(String.valueOf(result));
String msg= userService.register(user);
return msg;
}注册用户的service实现类
定义一个字符串为msg，后面有用，设置一个随机id，设置创建时间，设置修改时间，设置删除标识为0，设置审核标识，1标识未通过
在根据人员id查询人员的详细信息，人员id是通过user.getPersonId()方法获取到的
if判断如果人员不为null就给用户设置用户姓名和用户部门，这两个都是通过person类的get方法获取到的
msg = "{\"info\":\"注册成功！\",\"status\":\"y\"}";
/**
* 用户注册
*/
@Override
public String register(User user) {
String msg = "";
user.setId(UUID.randomUUID().toString().replaceAll("-", ""));
user.setCreateDate(new Date());
user.setDeleteFlag("0");
//1表示审核未通过
user.setState("1");
user.setCreateName(user.getTrueName());
user.setModifyDate(new Date());
//根据人员id查询人员详细信息
Person person = personDao.queryPersonInfoById(user.getPersonId());
if(person!=null){
user.setTrueName(person.getName());//姓名
user.setDept(person.getDept());//部门
}
userDao.register(user);
msg = "{\"info\":\"注册成功！\",\"status\":\"y\"}";
return msg;
} 注册用户的UserDao接口
//用户注册
int register(User user);注册用户的UserMapper.xml
<!-- 用户注册 -->
<insert id="register" parameterType="com.yhzn.model.security.User">
insert into SYS_USER
<trim prefix="(" suffix=")" suffixOverrides=",">
ID,
PERSON_ID,
ROLE_ID,
USER_NAME,
PASSWORD,
TRUE_NAME,
ROLE_NAME,
DEPT,
REMARK,
DELETE_FLAG,
CREATE_NAME,
CREATE_DATE,
STATE
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
#{id,jdbcType=VARCHAR},
#{personId,jdbcType=VARCHAR},
#{roleId,jdbcType=VARCHAR},
#{userName,jdbcType=VARCHAR},
#{password,jdbcType=VARCHAR},
#{trueName,jdbcType=VARCHAR},
#{roleName,jdbcType=VARCHAR},
#{dept,jdbcType=VARCHAR},
#{remark,jdbcType=VARCHAR},
'0',
#{createName,jdbcType=VARCHAR},
sysdate,
'1'
</trim>
</insert>
第三步：输入密码和确认密码要一致，不一致不让进后台，可以直接用做校验
根据输入密码和确认密码的id获取到这两个的值，然后判断这两个是否相等，相等直接return true，不相等弹出温馨提示
两次输入密码不一致，请重新输入
//确认密码验证
function checkpassword() {
var password = $("#form-password").val();
var repassword = $("#form-pasword").val();
if(password == repassword) {
return true;
}else {
$.messager.alert('温馨提示',"两次输入密码不一致，请重新输入",'error');
return false;
}
}
按回车键登录的代码
document.body.addEventListener('keyup', function (e) {
//判断按键code值
if (e.keyCode == '13') {
$("#login").click();
}
})
注册页面的完整jsp代码
<%@ 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>
<!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">
#_easyui_textbox_input2{
font-size: 16px;
}
</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>
<div class="form-bottom">
<form id="registerForm" action="" method="post" class="login-form">
<div class="form-group">
<input type="text" id="personId" name="personId" placeholder="请选择用户姓名..." class="easyui-combotree" required="true" style="width:100%;font-size: 16px;padding-left: 23px;">
</div>
<div class="form-group">
<input type="text" name="username" onchange="exties()" placeholder="请输入用户账号..." class="form-username form-control" id="form-username" required="true">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="请输入密码..." class="form-password form-control" id="form-password" required="true">
</div>
<div class="form-group">
<input type="password" onchange="checkpassword()" placeholder="再次输入密码..." class="form-password form-control" id="form-pasword" required="true" >
</div>
<span id="tishi"></span></input>
<br>
<button type="submit" class="btn" onclick="regist()">注册</button><!-- 使用button按钮事件 -->
<p></p>
<a style='color:blue' href='javascript:void(0)' title='返回登录页面' onclick='returnLogin()'><span style="font-size:16px;">返回登录页面</span></a>
</form>
</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(){
//获取用户姓名的combotree
$("#personId").combotree({
url : "${ctx }/sysUser/getSysPersonList",
data : {"personId":""},
method: 'get',
ines: true,
multiple: false,
onBeforeSelect: function (node) {
if(node.name){
$("#personId").tree("unselect");
}
}
})
});
function returnLogin() {
window.location.href = "${ctx}/login"
}
var t;
function regist(){
var username = $("#form-username").val();
var password = $("#form-password").val();
var personId = $("#personId").combotree("getValue");
var trueName= $("#personId").combotree("getText");
if(username==''){
return;
}
if(password==''){
return;
}
if(personId==''){
return;
}
if(trueName==''){
return;
}
if(!checkpassword()){
return;
}
exties();
if(t){
$.ajax({
dataType: "json",
type : "post",
url : "${ctx}/shiroRegister",
data : {"userName" : username,"password" : password,"personId" : personId,"trueName" : trueName},
async: false,
success : function(data) {
$.messager.alert("提示","注册成功,等管理人员审核！");
},
error : function(){
}
})
}
}
//确认密码验证
function checkpassword() {
var password = $("#form-password").val();
var repassword = $("#form-pasword").val();
if(password == repassword) {
return true;
}else {
$.messager.alert('温馨提示',"两次输入密码不一致，请重新输入",'error');
return false;
}
}
/* 验证账号是否已注册 */
function exties(){
var userName = $("#form-username").val();
$.ajax({
dataType: "json",
type:'get',
url:"${ctx}/selUser",
data:{"userName":userName},
async: false,
success:function(data){
if(data.status == "400"){
//用户名已经被注册
$.messager.alert('温馨提示',data.msg,'error');
t=false;
}else{
t=true;
}
}
})
}
</script>
</body>
</html>
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
