node.js简单实现注册功能

╰半橙微兮° 2023-06-06 08:29 15阅读 0赞

需求：  
若用户名未注册，将用户注册信息保存到数据库中。

需求分析：  
1.前端校验用户注册信息，并向后台发送请求。  
2.后台校验用户是否注册，若未注册则将信息写入数据库中，支持get和post两种方式。

前端代码：

//导入封装好的ajax请求（封装的Ajax请求下方有链接）
      <script src="./ajax.js"></script>
          <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            div {
                width: 510px;
                height: 350px;
                margin: 150px auto;
                background: #f2f2f2;
                padding: 30px;
                box-shadow: 0px 0px 5px #aaa;
                position: relative;
            }
    
            input {
                width: 250px;
                height: 30px;
                margin-top: 20px;
                margin-left: 10px;
            }
    
            button {
                margin-top: 20px;
                width: 50px;
                height: 30px;
            }
    
            span {
                font-size: 12px;
                color: red;
                margin-left: 5px;
                display: none;
            }
            a {
                width: 50px;
                height: 30px;
                border: 1px solid gray;
                display: inline-block;
                text-decoration: none;
                color: black;
                text-align: center;
                line-height: 30px;
                border-radius: 5px;
                position: absolute;
                bottom: 85px;
                right: 160px;
            }
        </style>
        <body>
        <div>
            <h2>用户注册</h2>
            <label for="o1">用户名：</label><input type="text" id="o1"><span id="s1">用户名4-16位</span><br>
            <label for="o2">密 码：</label><input type="text" id="o2"><span id="s2">密码至少6位</span><br>
            <label for="o3">电 话：</label><input type="text" id="o3"><span id="s3">请输入有效的手机号码</span><br>
            <button>注册</button><a href="../登录/login.html">登录</a>
        </div>
    
        <script>
            let inp1 = document.querySelector('#o1');
            let inp2 = document.querySelector('#o2');
            let inp3 = document.querySelector('#o3');
       //输入框失焦时校验信息。
            inp1.onblur = function () {
                //用户名正则，4到16位（字母，数字，下划线，减号）
                let upar = /^[a-zA-Z0-9_-]{4,16}$/;
                if (!upar.test(inp1.value)) {
                    document.querySelector('#s1').style.display = 'inline-block';
                    inp1.focus();
                }
            };
            inp2.onblur = function () {
                //密码强度正则，最少6位，
                let ppar = /^.{6,}$/;
                if (!ppar.test(inp2.value)) {
                    document.querySelector('#s2').style.display = 'inline-block';
                    inp2.focus();
                }
            };
            inp3.onblur = function () {
                //手机号
                let tpar = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
                if (!tpar.test(inp3.value)) {
                    document.querySelector('#s3').style.display = 'inline-block';
                    inp3.focus();
                }
            };
    //点击注册按钮时向后台发送数据请求结果（get与post方式均支持）
            document.querySelector('button').onclick = function () {
                let inp11 = inp1.value;
                let inp22 = inp2.value;
                let inp33 = inp3.value;
                let url = 'http://localhost:9090';
                let ourl = `username=${inp11}&psd=${inp22}&tel=${inp33}`;
                request('get', url, ourl).then(data => {
                   document.write(data);
                }, err => {
                    console.log(err);
                });
            }
        </script>
    </body>

后端代码：

链接：  
[Promise简单封装ajax请求][Promise_ajax]

[Promise_ajax]: https://mp.csdn.net/mdeditor/102491663#