博客
关于我
node.js平台下,利用cookie实现记住密码登陆(Express+Ejs+Mysql)
阅读量:444 次
发布时间:2019-03-06

本文共 3520 字,大约阅读时间需要 11 分钟。

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

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

2.node.js平台下Express的session与cookie模块包的配置:

3.node.js平台下的mysql数据库配置及连接:

完成前两步后需下载配置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)

登陆
忘记密码?

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嵌入视图页面中。

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);

喜欢请点击右下角推荐,如有疑问可以留言。转载请标明出处。

你可能感兴趣的文章
Navicat下载和破解以及使用
查看>>
Navicat中怎样将SQLServer的表复制到MySql中
查看>>
navicat创建连接 2002-can‘t connect to server on localhost(10061)且mysql服务已启动问题
查看>>
Navicat可视化界面导入SQL文件生成数据库表
查看>>
Navicat向sqlserver中插入数据时提示:当 IDENTITY_INSERT 设置为 OFF 时,不能向表中的标识列插入显式值
查看>>
Navicat因导入的sql文件中时间数据类型有参数而报错的原因(例:datetime(3))
查看>>
Navicat如何连接MySQL
查看>>
navicat导入.sql文件出错2006- MySQLserver has gone away
查看>>
Navicat工具Oracle数据库复制 or 备用、恢复功能(评论都在谈论需要教)
查看>>
navicat怎么导出和导入数据表
查看>>
Navicat报错:1045-Access denied for user root@localhost(using passwordYES)
查看>>
Navicat控制mysql用户权限
查看>>
navicat操作mysql中某一张表后, 读表时一直显示正在载入,卡死不动,无法操作
查看>>
Navicat连接mysql 2003 - Can't connect to MySQL server on ' '(10038)
查看>>
Navicat连接mysql数据库中出现的所有问题解决方案(全)
查看>>
Navicat连接Oracle出现Oracle library is not loaded的解决方法
查看>>
Navicat连接Oracle数据库以及Oracle library is not loaded的解决方法
查看>>
Navicat连接sqlserver提示:未发现数据源名并且未指定默认驱动程序
查看>>
navicat连接远程mysql数据库
查看>>
Navicat通过存储过程批量插入mysql数据
查看>>