简单的登录注册模块的实现（一）
代码地址：https://github.com/Aprilfi/Cube.git
一、用到的框架
1）SpringBoot
2）Spring Data JPA
3）thymeleaf
4）jq，js，css等
二、在开始实现功能前，首先要做的自然是设计数据库表，这里由于只做登录注册，所以只做了两张表，表结构如下：
id |
用户id |
userName |
用户昵称 |
realName |
用户真实姓名 |
sex |
用户性别 |
old |
用户年龄 |
idCard |
身份证 |
ip |
ip |
status |
封禁状态 |
loginTime |
登录时间 |
registerTime |
注册时间 |
|
|
用户邮箱 |
phoneNumber |
用户手机号码 |
passWord |
密码 |
salt |
随即盐 |
要值得注意的是，在创建表字段时，字段的数据类型要尽可能要适合场景，如账号的封禁状态，用char(1)就够了。
三、代码实现
后台：
import cn.lovepi.config.MainContext; import cn.lovepi.controller.Handler; import cn.lovepi.pojo.user.User; import cn.lovepi.service.UserService; import cn.lovepi.utils.MD5Util; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.servlet.http.HttpServletRequest; import java.util.List; /** * @author Wuhl * @date 2019-05-08 16:17 * @function 登录、注册 */ @Controller @RequestMapping("/user") public class UserController extends Handler { @Autowired private UserService userService; @RequestMapping("/login.htm") public String login() { super.log.error(this.toString()); return "user/login.html"; } @RequestMapping("/register.htm") public String register() { return "user/register.html"; } /** * @function 注册验证，验证码发送 * @param user * @param request * @param map * @return login */ @RequestMapping("/register") public String registerSubmit(User user, HttpServletRequest request, ModelMap map) { user.setSalt(MD5Util.getSaltMD5(user.getPassWord())); if(isEmail(user.getEmail())) { //发送邮箱验证码 }else{ //发送手机验证码 } user.setIp(request.getRemoteAddr()); user.setRegisterTime(super.getTime()); user.setStatus(MainContext.USER_STATUS); super.setUser(request, user); userService.save(user); map.addAttribute("userName", user.getUserName()); return "user/login.html"; } /** * @function 登录验证 * @param user * @param map * @return login */ @RequestMapping("/login") public String loginSubmit(User user, ModelMap map) { List<User> users = userService.findByUserName(user.getUserName()); if(users.size() < 1) { map.addAttribute("exist", true); return "/user/login.html"; }else if(!MD5Util.getSaltverifyMD5(user.getPassWord(), users.get(0).getSalt())) { map.addAttribute("pasError", true); return "user/login.html"; } //更新用户最后登录时间 users.get(0).setLoginTime(super.getTime()); userService.save(users.get(0)); map.addAttribute("user", users.get(0)); return "index.html"; } @RequestMapping("/isUserName") @ResponseBody public String isUserName(String userName) { List<User> users = userService.findByUserName(userName); if(users.size() > 0) return "0"; return "1"; } }
前端页面：
login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="/sidebar/style.css"/>
<link rel="stylesheet" type="text/css" href="/dist/css/barrager.css">
<style>
body input{
height: 25px;
}
header {
padding-top: 10%;
width: 100%;
text-align: center;
margin-bottom: 5%;
}
#re_form {
width: 40%;
height: auto;
margin: 0 auto;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-radius: 10px;
padding: 0 100px;
}
.form_input {
height: 70px;
}
.form_input input {
width: 100%;
padding-left: 10px;
}
.submit {
float: right;p
margin-right: 5%;
margin-bottom: 50px;
border-radius: 5px;
padding: 5px;
width: 70px;
height: 35px;
border: 1px solid #6b6b6b;
}
.danger {
color: red;
text-align: center;
}
#skip_register {
font-size: 25px;
color: #1b1e21;
position: fixed;
right: 0;
top: 0;
opacity: 0.6;
background-color: #9e9e9e;
padding: 8px;
}
</style>
</head>
<body>
<header>
<h1>L o g i n</h1>
</header>
<div id="main">
<form action="/user/login" method="post" id="login_form">
<table id="re_form">
<tr class="form_input">
<td>昵称：</td>
<td><input type="text" name="userName" id="userName" th:value="${userName}"/></td>
</tr>
<tr class="form_input">
<td>密码：</td>
<td><input type="password" name="passWord" id="passWord"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="login" class="submit"/>
</td>
</tr>
</table>
<p class="danger" th:if="${exist}">用户不存在</p>
<p class="danger" th:if="${pasError}">用户名与密码不匹配</p>
</form>
</div>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript" src="/dist/js/jquery.barrager.min.js"></script>
<script>
// 在键盘按下并释放及提交后验证提交表单
$("#login_form").validate({
rules: {
userName: {
required: true
},
passWord: {
required: true
}
}
});
//注册页面跳转
$('#skip_register').click(function () {
location.replace("/user/register.htm")
});
var item={
img:'static/heisenberg.png', //图片
info:'test', //文字
href:'wwe.baidu.com', //链接
close:true, //显示关闭按钮
speed:6, //延迟,单位秒,默认6
color:'#fff', //颜色,默认白色
old_ie_color:'#000000', //ie低版兼容色,不能与网页背景相同,默认黑色
}
var itemJson = [];
var index = 0;
var length = itemJson.length - 1;
console.log(length)
function consoleLog(){
$('body').barrager(itemJson[index]);
if (index < length) index ++;
else if (index == length) index = 0;
console.log(index)
}
var ref = setInterval(function(){
consoleLog(index);
},2000);
</script>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/js/jquery/jquery-1.10.2.js"></script>
<title>Title</title>
<style>
body input{
height: 25px;
}
header {
padding-top: 80px;
width: 100%;
text-align: center;
margin-bottom: 5%;
}
#re_form {
width: 40%;
height: auto;
margin: 0 auto;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-radius: 10px;
padding: 0 100px;
}
.form_input {
height: 70px;
}
.form_input input {
width: 100%;
padding-left: 10px;
}
.submit {
float: right;
margin-right: 5%;
margin-bottom: 50px;
border-radius: 5px;
padding: 5px;
width: 70px;
height: 35px;
border: 1px solid #6b6b6b;
}
#skip_login {
font-size: 25px;
color: #1b1e21;
position: fixed;
right: 0;
top: 0;
opacity: 0.6;
background-color: #9e9e9e;
padding: 8px;
}
</style>
</head>
<body>
<form action="/user/register" method="post" id="register_form">
<table id="re_form">
<tr class="form_input">
<td>昵称：</td>
<td><input type="text" name="userName" class="username"/></td><span style="color: red;" id="username">*</span>
</tr>
<tr class="form_input">
<td>邮箱/手机：</td>
<td><input type="text" name="email" placeholder="邮箱地址或手机号码"/></td>
</tr>
<tr class="form_input">
<td>密码：</td>
<td><input type="password" name="passWord"/></td>
</tr>
<tr class="form_input">
<td>确认密码：</td>
<td><input type="password" name="readPas" id="realPassword"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="register" class="submit"/>
</td>
</tr>
</table>
</form>
<div id="skip_login">
L o g i n
</div>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$('.username').bind('input propertychange',function () {
$.ajax({
type: 'post',
data:{userName:$('.username').val()},
dataType: 'text',
url: "/user/isUserName",
success: function (data) {
$('#username').show();
if (data == '0')
$('#username').css({'color':'red'})
else
$('#username').css({'color':'green'})
},
error: function (data) {
}
});
});
//注册页面跳转
$('#skip_login').click(function () {
location.replace("/user/login.htm")
});
// 在键盘按下并释放及提交后验证提交表单
$("#register_form").validate({
rules: {
userName: {
required: true
},
email: {
required:true
},
passWord: {
required: true
},
readPas: {
required: true
}
}
});
</script>
</body>
</html>
