Web流行框架SSM+Shiro+Bootstrap+Jquery项目实践之注册

最新推荐文章于 2023-07-10 08:51:20 发布

前进2014

最新推荐文章于 2023-07-10 08:51:20 发布

阅读量687

点赞数

分类专栏：编程 java

本文链接：https://blog.csdn.net/ycx901221/article/details/79229616

版权

编程同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

java

10 篇文章 0 订阅

订阅专栏

本来这次是计划写快速登陆的，但开发到一半，发现第三方OAuth授权申请条件达不到（没有公网服务器、域名，而且类似QQ这种第三方登陆授权还需要企业营业执照，太难啦），所以等我租服务器将项目放到公网上再完成那个功能吧。先做个注册功能吧，注册和前面的登陆大同小异，比登陆功能稍微简单些，不用重新写shiro授权服务，说白了就是向用户表中添加一条记录。首先是界面，这里要新建一个register.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信息管理系统 - 注册</title>
<meta name="keywords" content="perfect-ssm">
<meta name="description" content="perfect-ssm">

<!--icon-->
<link rel="shortcut icon" type="image/x-icon"
	href="css/common/favicon.ico" media="screen" />
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet"
	href="css/adminlte/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="css/common/libs/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
	href="css/common/libs/ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/adminlte/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="css/adminlte/plugins/iCheck/square/red.css">
<link rel="stylesheet"
	href="css/adminlte/plugins/bootstrap-validator/dist/css/bootstrap-validator.css" />
<!-- 动画进入 -->
<link rel="stylesheet" href="css/animate.min.css" />
</head>
<body class="hold-transition login-page">
	<div class="login-box animated fadeInDown">
		<div class="login-logo">
			<a href="#"><b>IM</b>System</a>
		</div>
		<!-- /.login-logo -->
		<div class="login-box-body">
			<p class="login-box-msg">
				<strong>新用户注册</strong>
			</p>

			<form action="##" method="post" οnsubmit="return false" role="form"
				id="register-form">
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="username"
						id="username" placeholder="请输入用户名" required> <span
						class="glyphicon glyphicon-user form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="phone"
						id="phone" placeholder="请输入手机号"> <span
						class="glyphicon glyphicon-phone form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="email" id="email"
						placeholder="请输入邮箱"> <span
						class="glyphicon glyphicon-envelope form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" class="form-control" name="password"
						id="password" placeholder="请输入密码"> <span
						class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" class="form-control" name="repassword"
						id="repassword" placeholder="再次确认密码"> <span
						class="glyphicon glyphicon-log-in form-control-feedback"></span>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="checkbox icheck">
							<label> <input type="checkbox" id="agreement"
								class="icheck" required> 同意遵循<a href="#">IMSysyem协议</a>
							</label>
						</div>
					</div>
					<!-- /.col -->
				</div>
				<div class="row">
					<div class="col-xs-12">
						<button type="button" class="btn btn-danger btn-block btn-flat"
							οnclick="javascript:register();">注 册</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script
		src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script src="js/jquery.serializejson.min.js"></script>
	<!-- bootstrap-validator-->
	<script
		src="css/adminlte/plugins/bootstrap-validator/dist/js/bootstrap-validator.js"></script>
	<!-- iCheck -->
	<script src="css/adminlte/plugins/iCheck/icheck.min.js"></script>
	<script src="js/common.js"></script>
	<script src="js/base-modal.js"></script>
	<script src="js/login.js"></script>
	<script type="text/javascript">
	/* 初始化check 改变为ickeckbox*/
	$(function() {
	    $('input.icheck').iCheck({
		checkboxClass : 'icheckbox_square-red',
		radioClass : 'iradio_square-red',
		increaseArea : '20%' // optional
	    });

	    $("#register-form").bootstrapValidator({
		submitHandler : function(valiadtor, loginForm, submitButton) {
		    if (!$("#agreement").is(":checked")) {
			modals.info("请先勾选同意遵循IMSysyem协议");
			return;
		    }
		    valiadtor.defaultSubmit();
		},
		fields : {
		    username : {
			validators : {
			    notEmpty : {
				message : '用户名不能为空'
			    },
			    stringLength : {
				/*长度提示*/
				min : 2,
				max : 15,
				message : '用户名长度必须在2到15之间'
			    },
			    threshold : 2,//只有2个字符以上才发送ajax请求
			    remote : {
				url : "/oauth/checkUnique",
				data : function(validator) {
				    return {
					inputvalue : $("#username").val()
				    };
				},
				message : '该用户名已被使用，请使用其他用户名',
				delay : 2000
			    }
			}
		    },
		    phone : {
			validators : {
			    notEmpty : {
				message : '手机号不能为空'
			    },
			    stringLength : {
				/*长度提示*/
				min : 11,
				max : 11,
				message : '手机号必须11位数'
			    },
			    threshold : 11,//只有11个字符以上才发送ajax请求
			    remote : {
				url : "/oauth/checkUnique",
				data : function(validator) {
				    return {
					inputvalue : $("#phone").val(),
					username : null
				    };
				},
				message : '该手机号已被使用，请使用其他手机号',
				delay : 2000
			    }
			}
		    },
		    email : {
			validators : {
			    notEmpty : {
				message : '登录邮箱名不能为空'
			    },
			    stringLength : {
				/*长度提示*/
				min : 4,
				max : 30,
				message : '邮箱长度必须在4到30之间'
			    },
			    threshold : 4,//只有4个字符以上才发送ajax请求
			    remote : {
				url : "/oauth/checkUnique",
				data : function(validator) {
				    return {
					inputvalue : $("#email").val(),
					username : null
				    };
				},
				message : '该邮箱已被使用，请使用其他邮箱',
				delay : 2000
			    }
			}
		    },
		    password : {
			validators : {
			    notEmpty : {
				message : '密码不能为空'
			    },
			    stringLength : {
				/*长度提示*/
				min : 6,
				max : 30,
				message : '密码长度必须在6到30之间'
			    },
			    different : {//不能和用户名相同
				field : 'loginName',//需要进行比较的input name值
				message : '不能和用户名相同'
			    },
			    regexp : {
				regexp : /^[a-zA-Z0-9_\.]+$/,
				message : '密码由数字字母下划线和.组成'
			    }
			}
		    },
		    repassword : {
			message : '密码无效',
			validators : {
			    notEmpty : {
				message : '密码不能为空'
			    },
			    stringLength : {
				min : 6,
				max : 30,
				message : '用户名长度必须在6到30之间'
			    },
			    identical : {//相同
				field : 'password',
				message : '两次密码不一致'
			    },
			    different : {//不能和用户名相同
				field : 'loginName',
				message : '不能和用户名相同'
			    },
			    regexp : {//匹配规则
				regexp : /^[a-zA-Z0-9_\.]+$/,
				message : '密码由数字字母下划线和.组成'
			    }
			}
		    }

		}
	    });
	});
    </script>
