• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)

node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)

作者:牙疼哥哥 字体:[增加 减小] 来源:互联网 时间:2017-05-11

牙疼哥哥通过本文主要向大家介绍了node.js ejs,node express ejs,node ejs,express ejs,nodejs express ejs等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

此内容需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.js博文:

1.下载Mysql数据库,安装并配置。创建用户表供登录使用:

2.node.js平台下Express的session与cookie模块包的配置:http://www.weikejianghu.com/article/112190.htm

3.node.js平台下的mysql数据库配置及连接:http://www.weikejianghu.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
</div>

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>
</div>

5.登陆界面点击登录按钮后,服务器入口文件(app.js)拦截路由/login.do

const per = require("./routes/perData.js");       //服务器入口文件引入perData.js
app.post("/Login.do",per.doLogin);
</div>

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数据返回给前台
    }
  })
};
</div>

*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>
</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页面
  }

});
</div>

*附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);
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)

相关文章

  • 2017-05-11利用JS实现简单的日期选择插件
  • 2017-05-11微信小程序开发之选项卡(窗口底部TabBar)页面切换
  • 2017-05-11Js实现中国公民身份证号码有效性验证实例代码
  • 2017-05-11Vue组件开发初探
  • 2017-08-14js回车事件触发
  • 2017-05-11用jQuery旋转插件jqueryrotate制作转盘抽奖
  • 2017-08-26《Javascript DOM编程艺术》读书笔记
  • 2017-05-11vue的Virtual Dom实现snabbdom解密
  • 2017-05-11Javascript Event(事件)的传播与冒泡
  • 2017-05-11微信小程序 生命周期和页面的生命周期详细介绍

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js中数组插入、删除元素操作的方法
    • js实现仿购物车加减效果
    • jQuery插件autocomplete使用详解
    • js运算符
    • 微信小程序 实例开发总结
    • Vue.js实现多条件筛选、搜索、排序及分页的表格功能
    • 微信小程序 商城开发(ecshop )简单实例
    • JavaScript实现简单精致的图片左右无缝滚动效果
    • 可视化工具--D3--案例分析--Histogram Chart
    • JS百度地图搜索悬浮窗功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有