Java项目（三）-- SSM开发社交网站（7）--会员注册与登录

实现会员注册功能

首先，为了业务方法返回错误信息格式的统一，我们在com.ql.reader.service.exception包下创建一个自定义异常：

package com.ql.reader.service.exception;/*** BussinessException业务逻辑异常*/
public class BussinessException extends RuntimeException{private String code;private String msg;public BussinessException(String code, String msg){super(msg);this.code = code;this.msg = msg;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}
}

会员注册时需要对密码MD5加密存储，所以在com.ql.reader.utils包下创建MD5工具类

package com.ql.reader.utils;import org.apache.commons.codec.digest.DigestUtils;public class MD5Utils {public static String md5Digest(String source, Integer salt){char[] ca = source.toCharArray();//混淆源数据for (int i = 0; i < ca.length; i++) {ca[i] = (char) (ca[i] + salt);}String target = new String(ca);String md5 = DigestUtils.md5Hex(target);return md5;}
}

接下来开始写注册业务逻辑，在com.ql.reader.service包下创建会员业务接口，并且在com.ql.reader.service.impl包下创建它的实现类

package com.ql.reader.service;import com.ql.reader.entity.Member;public interface MemberService {/*** 会员注册，创建新会员* @param username 用户名* @param password 密码* @param nickname 昵称* @return 新会员对象*/public Member createMember(String username, String password, String nickname);
}

package com.ql.reader.service.impl;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.ql.reader.entity.Member;
import com.ql.reader.mapper.MemberMapper;
import com.ql.reader.service.MemberService;
import com.ql.reader.service.exception.BussinessException;
import com.ql.reader.utils.MD5Utils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;import javax.annotation.Resource;
import java.util.Date;
import java.util.List;
import java.util.Random;@Service("memberService")
@Transactional
public class MemberServiceImpl implements MemberService {@Resourceprivate MemberMapper memberMapper;/*** 会员注册，创建新会员** @param username 用户名* @param password 密码* @param nickname 昵称* @return 新会员对象*/public Member createMember(String username, String password, String nickname) {QueryWrapper<Member> queryWrapper = new QueryWrapper<Member>();queryWrapper.eq("username", username);List<Member> memberList = memberMapper.selectList(queryWrapper);//判断用户名是否已存在if(memberList.size()>0){throw new BussinessException("M01", "用户名已存在");}Member member = new Member();member.setUsername(username);member.setNickname(nickname);int salt = new Random().nextInt(1000) + 1000;//盐值String md5 = MD5Utils.md5Digest(password, salt);member.setPassword(md5);member.setSalt(salt);member.setCreateTime(new Date());memberMapper.insert(member);return member;}
}

在src/test/java/com/ql/reader/service/impl目录下生成测试用例，运行测试

package com.ql.reader.service.impl;import com.ql.reader.service.MemberService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;import javax.annotation.Resource;import static org.junit.Assert.*;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = {"classpath:applicationContext.xml"})
public class MemberServiceImplTest {@Resourceprivate MemberService memberService;@Testpublic void createMember() {memberService.createMember("s123456", "123456", "测试");}
}

测试成功

再次运行测试用例会报用户名存在异常，符合我们业务逻辑。

然后打开MemberController.java修改会员注册方法

    @PostMapping("/registe")@ResponseBodypublic Map registe(String vc, String username, String password, String nickname, HttpServletRequest request){//正确验证码String verifyCode = (String) request.getSession().getAttribute("kaptchaVerifyCode");//验证码对比Map result = new HashMap();if (vc==null || verifyCode==null || !vc.equalsIgnoreCase(verifyCode)){result.put("code", "VC01");result.put("msg", "验证码错误");}else{try {memberService.createMember(username, password, nickname);result.put("code", "0");result.put("msg", "success");} catch (BussinessException e) {e.printStackTrace();result.put("code", e.getCode());result.put("msg", e.getMsg());}}return result;}

运行项目，在浏览器中访问http://localhost:8080/register.html测试注册功能。

实现会员登录功能

首先，打开MemberService.java接口添加登录检查方法

    /*** 登录检查* @param username 用户名* @param password 密码* @return*/public Member checkLogin(String username, String password);

然后，在MemberServiceImpl.java中添加方法实现

    /*** 登录检查** @param username 用户名* @param password 密码* @return*/public Member checkLogin(String username, String password) {QueryWrapper<Member> queryWrapper = new QueryWrapper<>();queryWrapper.eq("username", username);Member member = memberMapper.selectOne(queryWrapper);if(member==null){throw new BussinessException("M02", "用户名不存在");}String md5 = MD5Utils.md5Digest(password, member.getSalt());if(!md5.equals(member.getPassword())){throw new BussinessException("M03", "输入密码有误");}return member;}

然后打开MemberController.java添加跳转到登录页和登录验证的方法

@GetMapping("/login.html")
public ModelAndView showLogin(){return new ModelAndView("/login");
}@PostMapping("/check_login")
@ResponseBody
public Map checkLogin(String vc, String username, String password, HttpSession session){//正确验证码String verifyCode = (String)session.getAttribute("kaptchaVerifyCode");//验证码对比Map result = new HashMap();if (vc==null || verifyCode==null || !vc.equalsIgnoreCase(verifyCode)){result.put("code", "VC01");result.put("msg", "验证码错误");}else{try {Member member = memberService.checkLogin(username, password);session.setAttribute("loginMember", member);result.put("code", "0");result.put("msg", "success");} catch (BussinessException e) {e.printStackTrace();result.put("code", e.getCode());result.put("msg", e.getMsg());}}return result;
}

前端代码为：在src/main/webapp/WEB-INF/ftl目录下创建登录页login.ftl

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>会员登录-书评网</title><meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"><link rel="stylesheet" href="http://cdn.itlaoqi.com./resources/bootstrap4/css/bootstrap.css"><link rel="stylesheet" href="./resources/raty/lib/jquery.raty.css"><script src="http://cdn.itlaoqi.com./resources/jquery.3.3.1.min.js"></script><script src="http://cdn.itlaoqi.com./resources/bootstrap4/js/bootstrap.min.js"></script><style>.container {padding: 0px;margin: 0px;}.row {padding: 0px;margin: 0px;}.col- * {padding: 0px;}.description p {text-indent: 2em;}.description img {width: 100%;}</style></head>
<body>
<!--<div style="width: 375px;margin-left: auto;margin-right: auto;">-->
<div class="container "><nav class="navbar navbar-light bg-white shadow"><ul class="nav"><li class="nav-item"><a href="/" style="color: #aaa;font-weight: bold">书评网</a></li></ul></nav><div class="container mt-2 p-2 m-0"><form id="frmLogin"><div class="passport bg-white"><h4 class="float-left">会员登录</h4><h6 class="float-right pt-2"><a href="/register.html">会员注册</a></h6><div class="clearfix"></div><div class="alert d-none mt-2" id="tips" role="alert"></div><div class="input-group  mt-2 "><input type="text" id="username" name="username" class="form-control p-4" placeholder="请输入用户名"aria-label="Username" aria-describedby="basic-addon1"></div><div class="input-group  mt-4 "><input id="password" name="password" class="form-control p-4" placeholder="请输入密码" type="password"aria-describedby="basic-addon1"></div><div class="input-group mt-4 "><div class="col-5 p-0"><input type="text" id="verifyCode" name="vc" class="form-control p-4" placeholder="验证码"></div><div class="col-4 p-0 pl-2 pt-0"><img id="imgVerifyCode" src="/verify_code"style="width: 120px;height:50px;cursor: pointer"></div></div><a id="btnSubmit" class="btn btn-success  btn-block mt-4 text-white pt-3 pb-3">登&nbsp;&nbsp;&nbsp;&nbsp;录</a></div></form></div>
</div><script>function showTips(isShow, css, text) {if (isShow) {$("#tips").removeClass("d-none")$("#tips").hide();$("#tips").addClass(css);$("#tips").text(text);$("#tips").fadeIn(200);} else {$("#tips").text("");$("#tips").fadeOut(200);$("#tips").removeClass();$("#tips").addClass("alert")}}function reloadVerifyCode(){$("#imgVerifyCode").attr("src", "/verify_code?ts=" + new Date().getTime());}$("#imgVerifyCode").click(function () {reloadVerifyCode();});$("#btnSubmit").click(function () {var username = $.trim($("#username").val());var regex = /^.{1,10}$/;if (!regex.test(username)) {showTips(true, "alert-danger", "用户名请输入正确格式（1-10位）");return;} else {showTips(false);}var password = $.trim($("#password").val());if (!regex.test(password)) {showTips(true, "alert-danger", "密码请输入正确格式（1-10位）");return;} else {showTips(false);}$btnReg = $(this);$btnReg.text("正在处理...");$btnReg.attr("disabled", "disabled");$.ajax({url: "/check_login",type: "post",dataType: "json",data: $("#frmLogin").serialize(),success: function (data) {console.info(data);if (data.code == "0") {window.location = "/?ts=" + new Date().getTime();} else {showTips(true, "alert-danger", data.msg);reloadVerifyCode();$btnReg.text("登录");$btnReg.removeAttr("disabled");}}});return false;});</script>
</body>
</html>

运行项目测试