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 word表格动态添加代码
Jun 07 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
javascript中Object使用详解
Jan 26 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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-fpm的配置详解
2013/06/03 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP中each与list用法分析
2016/01/08 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
利用js对象弹出一个层
2008/03/26 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python实现批量下载图片的方法
2015/07/08 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python中常见的异常总结
2018/02/20 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
风雨哈佛路观后感
2015/06/03 职场文书
房屋产权证明书
2015/06/19 职场文书
网络营销实训总结
2015/08/03 职场文书
新兵入伍决心书
2015/09/22 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
深入理解go slice结构
2021/09/15 Golang