SpringBoot实现注册操作

这段时间开始做后台接口的测试都是在自己电脑上做的一些简单的界面来测试自己写的接口有没有出现什么问题。这里记录一下注册页面和接口的代码实现。

一、前端代码实现

• 1、直接贴代码吧，都是很简单的html：

<div>
    <h3>注册</h3>
    <form action="/userRegister">
        <div>请输入账号：<input type="text"  id="username" /></div>
        <div>请输入密码：<input type="password" id="password" /></div>
        <div>请确定密码：<input type="password"  id="pwd" /></div>
        <input type="button" id="register" value="注册" />
        <!-- <div><input type="button" οnclick="register()"  value="注册"/></div >-->
    </form>
</div>

• 2、界面展示：(三个输入框，一个注册按钮)
  
• 3、js代码块(这里的逻辑很简单，首先是获取三个输入框内容，做简单判断，然后ajax异步调用自己写的后台接口userRegister，将数据传给后台做认证操作)

$("#register").click(function () {
        var username =document.getElementById('username').value;
        if(null == username || "" === username) {
            alert("请输入用户名");
            return;
        }
        var password =document.getElementById('password').value;
        if(null == password || "" === password) {
            alert("请输入密码");
            return;
        }
        var pwd =document.getElementById('pwd').value;
        if(null == pwd || "" === pwd) {
            alert("请确定密码");
            return;
        }

        $.ajax({
            url : "http://localhost:8080/userRegister",
            type : "POST",
            data :{
                "username":username,
                "password": password,
                "pwd":pwd,
            },
            dataType : "json",
            success : function(data) {
                //后台返回数据
                if (data.status === "ok") {
                    alert(data.message);   //注册成功
                    window.location.href = "/userLogin";
                }else {
                    alert("注册失败");
                }

            },
            error:function (result) {
                alert("请求错误！", console.result);
            }

        });
    })

二、后台接口的代码实现

userRegister注册接口


注册这里的后台接口不是很复杂，逻辑上和登录是差不多的，通过获取前端传来的数据，做逻辑判断再插入数据库中，做登录认证准备。

三、实现效果

• 1、注册效果
  
• 2、数据库和后台显示