express+mySQL实现简单的登录表单

基础知识:

jade模板

nodejs的mysql模块

express

一、准备工作

首先必然需要引入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);

就这样我们完成了一个带有数据库验证的简单的表单,当然我们肯定会将一部分验证的权限交给前端部分,比如,用户是否输入了用户名与密码,用户名与密码是否符合规范等。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容