注册更改操作

注册更改操作

网页源代码文件

1.在前端实现：点击注册后跳转注册页面

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

index.html中原代码：

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

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

更改为：

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

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

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

2.在前端实现交互传输：点击注册按钮，将form中数据传给后端

（注：用jQuery实现交互）

在register.html中新增jQuery代码段，注册时要加入判断警告

<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>

3.在前端实现传输数据：将用jQuery实现了串化的数据传给后端

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

（注意：前面的get register是接受前端user/register的请求，用户在form中写完数据后还需要发送一个新的请求到后端用于后端的数据获取，所以我们在此将传数据的请求命名为registersend）

在上一步的方法体里继续添加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");
				}
        	}
        })

4.在后端实现数据插入：将前面得到的数据插入后台数据库

get第三步的registersend请求：

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('找到了')
        });
      }
    });
  });
})