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 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
微信小程序实现文字无限轮播效果
Dec 28 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
php常用表单验证类用法实例
2015/06/18 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
教师找工作推荐信
2013/11/23 职场文书
数学国培研修感言
2014/02/13 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
小学毕业感言100字
2015/07/30 职场文书
CAD实训总结范文
2015/08/03 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
纯html+css实现打字效果
2021/08/02 HTML / CSS
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers