【IDEA+SpringBoot+Java商城秒杀实战09】实现登录功能

Sylvia ·

更新时间:2024-09-21

· 996 次阅读

步骤： 创建秒杀User的domain类

	@Getter
	@Setter
	public class MiaoshaUser {
	private Long id;
	private String nickname;
	private String pwd;
	private String salt;
	private String head;
	private Date registerDate;
	private Date lastLoginDate;
	private Integer loginCount;

新建MiaoshaUserDao

	@Mapper
	public interface MiaoshaUserDao {
	@Select("select * from miaosha_user where id=#{id}")  //这里#{id}通过后面参数来为其赋值
	public MiaoshaUser getById(@Param("id")long id);    //绑定
	//绑定在对象上面了----@Param("id")long id,@Param("pwd")long pwd 效果一致
	@Update("update miaosha_user set pwd=#{pwd} where id=#{id}")
	public void update(MiaoshaUser toupdateuser);	
	//public boolean update(@Param("id")long id);    //绑定	
}

新建MiaoshaUserService

	@Service
	public class MiaoshaUserService {
	public static final String COOKIE1_NAME_TOKEN="token";
	@Autowired
	MiaoshaUserDao miaoshaUserDao;
	@Autowired
	RedisService redisService;
	/**
	 * 根据id取得对象，先去缓存中取
	 * @param id
	 * @return
	 */
	public MiaoshaUser getById(long id) {
		//1.取缓存	---先根据id来取得缓存
		MiaoshaUser user=redisService.get(MiaoshaUserKey.getById, ""+id, MiaoshaUser.class);
		//能再缓存中拿到
		if(user!=null) {
			return user;
		}
		//2.缓存中拿不到，那么就去取数据库
		user=miaoshaUserDao.getById(id);
		//3.设置缓存
		if(user!=null) {
			redisService.set(MiaoshaUserKey.getById, ""+id, user);
		}
		return user;
	}
	}

新建LoginController

	@RequestMapping("/login")
	@Controller
	public class LoginController{
	@Autowired
	UserService userService;
	@Autowired
	RedisService redisService;
	@Autowired
	MiaoshaUserService miaoshaUserService;	
	//slf4j
	private static Logger log=(Logger) LoggerFactory.getLogger(Logger.class);	
	@RequestMapping("/to_login")
	public String toLogin() {
		return "login";// 返回页面login
	}
	@RequestMapping("/do_login") // 作为异步操作
	@ResponseBody
	public CodeMsg doLogin(LoginVo loginVo) {// 0代表成功
		// log.info(loginVo.toString());
		if (loginVo == null) {
			return CodeMsg.SERVER_ERROR;
		}
		// 验证
		String formPass = loginVo.getPassword();
		String mobile = loginVo.getMobile();
		// 验证用户
		MiaoshaUser user = miaoshaUserService.getById(Long.parseLong(mobile));
		if (user == null) {
			return CodeMsg.MOBILE_NOTEXIST;
		}
		// 验证密码
		String dbPass = user.getPwd();
		String dbSalt = user.getSalt();
		System.out.println("dbPass:" + dbPass + "   dbSalt:" + dbSalt);
		//现在我们登录的时候，要去取得数据库里面对应用户的密码和salt值，然后后台接收了前端做了一次MD5的密码formPass,然后将这个formPass去和数据库里面的salt一起再做一次MD5，然后检测是否与数据库里面存的那个密码一致。
		// 验证密码，计算二次MD5出来的pass是否与数据库一致
		String tmppass = MD5Util.formPassToDBPass(formPass, dbSalt);
		System.out.println("formPass:" + formPass);
		System.out.println("tmppass:" + tmppass);
		if (!tmppass.equals(dbPass)) {
			return CodeMsg.PASSWORD_ERROR;
		}
		return CodeMsg.SUCCESS;
	}
}

前端login.html

引入bootstrap
引入相关的js和css

核心代码：
(最下面有完整的代码)

var pass=$("#password").val();
			//pass='111111';
			//固定salt
			var salt='1a2b3c4d';
			var str=""+salt.charAt(0)+salt.charAt(2)+pass+salt.charAt(5)+salt.charAt(4);
			var password=md5(str);
			//alert(salt);
			//alert(pass);
			//alert(password);
			//与后台Md5规则一致
			//var str=""+salt.charAt(0)+salt.charAt(2)+formPass+salt.charAt(5)+salt.charAt(4);
			$.ajax({
				url:"/login/do_login",
				type:"POST",
				data:{
					mobile:$("#phone").val(),
					password:password,
				},
				success:function(data){
					if(data.code==0){
						alert("success");
						//成功后跳转
						window.location.href="/goods/to_list";
					}else{
						alert(data.msg);
					}
				},
				error:function(data){
					alert("error");
					//alert(data.msg);
				}
			});

完整的前端login.html代码：



  
<!--  thymeleaf模板引擎默认是Template modes:HTML5解析的，所以解析比较严格。  -->
	登录
	
	
	<!--  -->
	
	<!--  -->
	
	<!--  -->	  
	
	
	
		
			
				
				
				
					
						Simple Form<!--  -->
					
					
						
							
								Phone
								
								
							
							
								Username
								
								
							
							
								Email
								
								
							
							
								Password
								
								
							
							
								Confirm password
								
								
							
							
								
									
										Please agree to our policy
									
								
							
							
								
									
								
							
					
				
			
		
	
		$.validator.setDefaults( {
			submitHandler: function () {
				var pass=$("#password").val();
				//pass='111111';
				var salt='1a2b3c4d';
				var str=""+salt.charAt(0)+salt.charAt(2)+pass+salt.charAt(5)+salt.charAt(4);
				var password=md5(str);
				//alert(salt);
				//alert(pass);
				//alert(password);
				//与后台Md5规则一致
				//var str=""+salt.charAt(0)+salt.charAt(2)+formPass+salt.charAt(5)+salt.charAt(4);
				$.ajax({
					url:"/login/do_login",
					type:"POST",
					data:{
						mobile:$("#phone").val(),
						password:password,
					},
					success:function(data){
						if(data.code==0){
							alert("success");
							//成功后跳转
							window.location.href="/goods/to_list";
						}else{
							alert(data.msg);
						}
					},
					error:function(data){
						alert("error");
						//alert(data.msg);
					}
				});
				//alert( "submitted!" );
			}
		} );
		$( document ).ready( function () {
			$( "#signupForm" ).validate( {
				rules: {
					firstname: "required",
					lastname: "required",
					username: {
						required: true,
						minlength: 2
					},
					password: {
						required: true,
						minlength: 5
					},
					confirm_password: {
						required: true,
						minlength: 5,
						equalTo: "#password"
					},
					email: {
						required: true,
						email: true
					},
					agree: "required"
				},
				messages: {
					firstname: "Please enter your firstname",
					lastname: "Please enter your lastname",
					username: {
						required: "Please enter a username",
						minlength: "Your username must consist of at least 2 characters"
					},
					password: {
						required: "Please provide a password",
						minlength: "Your password must be at least 5 characters long"
					},
					confirm_password: {
						required: "Please provide a password",
						minlength: "Your password must be at least 5 characters long",
						equalTo: "Please enter the same password as above"
					},
					email: "Please enter a valid email address",
					agree: "Please accept our policy"
				},
				errorElement: "em",
				errorPlacement: function ( error, element ) {
					// Add the `invalid-feedback` class to the error element
					error.addClass( "invalid-feedback" );
					if ( element.prop( "type" ) === "checkbox" ) {
						error.insertAfter( element.next( "label" ) );
					} else {
						error.insertAfter( element );
					}
				},
				highlight: function ( element, errorClass, validClass ) {
					$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
				},
				unhighlight: function (element, errorClass, validClass) {
					$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
				}
			} );
		} );