此內(nèi)容需有node.js+express+MySQL入門基礎(chǔ)，若基礎(chǔ)薄弱，可參考博主的其他幾篇node.js博文：
“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)建站的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線，而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無止境。
1.下載Mysql數(shù)據(jù)庫，安裝并配置。創(chuàng)建用戶表供登錄使用：
2.node.js平臺(tái)下Express的session與cookie模塊包的配置：https://www.jb51.net/article/112190.htm
3.node.js平臺(tái)下的mysql數(shù)據(jù)庫配置及連接：https://www.jb51.net/article/110079.htm
完成前兩步后需下載配置Ejs模塊包：
*下載ejs模塊包：npm install ejs --save-dev
*配置ejs：
重慶分公司
重慶分公司
/*設(shè)置模板資源路徑*/
app.set ("views",__dirname+"/views"); //視圖模板都在這個(gè)文件夾
/*自定義文件后綴名，設(shè)置模板引擎*/
app.engine("html",ejs.__express);
app.set("view engine","html"); //設(shè)置模板引擎，代表視圖后綴名是ejs4.登錄頁面（login.html）
5.登陸界面點(diǎn)擊登錄按鈕后，服務(wù)器入口文件（app.js）攔截路由/login.do
const per = require("./routes/perData.js"); //服務(wù)器入口文件引入perData.js
app.post("/Login.do",per.doLogin);6.攔截路由后分發(fā)給路由處理文件（perData.js），perData.js暴露/login.do的接口，并提供處理函數(shù)。
////登錄驗(yàn)證
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){
//此處應(yīng)有判斷用戶在login.html中是否點(diǎn)擊了記住密碼，本文方便思路理解，默認(rèn)用戶已點(diǎn)擊“記住密碼”
//確定用戶是否點(diǎn)擊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過期時(shí)間
req.session.user=req.body.phone; //服務(wù)器端session保存登陸的會(huì)話狀態(tài)
res.render("perCenter",{u_tel:req.session.user}); //ejs模板引擎渲染用戶中心頁面（perCenter.js），并將u_tel數(shù)據(jù)返回給前臺(tái)
}
})
};*perCenter.js視圖頁面如下，<%=u_tel%>為ejs語法的定義變量，直接將后臺(tái)返回的u_tel嵌入視圖頁面中。
7.至此完成整個(gè)的登錄過程，并在用戶點(diǎn)擊了“記住密碼”后，將用戶信息寫入cookie，并設(shè)置了cookie的過期時(shí)間?，F(xiàn)在需要完善的是，在用戶關(guān)閉了瀏覽器窗口后，cookie未過期的前提下，第二次登陸網(wǎng)站會(huì)直接顯示登錄狀態(tài)，所以需要在服務(wù)器入口文件中(app.js)攔截服務(wù)器根目錄路由，并根據(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配置文件全部內(nèi)容：
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("啟動(dòng)成功"+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);
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
