前端：登录页面
登录功能：输入用户名、密码后，经过验证，如用户名、密码正确，则跳转到主页。
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文件中加入下面的代码，实现登录成功后页面的跳转。文章来源：https://www.toymoban.com/news/detail-462387.html
（从log.html登录页跳转到main.html新主页）文章来源地址https://www.toymoban.com/news/detail-462387.html
router.get('/main', function(req, res, next) {
res.render('main', { title: 'Express' });
});到了这里，关于网页登录功能的实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
