SpringBoot2+Mp 完成网站登录注册功能

一.前端页面

1.登录界面

2.注册界面

二、功能实现

1.登录功能

登录功能有两个部分：检查用户是否存在和检查密码是否错误

通过js 发送Axios请求

onLogin: function () {
     //传递vue指针
    var _this = this;
     //判断输入不为空
    if(this.username!==''&&this.password!==''){
        //向后端发送axios请求
        axios({
            method: "get",
            url: "/users/" + this.username+"/"+this.password
        }).then(function (resp) {
            if (resp.data.flag) {
                //登录成功之后跳转到主页
                alert("登录成功！")
                window.location.href='../homepage.html';
                //传递用户名和ID
                sessionStorage.setItem("username",_this.username);
                sessionStorage.setItem("userId",resp.data.data.userId)
            } else {
                //登陆失败，输出后端发来的错误
                alert(resp.data.error)
            }
        })
    }

后端代码：

@GetMapping("{username}/{password}")
public R login(@PathVariable String username,@PathVariable String password){
    //为MP创建查询条件
    QueryWrapper wrapper = new QueryWrapper<>();
    wrapper
            .eq("user_name",username);
    //调用Service层方法
    User user = userService.getOne(wrapper);
    //返回错误类型
    if(user!=null){
        if(user.getPassword().equals(password)){
            return new R(true,user);
        }else {
            return new R(false,"密码错误");
        }

    }
    else return new R(false,"用户名不存在");
}

2.注册功能

1.绑定onblur事件完成用户名是否存在和用户名和其他输入的格式是否正确

document.getElementById("username").οnblur=function (){
     //检查用户名是否存在
    var username = this.value;
    if(username!==""){
        console.log(this.value)
        axios({
            method:"get",
            url:"/users/"+username
        }).then(function (resp){
            console.log(resp.data.flag)
            if(resp.data.flag){
                document.getElementById("name_err").style.display='';
            }else {
                document.getElementById("name_err").style.display='none';
            }
        })
    }     
        //检查格式，格式错误后提示用户
        if(checkusername.test(document.getElementById("username").value)){
            document.getElementById("name_err2").style.display='none';
        }else if (document.getElementById("username").value!==''){
            document.getElementById("name_err2").style.display='';
        }else {
            document.getElementById("name_err2").style.display='none';
        }

}

2.获取手机验证码功能

这里使用阿里云短信服务，获取accessKeyId，accessKeySecret，签名和模板code

工具类

public class sendMessageUtil {
    // 你的accessKeyId
    private static final String accessKeyId = "";
    // 你的accessKeySecret
    private static final String accessKeySecret = "";
    // 上面设置的签名
    private static final String signName = "阿里云短信测试";//
    // 短信模板，模板code
    private static final String templateCode = "SMS_154950909";
    private static int code;
    // phoneNumber必须当做参数传入
    public String senSMSUtil(String phoneNumber) {
        // 设置超时时间-可自行调整
        System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
        System.setProperty("sun.net.client.defaultReadTimeout", "10000");

        // 初始化ascClient需要的几个参数
        final String product = "Dysmsapi";// 短信API产品名称（短信产品名固定，无需修改）
        final String domain = "dysmsapi.aliyuncs.com";// 短信API产品域名（接口地址固定，无需修改）


        // 初始化ascClient,暂时不支持多region（请勿修改）
        IClientProfile profile;
        profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
        try {
            DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
        } catch (ClientException e) {
            e.printStackTrace();
        }
        IAcsClient acsClient = new DefaultAcsClient(profile);

        // 组装请求对象
        SendSmsRequest request = new SendSmsRequest();

        // 使用post提交
        request.setMethod(MethodType.POST);

        // 必填:待发送手机号。支持以逗号分隔的形式进行批量调用，批量上限为1000个手机号码,批量调用相对于单条调用及时性稍有延迟,
        // 验证码类型的短信推荐使用单条调用的方式；发送国际/港澳台消息时，接收号码格式为国际区号+号码，如“85200000000”
        request.setPhoneNumbers(phoneNumber);

        request.setSignName(signName);

        // 必填:短信模板-可在短信控制台中找到，发送国际/港澳台消息时，请使用国际/港澳台短信模版
        request.setTemplateCode(templateCode);

        //随机生成六位验证码
        code = (int) ((Math.random() * 9 + 1) * 100000);

        // 可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时,此处的值为
        // 友情提示:如果JSON中需要带换行符,请参照标准的JSON协议对换行符的要求,比如短信内容中包含\r\n的情况在JSON中需要表示成\\r\\n,否则会导致JSON在服务端解析失败
        request.setTemplateParam("{code:" + code + "}");

        // 请求失败这里会抛ClientException异常
        SendSmsResponse sendSmsResponse = null;

        try {
            sendSmsResponse = acsClient.getAcsResponse(request);
        } catch (ClientException e) {
            e.printStackTrace();
            return "请求失败";
        }

        assert sendSmsResponse.getCode() != null;
        // 获取错误码，如果你账户没钱会返回isv.AMOUNT_NOT_ENOUGH，表示账户没钱，充点钱就行了
        System.out.println(sendSmsResponse.getCode());
        if (sendSmsResponse.getCode() == null || !sendSmsResponse.getCode().equals("OK")) {// 发送不成功
            return sendSmsResponse.getMessage();
        }

        // 请求成功
        return "OK";

    }

    public int getCode() {
        return code;
    }


}

controller层功能实现

@RequestMapping("/sendSMS")
public void SendSMS(HttpServletRequest request, HttpServletResponse response)  {

    PrintWriter out = null;

    try {
        out = response.getWriter();
    } catch (IOException e) {
        e.printStackTrace();
    }
    String phoneNumber = request.getParameter("mobile");
    System.out.println(phoneNumber);

    // 发送短信
    sendMessageUtil sendMessageUtil = new sendMessageUtil();
    String result = sendMessageUtil.senSMSUtil(phoneNumber);

    if (result == null || !result.equals("OK")) {// 发送不成功
        System.out.println("失败");
    }

    // 获取验证码
    int code = sendMessageUtil.getCode();
    out.print(code);
    // 将数据存入SESSION
    request.getSession().setAttribute("checkCode", code);

    request.getSession().setAttribute("createTime", System.currentTimeMillis());
    // 将验证码生成时间存入SESSION，若超过五分钟则不通过校验
    // 将验证码生成时间存入SESSION，若超过五分钟则不通过校验
    final HttpSession session=request.getSession();
    try {
        // Timer 和 TimerTask都是java.util包下
        final Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                session.removeAttribute("checkCode");
                System.err.println("checkCode删除成功");
                timer.cancel();
            }
        }, 5 * 60 * 1000);
    } catch (Exception e) {
        e.printStackTrace();
    }
}
// 验证码检测
@RequestMapping("/checkCode")
public void checkCode(HttpServletRequest request, HttpServletResponse response) {
    HttpSession session = request.getSession();
    response.setContentType("text/html;charset=utf8");
    PrintWriter out = null;
    try {
        out = response.getWriter();
    } catch (IOException e) {
        e.printStackTrace();
    }
    String checkCode = request.getParameter("checkCode");
    String code = String.valueOf(session.getAttribute("checkCode"));
    if (checkCode.equals(code)) {
        //验证码使用成功后，从session删除
        request.getSession().removeAttribute("checkCode");
        out.print("验证码正确");
    } else {
        out.print("验证码错误");
    }
}

然后分别在前端调用发送验证码和check验证码功能