基于AngularJS+HTML+Groovy實(shí)現(xiàn)登錄功能

更新時(shí)間：2016年02月17日 09:46:38 作者：JackWang-CUMT

AngularJS是一款客戶端MVC的javascript框架，而客戶端MVC代表未來(lái)架構(gòu)(為什么要使用MVC+REST+CQRS架構(gòu))，如果你有Struts或SpringMVC等后端MVC框架編程經(jīng)驗(yàn)，學(xué)習(xí)Angular會(huì)很快，基本是按照同一個(gè)MVC思路實(shí)現(xiàn)的，本文給大家介紹AngularJS+HTML+Groovy實(shí)現(xiàn)登錄功能

AngularJS是開(kāi)發(fā)基于瀏覽器的響應(yīng)式RWD應(yīng)用程序的一個(gè)前端MVC框架，由谷歌最初開(kāi)發(fā)的開(kāi)源項(xiàng)目，干凈的架構(gòu)吸引了大量粉絲，適合建立CRUD類型的業(yè)務(wù)應(yīng)用程序，并不適合開(kāi)發(fā)游戲等應(yīng)用，使用聲明性編程的用戶界面和命令式編程的邏輯，支持現(xiàn)代桌面和移動(dòng)瀏覽器 Internet Explorer版本8.0及以上。

AngularJS是一款客戶端MVC的javascript框架，而客戶端MVC代表未來(lái)架構(gòu)(為什么要使用MVC+REST+CQRS
架構(gòu))，如果你有Struts或SpringMVC等后端MVC框架編程經(jīng)驗(yàn)，學(xué)習(xí)Angular會(huì)很快，基本是按照同一個(gè)MVC思路實(shí)現(xiàn)的。

1 AngularJS

AngularJS 除了內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。你可以使用 .directive 函數(shù)來(lái)添加自定義的指令。要調(diào)用自定義指令，HTMl 元素上需要添加自定義指令名。使用駝峰法來(lái)命名一個(gè)指令， runoobDirective , 但在使用它時(shí)需要以 - 分割, runoob-directive :

<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h>自定義指令!</h>"
};
});
</script>
</body>

AngularJS還可以定義過(guò)濾器，如下所示：

<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>總價(jià) = {{ (quantity * price) | currency }}</p>
</div>

AngularJS 有自己的HTML事件處理方式：

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">>隱藏/顯示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>

另外AngularJS 的首選樣式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受歡迎的前端框架。

<!DOCTYPE html>
<html>
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/angular.js/../angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<h>Users</h>
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h ng-show="edit">Create New User:</h>
<h ng-hide="edit">Edit User:</h>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm- control-label">First Name:</label>
<div class="col-sm-">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div> 
<div class="form-group">
<label class="col-sm- control-label">Last Name:</label>
<div class="col-sm-">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm- control-label">Password:</label>
<div class="col-sm-">
<input type="password" ng-model="passw" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm- control-label">Repeat:</label>
<div class="col-sm-">
<input type="password" ng-model="passw" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>
<script src = "myUsers.js"></script>
</body>
</html>

以上代碼都是參看 http://www.runoob.com/angularjs/ ，更多的資料可以參看 http://www.runoob.com/angularjs/

2 Groovy

有人說(shuō)，有java就有g(shù)roovy，用groovy,我們可以使用grails框架，感覺(jué)用來(lái)開(kāi)發(fā)web應(yīng)用非常很方便。Groovy的語(yǔ)句和Java類似，但是有一些特殊的地方。例如語(yǔ)句的分號(hào)是可選的。如果每行一個(gè)語(yǔ)句，就可以省略分號(hào)；如果一行上有多個(gè)語(yǔ)句，則需要用分號(hào)來(lái)分隔。 Groovy中的字符串允許使用雙引號(hào)和單引號(hào)。當(dāng)使用雙引號(hào)時(shí)，可以在字符串內(nèi)嵌入一些運(yùn)算式，Groovy允許您使用與 bash 類似的 ${expression} 語(yǔ)法進(jìn)行替換?？梢栽谧址邪我獾腉roovy表達(dá)式。

