node.js学习笔记Day5

最新推荐文章于 2024-07-11 11:09:44 发布

行呗头发还尚存

最新推荐文章于 2024-07-11 11:09:44 发布

阅读量231

点赞数

分类专栏： node.js学习专栏文章标签： node.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_58747565/article/details/124865446

版权

node.js学习专栏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

5.1 我们可以专门建立一个js文件叫loginauto.js文件来进行自动登录的操作

5.2 静默自动登录的思路

6 登录功能完整代码

6.1 静态界面完整代码

6.2 userController完整代码

6.3 路由完整代码

6.4 数据库完整代码

7 遇到的问题

这次笔记是在上次完成注册的功能基础上完成登录以及静默自动登录功能

1 衔接昨天的前端跳转到登录界面

昨天跳转到了登录页面了

//请求提交ajax
			$.ajax({
				url: `http://localhost:80/users/register?phone=${phone}&code=${code}&nikename=${nikename}&pwd=${password}&repwd=${rePassword}`,
				dataType: "json",
				type: "get",
				success: function (data) {
					console.log(data);
					let status = data.status;
					if (status === 200) {
						//请求成功
						let faly = confirm("注册成功，是否跳转到登录界面");
						if (faly) {
							location.href = "loadpage.html";
						}
					} else {
						//请求失败
						alert(data.msg);
					}
				}
			});

2 登录页面静态代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/load.css">
</head>

<body>
	<header id="headNav">
		<div class="innerNav cf">
			<a class="fl" href="#"><img src="images/loginlogo.jpg" alt="" /></a>
			<div class="headFont fr">
				<span>您好，欢迎光临1号店！<a href="registerpage.html">请注册</a></span>
				<a class="helpLink" href="#"><i class="runbun"></i>帮助中心<i class="turnb"></i></a>
			</div>
			<div class="outHelp">
				<ul class="helpYou" style="display: none;">
					<li><a href="#">包裹跟踪</a></li>
					<li><a href="#">常见问题</a></li>
					<li><a href="#">在线退换货</a></li>
					<li><a href="#">在线投诉</a></li>
					<li><a href="#">配送范围</a></li>
				</ul>
			</div>
		</div>
	</header>
	<section id="secBody">
		<div class="innerBody cf">
			<img class="fl" src="images/loadimg.jpg" alt="" />
			<div class="tableWrap fr">
				<div class="tableTap cf">
					<h3 class="fl">1号店用户登录</h3>
					<a class="fr" href="#">注册账号</a>
				</div>
				<div class="tableItem">
					<i class="userHead"></i>
					<!--邮箱、以13、15、18开头的电话或者是2~4个汉字-->
					<input type="text" name="userName" placeholder="邮箱/手机/用户名" required />
				</div>
				<div class="tableItem">
					<i class="userLock"></i>
					<input type="password" name="password" placeholder="密码" required />
				</div>
				<div class="tableAuto cf">
					<a class="autoMatic fl" href="#"><input class="loadGiet" type="checkbox" />自动登录</a>
					<a class="fr" href="#">忘记密码？</a>
				</div>
				<!--<button class="tableBtn">登录</button>-->
				<input type="submit" class="tableBtn" value="登录" />
				<h2 class="moreWeb">更多合作网站账号登录</h2>
				<div class="outType cf">
					<ul class="loadType cf">
						<li class="fl"><a href="#"></a></li>
						<li class="fl"><a href="#"></a></li>
						<li class="fl"><a href="#"></a></li>
						<li class="fl"><a href="#"></a></li>
						<li class="loadMore fr">更多合作网站<i></i></li>
					</ul>
				</div>
				<ul class="typeWeb cf">
					<li class="fl"><i></i><a href="#">百度</a></li>
					<li class="fl"><i></i><a href="#">百度</a></li>
					<li class="fl"><i></i><a href="#">百度</a></li>
					<li class="fl"><i></i><a href="#">百度</a></li>
					<li class="fl"><i></i><a href="#">百度</a></li>
				</ul>
			</div>
		</div>
	</section>
	<footer id="footNav">
		<p><a href="#">沪ICP备13044278号</a>|&nbsp;&nbsp;合字B1.B2-20130004&nbsp;&nbsp;|<a href="#">营业执照</a></p>
		<p>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</p>
	</footer>
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/loadpage.js"></script>
</html>

3 编写前端发送登录请求的程序

<script>
	$(function () {
		//设置点击事件
		$(".tableBtn").click(function () {
			//获取登录的值
			let username = $("[name='userName']").val();
			let pwd = $("[name='password']").val();
			//验证数据格式
			let isphone = /^(0|86|17951)?(13[0-9]|15[012356789]|16[6]|19[89]]|17[01345678]|18[0-9]|14[579])[0-9]{8}$/;
			if (!isphone.test(username)) {
				alert("手机号码格式不正确");
				return;
			}
			//验证密码不能少于六位
			if (pwd.length < 6) {
				alert("密码长度不能少于六位");
				return;
			}
			//提交登录请求	
			$.ajax({
				url: `http://localhost:80/users/login?phone=${username}&pwd=${pwd}`,
				dataType: "json",
				type: "get",
				success: function (data) {
					处理登录请求后的处理，判断是否登录成功
					if (data.status === 200) {
						//获取是否自动登录
						let checkboxFlay = $(".loadGiet").get(0).checked;
						if (checkboxFlay) {
							//制作存入localStorage的数组对象
							let user = { 'userName': data.msg.userName, 'userPhone': username, 'userPwd': pwd };
							//存入localStorage
							localStorage.setItem("user", JSON.stringify(user));
						}
						//登录成功后存入sessionStorage
						sessionStorage.setItem("user", JSON.stringify(data.msg));
					} else {
						alert(data.msg);
					}
				}
			})
		});
	});
</script>

注意localStorage和sessionStorage的区别；

localStorage是永久存储在本地的

sessionStorage是跟session一个性质，在浏览器关闭或者服务器关闭或者(包的丢失)会清空数据

然后let checkboxFlay = $(".loadGiet").get(0).checked;这里获取复选框的选中状态我这里采用

先用jquery获取复选框，然后转换为js用js中的checked方法来获取的状态，其中获取复选框状态的方法不限于我这一种。

4 编写服务器登录代码

//登录方法
async function login(req, res) {
    //接收参数
    let { phone, pwd } = req.query;
    //验证参数格式是否正确
    let isphone = /^(0|86|17951)?(13[0-9]|15[012356789]|16[6]|19[89]]|17[01345678]|18[0-9]|14[579])[0-9]{8}$/;
    if (!isphone.test(phone)) {
        res.send({ status: 400, msg: "手机号码格式不正确" });
        return;
    }
    //验证密码不能少于六位
    if (pwd.length < 6) {
        res.send({ status: 400, msg: "密码长度不能少于六位" });
        return;
    }
    //核对数据库数据
    let sql = "select userId,userName,userPhone from user where userPhone=? and userPwd=?";
    //注意一定要加await等待查询结果出来后再执行下面的代码
    let result = await db.opreateDB(sql, [phone, pwd]);
    if (result.length === 1) {
        //核对只有一条数据且条件正确
        //存入session
        req.session.islogin = true;
        req.session.user = result;
        //响应网页
        res.send({ status: 200, msg: req.session.user});
    } else {
        res.send({ status: 400, msg: "登录失败，账号或密码错误" });
    }
}

注意：我们在做登录的时候不要把用户的密码响应出去。

4.2 设置路由

router.get('/login', userController.login);

到这里我们的登录方法就完成了，接下来就是自动登录的方法了