node.js平臺下利用cookie實現(xiàn)記住密碼登陸(Express+Ejs+Mysql)
此內容需有node.js+express+mysql入門基礎,若基礎薄弱,可參考博主的其他幾篇node.js博文:
1.下載Mysql數(shù)據(jù)庫,安裝并配置。創(chuàng)建用戶表供登錄使用:

2.node.js平臺下Express的session與cookie模塊包的配置:http://www.dhdzp.com/article/112190.htm
3.node.js平臺下的mysql數(shù)據(jù)庫配置及連接:http://www.dhdzp.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.攔截路由后分發(fā)給路由處理文件(perData.js),perData.js暴露/login.do的接口,并提供處理函數(shù)。
////登錄驗證
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保存登陸的會話狀態(tài)
res.render("perCenter",{u_tel:req.session.user}); //ejs模板引擎渲染用戶中心頁面(perCenter.js),并將u_tel數(shù)據(jù)返回給前臺
}
})
};
*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的過期時間?,F(xiàn)在需要完善的是,在用戶關閉了瀏覽器窗口后,cookie未過期的前提下,第二次登陸網(wǎng)站會直接顯示登錄狀態(tài),所以需要在服務器入口文件中(app.js)攔截服務器根目錄路由,并根據(jù)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"); //否則正常顯示網(wǎng)站的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"))
});
/*======路由分發(fā)======*/
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);
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- node.js+express+mySQL+ejs+bootstrop實現(xiàn)網(wǎng)站登錄注冊功能
- 零基礎搭建Node.js、Express、Ejs、Mongodb服務器及應用開發(fā)入門
- express框架通過ejs模板渲染輸出頁面實例分析
- Express 框架中使用 EJS 模板引擎并結合 silly-datetime 庫進行日期格式化的實現(xiàn)方法
- nodejs中的express-jwt的使用解讀
- NodeJS?Express使用ORM模型訪問關系型數(shù)據(jù)庫流程詳解
- NodeJs Express框架操作MongoDB數(shù)據(jù)庫執(zhí)行方法講解
- NodeJs?Express路由使用流程解析
- NodeJs Express中間件使用流程解析
- express框架+bootstrap美化ejs模板實例分析
相關文章
Nodejs 數(shù)組的隊列以及forEach的應用詳解
這篇文章主要介紹了Nodejs 數(shù)組的隊列以及forEach的應用詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-02-02
使用async、enterproxy控制并發(fā)數(shù)量的方法詳解
并發(fā)相信對大家來說都不陌生,這篇文章主要給大家介紹了關于使用async、enterproxy控制并發(fā)數(shù)量的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
node.js中實現(xiàn)kindEditor圖片上傳功能的方法教程
最近在做一個類似于論壇的系統(tǒng),帖子需要進行圖文并茂的顯示,所以用到了富文本編輯器:kindeditor,下面這篇文章主要給大家介紹了在node.js中實現(xiàn)kindEditor圖片上傳功能的方法教程,需要的朋友可以參考借鑒,下面來一起看看吧。2017-04-04
Nodejs監(jiān)控事件循環(huán)異常示例詳解
這篇文章主要給大家介紹了關于Nodejs監(jiān)控事件循環(huán)異常的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Nodejs具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-09-09

