简单注册操作

研究生考试报名网站

（一）首先修改“注册”按钮，使得单击注册按钮能够实现去register.html页面的跳转

原代码为“register.html”

<li><a href="/user/register">注册</a>|</li>

<div align="center"><a href="/user/register" target="_blank">立即注册！</a></div>

从前端获取到访问请求，根据app.js里指定的router进入后端User调用物理地址

（二）用jQuery实现交互

点击“注册”按钮，将form中的数据传到后端（register.html文件中添加代码）

<script>
    $('#reg_btn').ready().click(function () {//点击注册按钮触发方法
         const formData = $('#form_register').serialize();//实现获取数据串化
        
         //验证用户名：
         if(($("#name").val())==null){
            alert("用户名不能为空!");
            return;
         }else{
            var $reg = /^\w{2,}$/;    //使用正则
            if(!$reg.test($("#name").val())){
                alert("用户名至少两位!");
                return;
            }
         }
        
         //验证密码：
         if($("#pass").val()==null){
            alert("密码不能为空!");
            return;
         }else{
            var $reg = /^\w{2,}$/;
            if(!$reg.test($("#pass").val())){
                alert("密码至少两位!");
                return;
            }
         }
         
         //确认密码：
         if($("#pass_again").val()==null){
            alert("请再次输入密码!");
            return;
         }
         
         //验证两次密码一致性：
         if($("#pass").val()!=$("#pass_again").val()){
            alert("两次密码不一致，请重新输入!");
            return;
         }
         
         console.log(formData)        //在控制台中打印获取的表单数据
    })
</script>

（三）用Ajax实现数据异步传输

在上一步的方法体里继续添加Ajax代码段传数据

$.ajax({ 
            type:'get',  
            url:'/user/registersend',
            data:formData,
            dataType:"JSON",
            success:function(json){
                if(json.code === 200){
                    alert("注册成功！即将跳转到主页");
                    window.location.href="/user/main";
                }else if(json.code === 400){
                    alert("注册失败！+json.msg");
                }
            }
        })

（四）在后端实现数据插入

将上述所得的数据插入数据库内

router.get('/registersend', function(req, res, next) {
  //获取请求字段

  console.log(req.query);   //控制台打印一下看看成功接收到没
  var username = req.query.name;    //获取前台请求参数
  var password = req.query.pass;
  var email = req.query.email;

  //启用连接池查询
  pool.getConnection(function (err, connection) {
    //先判断该账号是否存在
    
    //定义一个查询sql语句
    var $sql1 = "select * from user where USERNAME=?";
    //根据前端给的username补齐数据，返回result-查询到的结果
    connection.query($sql1, [username], function (err, result) {
      //我们重点关注数据长度 大于零说明查到东西了
      var resultJson = result;
      console.log(resultJson.length);
      //与登录逻辑不同，注册逻辑是有数据则报错
      if (resultJson.length !== 0) {
        result = {
          code: 400,
          msg: '该账号已存在'
        };
        res.json(result);
        connection.release();
      } else {  //账号不存在，可以注册，用insert插入数据
       
        var $sql1 = "insert into user (USERNAME,PASSWORD,EMAIL) VALUES(?,?,?)";
        connection.query($sql1, [username,password,email], function (err, result) {
            
           
          var temp = result.affectedRows;  //取得数据库更让新结果
          console.log(temp);
          if (temp == 1) {
            result = {
              code: 200,
              msg: '注册成功'
            };
          } else {
            result = {
              code: 400,
              msg: '注册失败'
            };
          }
          res.json(result); // 以json形式，把操作结果返回给前台页面
          connection.release();// 释放连接
          console.log('找到了')
        });
      }
    });
  });
})