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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
微信小程序input抖动问题的修复方法
Mar 03 Javascript
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
帅气的琦玉老师
2020/03/02 日漫
如何将数据从文本导入到mysql
2006/10/09 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
php命令行写shell实例详解
2018/07/19 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
javascript event 事件解析
2011/01/31 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
tab栏切换原理
2017/03/22 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
详解Vue之计算属性
2020/06/20 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
python基于ID3思想的决策树
2018/01/03 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
公司募捐倡议书
2014/05/14 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
养成教育主题班会
2015/08/13 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电