name="James"
println "My name is ${name},'00${6+1}'" //prints My name is James,'007'

如果有一大塊文本,它需要類似 Python 的三重引號(hào)(""")開(kāi)頭，并以三重引號(hào)結(jié)尾。

name = "James"
text = """
hello
there ${name} how are you today?
"""

3 登錄實(shí)現(xiàn)

AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng- 。 ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。 ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。 ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。下面的index.html定義了一個(gè)用戶名和一個(gè)密碼輸入框控件，

AngularJS 應(yīng)用程序 app（實(shí)際上是app.js來(lái)處理) 由 ng-app 定義。 ng-controller="LoginController" 屬性是一個(gè) AngularJS 指令。用于定義一個(gè)控制器。 LoginController 函數(shù)是一個(gè) JavaScript 函數(shù)。AngularJS 使用 $scope 對(duì)象來(lái)調(diào)用控制器，用 $scope 用來(lái)保存AngularJS Model(模型)的對(duì)象?？刂破髟谧饔糜蛑袆?chuàng)建了兩個(gè)屬性 ( username 和 password )。 ng-model 指令綁定輸入域到控制器的屬性（ username 和 password ）。ng-submit="login()"綁定了后臺(tái)login()方法。

<!DOCTYPE html>
<!--index.html -->
<html ng-app="app" lang="en">
<head>
<meta charset="UTF-">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body ng-controller="LoginController">
<form ng-submit="login()">
<h>用戶名:</h>
<input ng-model="user.username">
<h>密碼:</h>
<input ng-model="user.password">
<h>{{info}}</h>
<br>
<input type="submit" value="登陸">
</form>
</body>
</html>

app.js中定義了名為 app 模塊，對(duì)應(yīng)html頁(yè)面的 ng-app="app", 其中在$scope定義了user和info可以用于前臺(tái)模型綁定，另外定義了一個(gè)login()方法供前臺(tái)提交調(diào)用。 $http 是 AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)。

/**
* app.js angular module define
*/
//ng-app="app"
angular.module('app', [])
//ng-controller="LoginController"
.controller('LoginController', function ($scope, $http) {
//user model define
//ng-model="user.username"
$scope.user = {}
$scope.info = '歡迎登陸'
//ng-submit="login()"
$scope.login = function () {
console.log($scope.user)
//Application.groovy post
$http.post('/login', $scope.user).then(function (res) {
console.log(res.data)
if (res.status == ) {
alert('登陸成功')
}
}, function (reason) {
//{{info}}
$scope.info = reason.data;
})
}
});

下面用Groovy編寫的登錄后臺(tái)處理邏輯：

/**
* Application.groovy
*/
import groovy.json.JsonBuilder
import groovy.json.JsonSlurper
import groovy.sql.Sql
import static spark.Spark.*;
class Application {
static JsonSlurper jsonSlurper = new JsonSlurper()
static Sql db = Sql.newInstance("jdbc:jtds:sqlserver://...:/lrtest;instance=sql", 
"username", "password"
, "net.sourceforge.jtds.jdbc.Driver")
public static void main(String[] args) {
port()
//default index.html
staticFileLocation("/static");
get("/hello", { req, res -> "Hello World" });
//app.js $http.post('/login', $scope.user)
post('/login', { req, res ->
//debug
println(req.body())
def user = jsonSlurper.parseText(req.body())
//debug
println(user)
def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user)
if (u) {
//return
halt(, new JsonBuilder(u).toString())
} else {
halt(, '用戶名密碼不正確')
}
})
}
}

為了更加直觀表示各組成部分之間的關(guān)系，用下面的一張圖來(lái)描述三者如何進(jìn)行關(guān)聯(lián)：