spring boot注册bean springboot 用户注册

转载

人类新新 2023-07-12 18:22:57

文章标签 spring boot注册bean java 数据库 spring boot 代码实现 文章分类 spring boot 后端开发

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

一、前端代码实现

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);
            }

        });
    })