</body>

</html>

如何进入这个注册界面？咱们还是回到登陆界面去看看

没错，点击登陆界面的“注册”链接就会跳转到新用户注册界面，这里点击的链接是下面的“/register”

<div class="col-xs-6">
	<div class="checkbox pull-right">
			<a href="#">忘记密码</a> <span> / </span> <a
			href="/register" class="text-center">注册</a>
	</div>
    </div>

这是个get请求，后台对应的方法会响应这个请求，这个方法我写到了LoginController.java中

@RequestMapping(value = "/register", method = RequestMethod.GET)
    public String register() {
        return "register";
    }

很简单的代码，就是让它找个register.jsp并返回给浏览器，现在注册界面就打开了，我们看看

同样我们也给注册表单定义了一系列标准的validator验证配置

这里面还有手机号和邮箱的唯一性验证，是动态请求后台服务的，下面这一段是前台的

 remote : {
				url : "/oauth/checkUnique",
				data : function(validator) {
				    return {
					inputvalue : $("#phone").val(),
					username : null
				    };
				},
				message : '该手机号已被使用，请使用其他手机号',
				delay : 2000
			    }

后台的代码也是写在了LoginController.java中，请看

@RequestMapping(value = "/oauth/checkUnique", method = RequestMethod.POST)
	@ResponseBody
	public Map checkUnique(String inputvalue) {
		Map<String, Boolean> map = new HashMap<String, Boolean>();
		TbUser user = userService.getUserByOtherWay(inputvalue);
		// 用户不存在，校验有效
		if (user == null) {
			map.put("valid", true);
		} else {
			map.put("valid", false);
		}
		return map;
	}

UserService.java接口中增加一个方法public TbUser getUserByOtherWay(String otherWayValue);
UserServiceImpl.java实现这个方法：

@Override
	public TbUser getUserByOtherWay(String otherWayValue) {
		TbUserExample tbUserExample = new TbUserExample();
		if (otherWayValue != null && !otherWayValue.isEmpty()) {
			// 条件1 匹配用户名
			Criteria createCriteria = tbUserExample.createCriteria();
			createCriteria.andUsernameEqualTo(otherWayValue);
			// 条件2 匹配手机号码
			Criteria createCriteria2 = tbUserExample.or();
			createCriteria2.andPhoneEqualTo(otherWayValue);
			// 条件3 匹配邮箱
			Criteria createCriteria3 = tbUserExample.or();
			createCriteria3.andPhoneEqualTo(otherWayValue);
			List<TbUser> selectByExample = tbUserMapper
					.selectByExample(tbUserExample);
			if (selectByExample != null && !selectByExample.isEmpty()) {
				return selectByExample.get(0);
			}
		}
		return null;
	}

