网页注册功能的实现

孙弈秋302

已于 2022-12-28 21:27:41 修改

阅读量4.9k

点赞数 8

文章标签：前端 html 后端

于 2022-12-28 21:22:32 首次发布

本文链接：https://blog.csdn.net/weixin_56493063/article/details/128474080

版权

前端：注册页面

注册功能：输入用户名、密码等信息，通过后端将数据插入数据库，实现成功注册。

1.首先，新建注册页面（reg.html）

2.其次，对注册页面进行设计

页面头部内容（在<head>标签中添加内容）

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UU铺子</title>
    <link rel="stylesheet" href="/css/reg.css">
</head>

<title>标签—自定义网站标题

页面文档内容（在<body>标签中添加内容）

<body>
  <div class="big-box">
    <div class="small-box">
      <div class="box-1">
         </div>
         <!--左边的图片部分-->
         <div class="box-2">
         <!--右边的表单部分-->
           <div class="box-text1">
             <h3>注册账号</h3>
           </div>
             <div class="box-text2">
               <div class="box-text">
			      <div class="button">
					 <form id="form_reg" target="_top">
					    <div align="center">
						  <i class="icon-mobile-phone"></i>
							 <input type="text"  name="name" id="name" required="required"
										        placeholder="用户名" class="input_yh">
							 <input type="password" name="pass" id="pass" required="required"
									  		    placeholder="密码" class="input_mm">
							 <input type="password" name="pass_again" id="pass_again" required="required"
												placeholder="再次输入密码" class="input_mm">
						     <!-- <input type="email" name="email" id="emial" required="required"
									  	        placeholder="邮箱地址"  class="input_el"> -->
					</div>
						     <button><input type="button" id="reg_btn" class="button" title="Sign In" value="注册" style="outline: 0px;font-size: 18px;width: 250px; height: 35px;border-radius: 30px;border: none;background-color: rgba(41, 113, 139, 0.61);-webkit-text-fill-color: white;"></button>
					</form> 
				    </div>
           <div class="box-button">
              <label for="1">
                 <input type="checkbox" id="1" class="ma">
                 <span class="one"></span>
                  记住密码
                 </label>
              <label for="2">
                 <input type="checkbox" id="2" class="ma">
                 <span class="two"></span>
                 自动登录
                 </label>
           </div>
    <script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="/js/jquery.SuperSlide.2.1.js" type="text/javascript"></script>
	<script src="/js/common.js"></script>
</body>

<input>中，type="xxx"对按钮进行类型的定义。

如：button—定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

checkbox—定义复选框

password—定义密码字段。该字段中的字符被掩码

text—定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符

PS：在注册页面实现点击注册按钮后能够成功注册，并跳转回主页的功能

（在注册按钮中绑定script程序，使用户点击按钮时可以启动该程序）

<input type="button" > 定义可点击的按钮，但没有任何行为

button 类型常用于在用户点击按钮时启动 JavaScript 程序

3.最后，在登录页面内用JQuery实现前后端的数据交互、传输。

<script>
	$('#reg_btn').ready().click(function () {//点击注册按钮触发方法
		 const formData = $('#form_reg').serialize();//实现获取数据串化
	     console.log("formData")
		 //验证用户名：
		 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){
			console.log("heihei");
			alert("请再次输入密码!");
			return;
		 }
		 
		 //验证两次密码一致性：
		 if($("#pass").val()!=$("#pass_again").val()){
			console.log("haha");
			alert("两次密码不一致，请重新输入!");
			return;
		 }
		 
		 console.log(formData)		//在控制台中打印获取的表单数据
	
	    $.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);
				}
	    	}
	    })
		
	})
</script>

后端：注册页面

1.首先，在与前端串联的js文件中添加代码，能够将前端输入的数据成功插入数据库中。

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 cus 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插入数据
       
	   console.log(username)
        var $sql1 = "insert into cus (USERNAME,PASSWORD,EMAIL) VALUES(?,?,?)";  //删除了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('找到了')
        });
      }
    });
  });
})

2.其次，在js文件中加入下面的代码，实现登录成功后页面的跳转。

router.get('/main', function(req, res, next) {
    res.render('main', { title: 'Express' });
  });

3.最后，所插入的数据能够在数据库列表中显示。

孙弈秋302

关注

8
点赞
踩
56

收藏

觉得还不错? 一键收藏
1
评论
网页注册功能的实现

网页注册功能的实现
复制链接

扫一扫