网页登录功能的实现

大家好，欢迎来到IT知识分享网。

前端：登录页面

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

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

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

<li><a href="/user/log">登录 </a></li>

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

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

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

<div class="button"> <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&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' }); });