我們上一篇主要講了登錄注冊問題里面注冊的各個輸入框格式的判斷以及各項的正則表達式。前台的各項輸入都規定好按要求輸入以后我們需要將這些數據存入后台數據庫，這里我們就需要用到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;