第一步:数据库设计:
点击转储SQL文件 导出数据和结构
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL,
`nickname` varchar(255) DEFAULT NULL,
`password` varchar(32) DEFAULT NULL,
`salt` varchar(10) DEFAULT NULL,
`head` varchar(128) DEFAULT NULL,
`register_date` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
`last_login_date` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
`login_count` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
第一步:在pom.xml文件引入MD5相关的依赖(commons-lang3里面有StringUtil)
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.6</version>
</dependency>
第二步:在util包下写MD5Util类
package com.jack.seckill.util;
import javax.sound.midi.SysexMessage;
import org.apache.commons.codec.digest.DigestUtils;
public class MD5Util {
public static String md5(String src) {
return DigestUtils.md2Hex(src);//进行一次md5
}
private static final String salt="123321";
//将输入的密码进行md5
public static String inputPassFormPass(String inputPass) {
String str=""+salt.charAt(0)+salt.charAt(2)+inputPass+salt.charAt(5)+salt.charAt(4);
return md5(str);
}
public static String formPassToDBPass(String formPass,String salt) {
String str=""+salt.charAt(0)+salt.charAt(2)+formPass+salt.charAt(5)+salt.charAt(4);
return md5(str);
}
public static String inputPassToDBPass(String input,String saltDB) {
String formPass=inputPassFormPass(input);
String dbpass=formPassToDBPass(formPass,saltDB);//这saltDB是存在数据库里面的
return dbpass;
}
//主函数测试
public static void main(String[] args) {
System.out.println(inputPassFormPass("123"));
System.out.println(formPassToDBPass(inputPassFormPass("123"),"1a2s3d"));
}
}
第三步:书写vo,页面传输数据到后台
package com.jack.seckill.vo;
/**
*用于 接受登陆的信息,用户名和密码
*
*/
public class LoginVo {
private String mobile;
private String password;
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "LoginVo [mobile=" + mobile + ", password=" + password + "]";
}
}
第四步:验证工具类(手写验证,没有使用第三方验证工具)
package com.jack.seckill.util;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import org.apache.commons.lang3.StringUtils;
/**
* 验证工具
*
*/
public class ValidatorUtil {
private static final Pattern mobile_pattern = Pattern.compile("1\\d{10}");
//验证是否为手机号
public static boolean isMobile(String src) {
if(StringUtils.isEmpty(src)) {
return false;
}
Matcher m = mobile_pattern.matcher(src);
return m.matches();
}
// public static void main(String[] args) {
// System.out.println(isMobile("18912341234"));
// System.out.println(isMobile("1891234123"));
// }
}
第五步:Dao层
package com.jack.seckill.dao;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import com.jack.seckill.domain.SeckillUser;
@Mapper
public interface SeckillDao {
@Select("select * from user where id=#{id}")
public SeckillUser getById(@Param("id")long id);
}
第六步:service层
package com.jack.seckill.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.jack.seckill.dao.SeckillDao;
import com.jack.seckill.domain.SeckillUser;
import com.jack.seckill.result.CodeMsg;
import com.jack.seckill.util.MD5Util;
import com.jack.seckill.vo.LoginVo;
@Service
public class SeckillUserService {
@Autowired
SeckillDao seckillDao;
public SeckillUser getById(long id) {
return seckillDao.getById(id);
}
public CodeMsg login(LoginVo loginVo) {
if(loginVo==null) {
return CodeMsg.SERVER_ERROR;
}
String formPass=loginVo.getPassword();
String mobile=loginVo.getMobile();
//判断手机号是否存在
SeckillUser seckillUser=getById(Long.parseLong(mobile));
if(seckillUser==null) {
return CodeMsg.MOBILE_NOT_EXIST;
}
//验证密码
String dbPass=seckillUser.getPassword();
String saltDB=seckillUser.getSalt();
String calcPass=MD5Util.formPassToDBPass(formPass, saltDB);
if(!calcPass.equals(dbPass)) {
return CodeMsg.PASSWORD_ERROR;
}
return CodeMsg.SUCCESS;//表示登陆成功
}
}
第七步:controller层
package com.jack.seckill.controller;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.jack.seckill.result.CodeMsg;
import com.jack.seckill.result.Result;
import com.jack.seckill.service.SeckillUserService;
import com.jack.seckill.service.UserService;
import com.jack.seckill.util.ValidatorUtil;
import com.jack.seckill.vo.LoginVo;
@Controller
@RequestMapping("/login")
public class LoginController {
private static Logger log=LoggerFactory.getLogger(LoginController.class);
@Autowired
UserService userService;
@Autowired
SeckillUserService seckillUserService;
//跳转到登陆页面
@RequestMapping("/to_login")
public String toLogin() {
return "login";
}
@RequestMapping("/do_login")
@ResponseBody //在controller层请求处理完了返回时,没有使用@RestController或@ResponseBody而返回了非json格式
public Result<Boolean> doLogin(LoginVo loginVo) {
log.info(loginVo.toString());
//获得前端提交的数据进行参数校验[重点]
String passinput=loginVo.getPassword();
String mobile=loginVo.getMobile();
if(StringUtils.isEmpty(passinput)) {//判断密码是否为空
return Result.error(CodeMsg.PASSWORD_EMPTY);
}
if(StringUtils.isEmpty(mobile)) {//判断手机号是否为空
return Result.error(CodeMsg.MOBILE_EMPTY);
}if(!ValidatorUtil.isMobile(mobile)) {
return Result.error(CodeMsg.MOBILE_ERROR);
}
//登陆
CodeMsg cm=seckillUserService.login(loginVo);
if(cm.getCode()==0) {
return Result.success(true);
}else {
return Result.error(cm);
}
}
}
第八步:渲染的页面
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>登陆</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- jquery @{/js/jquery.min.js}表示引入静态文件-->
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<!-- jquery-validator 前端验证-->
<script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
<!-- layer -->
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
<!-- md5.js -->
<script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
<!-- common.js -->
<script type="text/javascript" th:src="@{/js/common.js}"></script>
</head>
<body>
<form name="loginForm" id="loginForm" method="post" style="width:50%; margin:0 auto">
<h2 style="text-align:center; margin-bottom: 20px">用户登录</h2>
<div class="form-group">
<div class="row">
<label class="form-label col-md-4">请输入手机号码</label>
<div class="col-md-5">
<input id="mobile" name = "mobile" class="form-control" type="text" placeholder="手机号码" required="true" minlength="11" maxlength="11" />
</div>
<div class="col-md-1">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="form-label col-md-4">请输入密码</label>
<div class="col-md-5">
<input id="password" name="password" class="form-control" type="password" placeholder="密码" required="true" minlength="6" maxlength="16" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<button class="btn btn-primary btn-block" type="reset" onclick="reset()">重置</button>
</div>
<div class="col-md-5">
<button class="btn btn-primary btn-block" type="submit" onclick="login()">登录</button>
</div>
</div>
</form>
</body>
<script>
/* 提交前进行前端验证 */
function login(){
$("#loginForm").validate({
submitHandler:function(form){
doLogin();
}
});
}
/* 前端验证通过进行异步提交 */
function doLogin(){
g_showLoading();
var inputPass = $("#password").val();
var salt = g_passsword_salt;
var str = ""+salt.charAt(0)+salt.charAt(2) + inputPass +salt.charAt(5) + salt.charAt(4);
var password = md5(str);
$.ajax({
url: "/login/do_login",
type: "POST",
data:{
mobile:$("#mobile").val(),
password: password
},
success:function(data){
layer.closeAll();
if(data.code == 0){
layer.msg("成功");
window.location.href="/goods/to_list";
}else{
layer.msg(data.msg);
}
},
error:function(){
layer.closeAll();
}
});
}
</script>
</html>