基础知识：
一、准备工作
首先必然需要引入express，必须要用到的path模块，这个用于设置静态文件，mysql模块用于连接mysql数据库，涉及到表单提交，必然要解析请求体，所以要使用body-parse模块
二、前端重构
界面如下：
三、后端工作
引入模块
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}));
//设置静态资源地址
app.use(express.static(path.join(__dirname,"static")));
//连接mysql数据库
var connection=mysql.createConnection({
host:"localhost",
user:"huruji",
password:"xie138108",
database:"testlogin"
});
connection.connect();
利用jade创建模板
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")
登录验证的核心思想就是利用用户提交的请求体，与数据库中的数据进行比对，账号正确则重定向到用户需要进入的网页，不正确则向用户反馈信息，
我们使用当用户的密码错误时，返回一个新的网页，提示用户错误，当用户的密码与账号正确的时候我们就让他进入我们的首页，这次我们假如我们的首页就是工作室网站首页：
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);
当然这种肯定很少网站会用到，更多的应该是利用ajax刷新，告诉用户密码错误，当然还有一些网站是返回一个新的网页，这个网页与原来的登录几乎没有二致，也只是多了一个提示信息而已。我们来实现一下第二个：
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);
我们使用的依旧是同一个模板，只不过这次我们传递了一个参数而已，界面上没啥区别，但是链接却改变了，那么如果login路径没有其他的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}));
//设置静态资源地址
app.use(express.static(path.join(__dirname,"static")));
//连接mysql数据库
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);
就这样我们完成了一个带有数据库验证的简单的表单，当然我们肯定会将一部分验证的权限交给前端部分，比如，用户是否输入了用户名与密码，用户名与密码是否符合规范等。
网友评论