基礎知識：

jade模板

nodejs的mysql模塊

express

一、準備工作

首先必然需要引入express，必須要用到的path模塊，這個用于設置靜態(tài)文件，mysql模塊用于連接mysql數(shù)據(jù)庫，涉及到表單提交，必然要解析請求體，所以要使用body-parse模塊

二、前端重構(gòu)

界面如下：

三、后端工作

引入模塊

var express=require("express");
var path=require("path");
var bodyParser=require("body-parser");
var mysql=require("mysql"); 

初始化

var app=express();

基本工作

//設置模板引擎
app.set("view engine","jade");
//設置視圖文件夾
app.set("views","./views");
//引入bodyparser中間件
app.use(bodyParser.urlencoded({extened:true}));
//設置靜態(tài)資源地址
app.use(express.static(path.join(__dirname,"static")));
//連接mysql數(shù)據(jù)庫
var connection=mysql.createConnection({
    host:"localhost",
    user:"huruji",
    password:"xie138108",
    database:"testlogin"
});
connection.connect();

利用jade創(chuàng)建模板

login.jade

doctype
html
    head
        meta(charset="utf-8")
        title login
        link(href="main.css",rel="stylesheet")
    body
        form.loginForm(action="/userlogin" method="post" )
            input.loginInput.loginuser(type="text", name="username" placeholder="用戶名")
            input.loginInput(type="password",name="userpassword" placeholder="密碼")
            p.loginerr #{loginerrMessage}
            input.submit(type="submit",value="登錄")

loginerr.jade

doctype
html
    head
        meta(charset="utf-8")
        title 登錄失敗
    body
        p 對不起，賬號或者密碼錯誤,<span id="goLoginTime" style="color:red";>3</span>秒后返回
        script(src="login.js")

登錄驗證的核心思想就是利用用戶提交的請求體，與數(shù)據(jù)庫中的數(shù)據(jù)進行比對，賬號正確則重定向到用戶需要進入的網(wǎng)頁，不正確則向用戶反饋信息，

我們使用當用戶的密碼錯誤時，返回一個新的網(wǎng)頁，提示用戶錯誤，當用戶的密碼與賬號正確的時候我們就讓他進入我們的首頁，這次我們假如我們的首頁就是工作室網(wǎng)站首頁：

app.route("/login").get(function(req,res){
    res.render("login")
}).post(function(req,res){
    console.log(req.body);
})
app.route("/userlogin").post(function(req,res){
    console.log("aaa");
    console.log(req.body);
    connection.query("SELECT * FROM user WHERE username="+connection.escape(req.body.username),req.body.username,function(err,rows,fields){
        console.log(rows);
        if(err){
            console.log()
            res.render("/loginerr");
            return;
        }else if(rows.length<1){
            res.redirect("/loginerr");
        }
        else if(rows[0].password!==req.body.userpassword){
            res.redirect("/loginerr");
        }else{
            res.redirect("http://ce.sysu.edu.cn/hope");
        }
    })
})
app.route("/loginerr").get(function(req,res){
    res.render("loginerr");
})
app.listen(3000);

當然這種肯定很少網(wǎng)站會用到，更多的應該是利用ajax刷新，告訴用戶密碼錯誤，當然還有一些網(wǎng)站是返回一個新的網(wǎng)頁，這個網(wǎng)頁與原來的登錄幾乎沒有二致，也只是多了一個提示信息而已。我們來實現(xiàn)一下第二個：

app.route("/login").get(function(req,res){
    res.render("login")
}).post(function(req,res){
    console.log(req.body);
})
app.route("/userlogin").post(function(req,res){
    console.log("aaa");
    console.log(req.body);
    connection.query("SELECT * FROM user WHERE username="+connection.escape(req.body.username),req.body.username,function(err,rows,fields){
        console.log(rows);
        if(err){
            console.log()
            res.render("/loginerr");
            return;
        }else if(rows.length<1){
            res.render("login",{"loginerrMessage":"賬號或者密碼錯誤！"});
        }
        else if(rows[0].password!==req.body.userpassword){
            res.render("login",{"loginerrMessage":"賬號或者密碼錯誤！"});
        }else{
            res.redirect("http://ce.sysu.edu.cn/hope");
        }
    })
})
app.listen(3000);

我們使用的依舊是同一個模板，只不過這次我們傳遞了一個參數(shù)而已，界面上沒啥區(qū)別，但是鏈接卻改變了，那么如果login路徑?jīng)]有其他的post請求，那么我們干嘛不放在同一個鏈接里呢

var express=require("express");
var path=require("path");
var bodyParser=require("body-parser");
var mysql=require("mysql"); 
var app=express();

//設置模板引擎
app.set("view engine","jade");
//設置視圖文件夾
app.set("views","./views");
//引入bodyparser中間件
app.use(bodyParser.urlencoded({extened:true}));
//設置靜態(tài)資源地址
app.use(express.static(path.join(__dirname,"static")));
//連接mysql數(shù)據(jù)庫
var connection=mysql.createConnection({
    host:"localhost",
    user:"huruji",
    password:"xie138108",
    database:"testlogin"
});
connection.connect();

app.route("/login").get(function(req,res){
    res.render("login")
}).post(function(req,res){
    console.log("aaa");
    console.log(req.body);
    connection.query("SELECT * FROM user WHERE username="+connection.escape(req.body.username),req.body.username,function(err,rows,fields){
        console.log(rows);
        if(err){
            console.log()
            res.render("login",{"loginerrMessage":"賬號或者密碼錯誤！"});
            return;
        }else if(rows.length<1){
            res.render("login",{"loginerrMessage":"賬號或者密碼錯誤！"});
        }
        else if(rows[0].password!==req.body.userpassword){
            res.render("login",{"loginerrMessage":"賬號或者密碼錯誤！"});
        }else{
            res.redirect("http://ce.sysu.edu.cn/hope");
        }
    })
});
app.listen(3000);

就這樣我們完成了一個帶有數(shù)據(jù)庫驗證的簡單的表單，當然我們肯定會將一部分驗證的權(quán)限交給前端部分，比如，用戶是否輸入了用戶名與密碼，用戶名與密碼是否符合規(guī)范等。