登录注册前后台连接

我们上一篇主要讲了登录注册问题里面注册的各个输入框格式的判断以及各项的正则表达式。前台的各项输入都规定好按要求输入以后我们需要将这些数据存入后台数据库，这里我们就需要用到ajax来连接前后台了。

$http 服务是AngularJS的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。

$http 服务是这样一个函数：它接受一个设置对象，其中指定了如何创建HTTP请求；它将返回一个承诺（*参考JavaScript异步编程的promise模式），其中提供两个方法： success方法和error方法。

demoApp.controller("demoController", function($http, $scope){

         $scope. getAjaxUser = function(){

                   $http.get("../xxx.action").success(function(data){

                            alert(data);

                   }).error(function(){

                            Alert(“出错了！”);

});

                  

};

});

         AngularJS的AJAX与jquery等框架的AJAX基本一致，这里就不多说了。

我的注册ajax代码如下：

$scope.register=function(){

$scope.testUser();

$scope.testPwd();

$scope.testConfirmPwd();

$scope.testEmail();

$scope.testSex();

if(!$scope.usernameIsError&& !$scope.pwdIsError && !$scope.confirmPwdIsError && !$scope.emailIsError&& !$scope.usersexIsError){

var name=$scope.name;

var pwd=$scope.pwd;

var email=$scope.email;

var sex=$scope.sex;

$http.post("/register",{"name":name,"pwd":pwd,"email":email,"sex":sex}).success(function(data){

$scope.register_info=data.info;

setTimeout(function(){

location.href="main.html";

},2000);

}).error(function(error){

console.log(error);

});

}

}

如上代码所示我们要提交数据首先是每一个输入项输入都是对的并且都不为空时才能提交，我们需要向后台传的数据有用户名，用户密码，用户的邮箱，及用户的性别。所以我们定义了四个变量来分别取四个输入框的值。

$http.post("/register",{"name":name,"pwd":pwd,"email":email,"sex":sex}).success(function(data)表示ajax发送的路径是“/register”,发送的数值我们写成了键值对的形式，因为我们需要传输数据到后台，所以我们一般都用post形式来发送。

前台ajax写好后需要用app连接路径到后台。我们后台的js写在了account.js里面的。在app里面就需要先连接这个js文件，如下：var account = require('./routes/account');在写的时候需要注意不要把文件的路径写错了。最后还要写配置路径，如下：app.post("/register",account.form_register);注意这里的方式要和前面ajax写的方式一致，因为我们之前写的是post方式，所以这里也要用post方式。我们在配置路径里面写了要连接的函数是form_register，那在account.js里面就需要暴露form_register函数。

代码如下：

var db = require("../commonjs/database");

exports.form_register=function(request,response){

var name=request.body.name;

var pwd=request.body.pwd;

var email=request.body.email;

var sex=request.body.sex;

var con = db.getCon();

var sql="insert into user(name,pass,email,sex) values (?,?,?,?)";

con.query(sql,[name,pwd,email,sex],function(error,data){

if(error){

console.log(error);

}else{

response.json({"info":"注册成功"});

}

});

con.end();

};

要暴露一个函数是在函数名前写exports.，如上所示，因为我们用的是post,所以取值的时候request后面加的是,如果用的是get方式加的是query，取值的时候body后面取的是前面ajax设的键值对的键的名字，也就是键值对冒号前面的名字。数据加入后台用的写的sql语句如下："insert into user(name,pass,email,sex) values (?,?,?,?)"，我们直接用？表示输入的数的时候就要注意下面[name,pwd,email,sex]里面的数据顺序不能弄错了，不然录入数据的时候有可能会出错。

运行该函数最后返回一个json对象，前台ajax执行成功的时候运行如下代码

$scope.register_info=data.info;

                    setTimeout(function(){

                        location.href="main.html";

                    },2000);

写了一个span来提示注册是否成功，注册成功的时候会有“注册成功”的提示，两秒后跳转main.html，效果如下：

如上图我们可以看见最后打印出来的用户列表的最后一个就是刚才注册的用户。

登录的输入框判断和注册的是一个原理，这里我就不一一叙述了。

登录ajax代码如下：

$scope.login=function(){

            var name=$scope.name;

            var pwd=$scope.pwd;

            if(!name || !pwd){

                $scope.login_info="请输入用户名和密码";

                $scope.isLogin=true;

            }

            else{

                console.log(name,pwd);

                $http.post("/login",{"name":name,"pwd":pwd}).success(function(data){

                    $scope.login_info=data.info;

                    if(data.info=="登录成功"){

                        $scope.isLogin=false;

                        setTimeout(function(){

                            location.href="main.html";

                        },2000);

                    }

                    else{

                        $scope.isLogin=true;

 

                    }

                }).error(function(error){

                    console.log(error);

                });

            }

        }

App路径配置：app.post("/login",account.form_login);

后台form_login函数代码如下：

exports.form_login=function(request,response){

    var name=request.body.name;

    var pwd=request.body.pwd;

    var con = db.getCon();

    var sql="select * from user where name=? and pass=?;";

    con.query(sql,[name,pwd],function(error,data){

        if(error){

            console.log(error);

        }else{

            if(data.length>=1){

                response.json({"info":"登录成功"});

            }else{

                response.json({"info":"用户名或密码错误"});

            }

        }

    });

    request.session.name=name;

    con.end();

};

要做登录就是输入用户名和密码我们在数据表里面查询用户名和密码都对应的，如果查出数据为空也就是长度为0的时候就返回json对象：response.json({"info":"用户名或密码错误"});

，如果查出有的话就返回response.json({"info":"登录成功"});

运行结果如下：

登录错的情况：

登录成功的情况：

如上可以看到刚才登录的用户名在列表页上显示。

我们做的时候后台account.js连接了database.js里面的分页函数。

下面是database.js的代码

/*** demo s使用mysql 模块链接 mysql 数据库*/
// 引用mysql 模块
var mysql = require('mysql');
var con;
function getConAPI(){
    return con = mysql.createConnection({
        host:'localhost',
        user:'root',
        password:'lovo',
        database:'test'
    });
}
//分页查询
function queryByPage(con,curpage,eachpage,sql,param,func){
    if(!curpage || curpage <= 0){
        curpage = 1;
    }
    if(!func){
        func = param;
        param = [];
    }
    con.query("select count(*) cnt from ("+sql+") t",param,function(e,r,f){
        //获取总数量
        var count = r[0].cnt;
        //获取总页码
        var maxpage = Math.ceil(count/eachpage);
        sql += " limit "+((curpage-1)*eachpage)+","+eachpage;
        var inner_con = getConAPI();
        inner_con.query(sql,param,function(e,r,f){
            var page = {"curpage":curpage,"maxpage":maxpage,"eachpage":eachpage,"count":count};
            func(e,r,f,page);

        });
        inner_con.end();
    });
}
exports.getCon = getConAPI;
exports.queryByPage = queryByPage;