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的trim方法
Oct 09 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
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
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
基于JavaScript实现弹幕特效
2020/08/27 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Why we need EJB
2016/10/20 面试题
运动会开幕式邀请函
2014/01/22 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
数控机床专业自荐信
2014/05/19 职场文书
植树节标语
2014/06/27 职场文书
个人违纪检讨书
2014/09/15 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
学校学期工作总结
2015/08/13 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL