网页登录功能的实现

前端：登录页面

登录功能：输入用户名、密码后，经过验证，如用户名、密码正确，则跳转到主页。

1.首先，新建登录页面（log.html）

2.其次，在网站首页的html文件中插入登录页面的跳转

&lt;li&gt;<a href="/user/log"&gt;登录 </a&gt;</li&gt;

“/user/log“即代表点击“登录”后，会对应跳转到log.html登录功能页面

 3.接下来，在登录页面实现点击登录按钮后能够成功登录，并跳转回主页的功能。

（在登录按钮中绑定script语法，使得实现点击跳转操作。同时，对登录按钮进行简单设计和属性的输入）

<div class="button"&gt;
   <form  id="reg-form"  target="_top" >
	  <div align="center">
		 <input type="text" name="name" id="name" required="required" placeholder="用户名" autocomplete="off" class="input_yh">
		 <input type="password" name="pass" id="pass" required="required" placeholder="密码" autocomplete="off" class="input_mm">
	  </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>
		 <button><a href="/user/reg" target="_blank">没有账户？注册！</a></button>
	</form>
</div>

<input>语句中，style=“xxx1;xxx2”，xxx1、xxx2指大小、长宽、颜色等属性

可以通过该代码来对按钮字体、颜色、大小进行调整。

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

<script>
        $('#reg-btn').ready().click(function () {
		alert("haha")
		  // 阻止表单的默认行为
		 // e.preventDefault()
		         //使用jq获取表单数据
		         const formData = $("#reg-form").serialize()//用ajax
		 
		         console.log(formData)//name=12&amp;pass=12
		         $.ajax({
		             url: '/user/login',
		             method:'post',       
		             data:formData,       
		             dataType:"json",
		             success:function(json){
		                 if(json.code===200){
		                     alert("登录成功！");
		                     window.location.href='/user/main'; 
		                     req.session.getname = req.body 
							 req.session.userid = id
							 req.session.islogin = true
		                 }else if(json.code===400){
		                     alert("登录失败！"+json.msg);
		                 }
		             }
		             
		         })
		 })
</script>

reg-btn—给登录按钮取一个id，以便实现点击后绑定的功能

reg-form—进行数据的传输

后端：登录页面

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

router.post('/login', function(req, res, next) {
    // 获取请求字段
    console.log('post')
    var username = req.body.name;//获取前台请求的参数
    var password = req.body.pass;
    //console.log(password)
 
    // 启用连接池查询
    pool.getConnection(function(err, connection) {
        //先判断该账号是否存在
        
        var $sql = "select * from cus where USERNAME=?";
        connection.query($sql, [username], function (err, result) {
          var resultJson = result;
          console.log(resultJson.length);
          if (resultJson.length === 0) {
            result = {
              code: 300,
              msg: '该账号不存在'
            };
            res.json(result);
            connection.release();
          } else {  //账号存在，可以登录，进行密码判断
           
            var $sql1 = "select PASSWORD from cus where USERNAME=?";
            connection.query($sql1, [username], function (err, result) {
                
               
              var temp = result[0].PASSWORD;  //取得数据库查询字段值
              console.log(temp);
              if (temp == password) {
                result = {
                  code: 200,
                  msg: '密码正确'
                };
              } else {
                result = {
                  code: 400,
                  msg: '密码错误'
                };
              }
              res.json(result); // 以json形式，把操作结果返回给前台页面
              connection.release();// 释放连接
              console.log('找到了')
            });
          }
        });
      });
});

该段代码的作用：从前端获得所输数据，先在数据库中查询信息，对账户进行判断。之后如果账户存在，则把结果传输过来。

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

（从log.html登录页跳转到main.html新主页）

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

代码007普通

打赏 收藏 海报 链接