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获取网页支持表单字符集的方法
Apr 02 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php批量删除数据
2007/01/18 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
探讨如何把session存入数据库
2013/06/07 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
毕业生大学生活自我总结
2014/01/31 职场文书
献爱心倡议书
2014/04/14 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
python使用shell脚本创建kafka连接器
2022/04/29 Python