我们来试验一下，比如表单中填写手机号，我们先从用户表中找一条用户数据，用他的手机号填写

表单验证效果如下：

注意：这里请求验证的uri“/oauth/checkUnique”要添加到Shiro的白名单配置中，不然可是会被拦截的

<!-- 具体配置需要拦截哪些 URL, 以及访问对应的 URL 时使用 Shiro 的什么 Filter 进行拦截. -->
		<property name="filterChainDefinitions">
			<value>
				/css/** = anon
				/js/** = anon
				/login = anon
				/register = anon
				/oauth/** = anon
				/** = authc
			</value>
		</property>

一大堆验证基本结束了，现在来真正写注册了，前端要在注册按钮上绑定javascript函数register()。

在login.js中添加一个register()函数

function register() {
    // 是否同意了条款
    if (!$("#agreement").is(":checked")) {
	modals.info("请先勾选同意遵循IMSysyem协议");
	return;
    }
    // 获取表单对象
    var bootstrapValidator = $('#register-form').data('bootstrapValidator');
    // 验证表单
    bootstrapValidator.validate();
    // 是否通过了验证
    if (!$('#register-form').data('bootstrapValidator').isValid()) {
	return;
    }
    // 获取表单内容
    var data = $('#register-form').serializeJSON();
    console.log(data);
    $.ajax({
	type : "POST",
	dataType : "json",
	contentType : "application/json;charset=utf-8",
	url : "/register",
	data : JSON.stringify(data),// 这里要传json字符串
	success : function(result) {
	    var resultdata = result.data;
	    if (resultdata) {
		if(result.status == 500){
		    modals.info(result.msg);
		    return ;
		}
	    }
	    // 跳转主页
	    window.location.href = "/";
	},
	error : function() {
	    modals.info("注册异常");
	}
    });
}

后台响应的方法：

@RequestMapping(value = "/register", method = RequestMethod.POST)
	@ResponseBody
	public CommonResult register(@RequestBody TbUser user) {
		TbUser tbUser = userService.saveUser(user);
		// 自动登陆
		return loginUser(tbUser);
	}

UserService.java接口: public TbUser saveUser(TbUser user);

UserServiceImpl.java实现此方法：

@Override
	public TbUser saveUser(TbUser user) {
		if (user != null) {
			Date created = new Date();
			user.setCreated(created);
			user.setUpdated(created);
			int insertSelective = tbUserMapper.insertSelective(user);
			if (insertSelective > 0) {
				TbUserExample tbUserExample = new TbUserExample();
				Criteria createCriteria = tbUserExample.createCriteria();
				createCriteria.andUsernameEqualTo(user.getUsername());
				List<TbUser> selectByExample = tbUserMapper
						.selectByExample(tbUserExample);
				if (selectByExample != null && !selectByExample.isEmpty()) {
					return selectByExample.get(0);
				}
			}
		}
		return null;
	}

这里面的代码分两个部分：1、保存新用户到数据库。2、调用之前的登陆方法自动登陆

补充一下：前端注册函数，它还有一个限制，就是要勾选XXX协议，看下效果

不勾选的话是不会注册的，会弹出一个模态提示框，这个是base-modal.js实现的

要做到人性化，及时将信息反馈给用户，带来好的体验，告诉他们应该怎么做才能避免操作错误，下面就勾选上

点击注册，会自动登陆到主页，看看效果，主页才开始做，使用的easyui开发，以后的章节详细讲解

我们到数据库中查看，可以看到看到已经新增了一条用户数据

注册功能基本完成。想要源码的朋友，等我把代码放到github上，再分享地址出来，我现在是用的svn仓库。

前进2014

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web流行框架SSM+Shiro+Bootstrap+Jquery项目实践之注册

本来这次是计划写快速登陆的，但开发到一半，发现第三方OAuth授权申请条件达不到（没有公网服务器、域名，而且类似QQ这种第三方登陆授权还需要企业营业执照，太难啦），所以等我租服务器将项目放到公网上再完成那个功能吧。先做个注册功能吧，注册和前面的登陆大同小异，比登陆功能稍微简单些，不用重新写shiro授权服务，说白了就是向用户表中添加一条记录。首先是界面，这里要新建一个register.jsp:
复制链接

扫一扫

专栏目录