node、express、mysql、jade实现用户登录数据获取及验证

今天要给大家介绍一下如何利用node.js的expressjademysql三个module实现获取form表单的内容以及通过数据库验证登录的正确性。请确保你已经下载好了前面三个module并且你的电脑里面已经安装好mysql。

首先看看运行页面：

再给大家看看整个小系统的目录结构吧：

请大家按照图中所示的目录结构建立好所有的文档吧。当然jquery你下载就可以了。

接下来，我们将建立数据库：

create database receipts;  #创建数据库

#创建名为user的表
use receipts;
create table  user (
    userid bigint auto_increment not null primary key,
    username  varchar(20) not null,
    pass  varchar(30) not null
);

然后我们来书写我们所需要的login.jade。这里使用jade，我们需要创建一个简单的layout.jade（模板）,在layout模板中我们将定义最基本的网页框架。设定大多数网页相同的部分。这里关于jade的语法我就不多讲了，jade的官网上很详细，直接给出layout的代码：

!!! 5
html
      head
          title=title
        link(rel='stylesheet',type='text/css',href='/css/style.css')
      body!=body

注意，由于jade会对我们所写的代码进行重新编码，编码成linux的相关格式，这里建议大家使用类似notepad++、ultra editor等软件时将其编码为UTF-8 无DOM格式，并且请不要在文件中同时使用空格和Tab对文件分隔，会导致报错。这里强调一下比如上述 title=title，这里是把网页的标题赋值给一个变量叫做title，之后我们声明并赋值title。link后面不能添加空格。类似的也一样。

下面是我们的登录界面login.jade,代码如下：

form(id='login',method='post',action='/login')
    h1 Log In
    p(style='margin-top:20px;')   #{error}
    fieldset(id='inputs')
        input(id='username',name='username',type='text',placeholder='Username',autofocus='',required='')
        input(id='password',name='password',type='password',placeholder='Passowrd',required='')
     fieldset(id='actions')
        input(type='submit',id='submit',value='Log in')
        a(href='') Forgot your password
        a(href='http://google.com') Register

大致是定义一个完整的表单。并且定义一个显示提示错误信息的地方。当然还有最重要的css代码。我将在后面提供源码给大家下载。
home.jade和index.jade这个程序里面我们用不到，因此内容可以不管它。

接下来，我们就开始写代码了。当然是使用express了。首先我们将写两个路由器在app.js中，一个是显示登录的页面并且作为首页，另外一个是验证登录的页面。

//首先添加配置信息

app.set('view engine','jade');   //设置模板引擎
app.set('views',__dirname+'/views');   //配置jade文件夹
app.use(express.static(__dirname+'/public'));  //设置静态文件文件夹,比如css，js,/images
app.use(express.bodyParser()); //用户获取form表单数据
app.use(express.methodOverride());

//设置首页。
app.get('/',function(req,res){
    res.render('index',{title:'欢迎使用收据管理系统',error:''});
});

style="padding-left: 30px;"

• 获取表单中数据
• 创建mysql数据库连接
• 从mysql请求数据
• 将数据库中数据与form表单进行比较，并返回结果。

//获取表单中数据
var user = req.body.username； //这样便可以获取到form表单中 name=”username”值，依赖于express.bodyParser()

创建mysql数据库连接。这里我们将做一个小小的封装。将封装的函数写入 user.js

//连接mysql服务器
function connectServer(){
    //创建mysql连接,设置用户名，密码
    var client = mysql.createClient({
        user:'root',
        password :'root'
    });
    client.host= '127.0.0.1';
    client.port=3306;
    client.database='receipts'; //选择需要使用的数据库，创建数据库时不必须，其他时候必须
    return client;   //返回创建好的数据库连接对象
}

//接下来我们将从数据库获取数据，同样我们也做一个封装。因为要执行数据库操作。因此我们需要传入一个数据库连接对象client，并且传入用户名，以便查出该用户对应的密码。再则我们需要创建一个回调函数以便于，在获取到数据库中的值后，做出相关判断。按照常规长发很难获取值。应该闭包可以。（这个回调函数得感谢一个群里的大牛。），代码如下。

//执行mysql查询操作。返回查询获取到的对象
 function  selectFun(client,username,callback){
    //client为一个mysql连接对象
    client.query('select pass from user where username="'+username+'"',function(err,results,fields){
        if(err) throw err;

        callback(results);   //在获取结果之后由回调函数进行相关操作
    });
}

style="padding-left: 30px;"

style="padding-left: 30px;"

style="padding-left: 30px;"

style="padding-left: 30px;"

style="padding-left: 30px;"

style="padding-left: 30px;"

style="padding-left: 30px;"