node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)


Posted in Javascript onApril 26, 2017

此内容需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.js博文:

1.下载Mysql数据库,安装并配置。创建用户表供登录使用:

node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)

2.node.js平台下Express的session与cookie模块包的配置:https://3water.com/article/112190.htm

3.node.js平台下的mysql数据库配置及连接:https://3water.com/article/110079.htm

完成前两步后需下载配置Ejs模块包:

*下载ejs模块包:npm install ejs --save-dev

*配置ejs:

/*设置模板资源路径*/
  app.set ("views",__dirname+"/views");  //视图模板都在这个文件夹
  /*自定义文件后缀名,设置模板引擎*/
  app.engine("html",ejs.__express);
  app.set("view engine","html");  //设置模板引擎,代表视图后缀名是ejs

4.登录页面(login.html)

<div class="registerBg">
  <section class="registerBox bd">
    <div class="regTittle">登陆</div>
    <form method="post" action="/login.do">
      <input type="text" class="phone" placeholder="请输入手机号" id="phone" name="phone">
      <input type="password" placeholder="请输入密码" class="pwd" name="pwd" id="pwd"/>
      <div class="other bd">
        <label class="obey bd" ><input type="checkbox" id="remPwd" checked> 记住密码</label><a class="forgetPwd">忘记密码?</a>
      </div>
      <button class="doReg" id="doLogin">登陆</button>
    </form>
  </section>
</div>

5.登陆界面点击登录按钮后,服务器入口文件(app.js)拦截路由/login.do

const per = require("./routes/perData.js");       //服务器入口文件引入perData.js
app.post("/Login.do",per.doLogin);

6.拦截路由后分发给路由处理文件(perData.js),perData.js暴露/login.do的接口,并提供处理函数。

////登录验证
exports.doLogin=function(req,res){
  console.log(req.body.phone);
  console.log(req.body.pwd);
  db.connect("select * from t_user where u_tel=? and u_pwd=?",[req.body.phone,req.body.pwd],function(err,data){
    console.log(data.length);
    if(data.length>0){



//此处应有判断用户在login.html中是否点击了记住密码,本文方便思路理解,默认用户已点击“记住密码”




//确定用户是否点击checkBox的方法:




//1.原生js: document.getElementById("remPwd").checked




//2.jquery: $("#remPwd").is(":checked")
      res.cookie("user",{"user":req.body.phone,"pwd":req.body.pwd},{maxAge:1000*60*60});    //登陆成功后将用户和密码写入Cookie,maxAge为cookie过期时间
      req.session.user=req.body.phone;                             //服务器端session保存登陆的会话状态
      res.render("perCenter",{u_tel:req.session.user});











//ejs模板引擎渲染用户中心页面(perCenter.js),并将u_tel数据返回给前台
    }
  })
};

*perCenter.js视图页面如下,<%=u_tel%>为ejs语法的定义变量,直接将后台返回的u_tel嵌入视图页面中。

<div class="navBox container-fluid">
  <div class="row">
    <span class="col-lg-2 col-md-2 icon-lianxi contact alignLeft"> 010-65596969</span>
    <span class="col-lg-2 col-md-2 icon-denglu contact col-lg-push-8 col-md-push-2 alignRight"><%=u_tel%></span>    
  </div>
</div>

7.至此完成整个的登录过程,并在用户点击了“记住密码”后,将用户信息写入cookie,并设置了cookie的过期时间。现在需要完善的是,在用户关闭了浏览器窗口后,cookie未过期的前提下,第二次登陆网站会直接显示登录状态,所以需要在服务器入口文件中(app.js)拦截服务器根目录路由,并根据cookie做出判断。

app.get("/",function(req,res){
  if(req.cookies.user){            //cookie中存在用户信息,则直接返回登陆页面
    res.render("perCenter",{u_tel:req.cookies.user.user})
  }else{
    res.redirect("index.html");      //否则正常显示网站的index.html页面
  }

});

*附app.js配置文件全部内容:

const express = require("express");
const app = express(); 
const session = require("express-session");
const cookie = require("cookie-parser");
const ejs = require("ejs");
const per = require("./routes/perData.js");

app.configure(function(){
  app.use(cookie());
  app.use(session({
    name:"final",
    secret:"1234567",
    cookie:{maxAge:10000},  //毫秒为单位
    resave:true,
    rolling:true
  }));
  app.set ("views",__dirname+"/views");  
  app.engine("html",ejs.__express);
  app.set("view engine","html");  
  app.use(express.logger("dev")); 
  app.use(express.bodyParser()); 
  app.use(express.methodOverride()); 
  app.use(app.router); 
  app.use(express.static(__dirname+"/public"));  
  //app.use(express.favicon(__dirname+"/public/images/favicon.ico")); 
  app.use(express.errorHandler());  
});
app.set("port",8889);

app.listen(app.get("port"),function(){
  console.log("启动成功"+app.get("port"))
});


/*======路由分发======*/
app.get("/",function(req,res){
  if(req.cookies.user){
    res.render("perCenter",{u_tel:req.cookies.user.user})
  }else{
    res.redirect("index.html");
  }

});
app.post("/Login.do",per.doLogin);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js浮动图片的动态效果
Jul 10 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue.js实现文章评论和回复评论功能
May 30 #Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 #Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 #jQuery
快速使用node.js进行web开发详解
Apr 26 #Javascript
js canvas实现擦除效果示例代码
Apr 26 #Javascript
vue-cli如何快速构建vue项目
Apr 26 #Javascript
Vue制作Todo List网页
Apr 26 #Javascript
You might like
PHP下几种删除目录的方法总结
2007/08/19 PHP
php如何获取文件的扩展名
2015/10/28 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python文件的md5加密方法
2016/04/06 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python开启debug模式的方法
2019/06/27 Python
python日志模块logbook使用方法
2019/09/19 Python
python判断链表是否有环的实例代码
2020/01/31 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
金融事务专业毕业生求职信
2014/02/23 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
亮剑观后感
2015/06/05 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
python绘制箱型图
2021/04/27 Python
MySQL数据库表约束讲解
2022/06/21 MySQL
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers