您的位置：首页 > Web前端 > BootStrap

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

2018-02-01 19:01 411 查看
 本来这次是计划写快速登陆的，但开发到一半，发现第三方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" onsubmit="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"
onclick="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仓库。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航