HTML+AngularJS+Groovy如何实现登录功能
来自： http://www.cnblogs.com/isaboy/p/HTML_AngularJS_Groovy.html
AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS核心特性有：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。AngularJS认为声明式的代码会比命令式的代码好，因此可以通过声明式的代码来处理很多复杂的操作。而Groovy 是用于Java虚拟机的一种敏捷的动态语言，它是一种成熟的面向对象编程语言，既可以用于面向对象编程，又可以用作纯粹的脚本语言。使用该种语言不必编写过多的代码，同时又具有闭包和动态语言中的其他特性。
1 AngularJS
AngularJS 除了内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTMl 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective , 但在使用它时需要以 - 分割, runoob-directive :
1 <body ng-app="myApp"> 2 3 <runoob-directive></runoob-directive> 4 5 <script> 6 var app = angular.module("myApp", []); 7 app.directive("runoobDirective", function() { 8 return { 9 template : "<h1>自定义指令!</h1>" 10 }; 11 }); 12 </script> 13 14 </body> AngularJS还可以定义过滤器，如下所示：
1 <div ng-app="myApp" ng-controller="costCtrl"> 2 3 <input type="number" ng-model="quantity"> 4 <input type="number" ng-model="price"> 5 6 <p>总价 = {{ (quantity * price) | currency }}</p> 7 8 </div> AngularJS 有自己的HTML事件处理方式：
1 <div ng-app="myApp" ng-controller="personCtrl"> 2 3 <button ng-click="toggle()">>隐藏/显示</button> 4 5 <p ng-hide="myVar"> 6 名: <input type="text" ng-model="firstName"><br> 7 姓名: <input type="text" ng-model="lastName"><br> 8 <br> 9 Full Name: {{firstName + " " + lastName}} 10 </p> 11 12 </div> 13 14 <script> 15 var app = angular.module('myApp', []); 16 app.controller('personCtrl', function($scope) { 17 $scope.firstName = "John", 18 $scope.lastName = "Doe" 19 $scope.myVar = false; 20 $scope.toggle = function() { 21 $scope.myVar = !$scope.myVar; 22 }; 23 }); 24 </script> 另外AngularJS 的首选样式表是 推ter Bootstrap， 推ter Bootstrap 是目前最受欢迎的前端框架。
1 <!DOCTYPE html> 2 <html> 3 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 4 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 5 <body ng-app="myApp" ng-controller="userCtrl"> 6 7 <div class="container"> 8 9 <h3>Users</h3> 10 11 <table class="table table-striped"> 12 <thead><tr> 13 <th>Edit</th> 14 <th>First Name</th> 15 <th>Last Name</th> 16 </tr></thead> 17 <tbody><tr ng-repeat="user in users"> 18 <td> 19 <button class="btn" ng-click="editUser(user.id)"> 20 <span class="glyphicon glyphicon-pencil"></span> Edit 21 </button> 22 </td> 23 <td>{{ user.fName }}</td> 24 <td>{{ user.lName }}</td> 25 </tr></tbody> 26 </table> 27 28 <hr> 29 <button class="btn btn-success" ng-click="editUser('new')"> 30 <span class="glyphicon glyphicon-user"></span> Create New User 31 </button> 32 <hr> 33 34 <h3 ng-show="edit">Create New User:</h3> 35 <h3 ng-hide="edit">Edit User:</h3> 36 37 <form class="form-horizontal"> 38 <div class="form-group"> 39 <label class="col-sm-2 control-label">First Name:</label> 40 <div class="col-sm-10"> 41 <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name"> 42 </div> 43 </div> 44 <div class="form-group"> 45 <label class="col-sm-2 control-label">Last Name:</label> 46 <div class="col-sm-10"> 47 <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name"> 48 </div> 49 </div> 50 <div class="form-group"> 51 <label class="col-sm-2 control-label">Password:</label> 52 <div class="col-sm-10"> 53 <input type="password" ng-model="passw1" placeholder="Password"> 54 </div> 55 </div> 56 <div class="form-group"> 57 <label class="col-sm-2 control-label">Repeat:</label> 58 <div class="col-sm-10"> 59 <input type="password" ng-model="passw2" placeholder="Repeat Password"> 60 </div> 61 </div> 62 </form> 63 64 <hr> 65 <button class="btn btn-success" ng-disabled="error || incomplete"> 66 <span class="glyphicon glyphicon-save"></span> Save Changes 67 </button> 68 </div> 69 70 <script src = "myUsers.js"></script> 71 </body> 72 </html> View Code 以上代码都是参看 http://www.runoob.com/angularjs/ ，更多的资料可以参看 http://www.runoob.com/angularjs/
2 Groovy
有人说，有java就有groovy，用groovy,我们可以使用grails框架，感觉用来开发web应用非常很方便。Groovy的语句和Java类似，但是有一些特殊的地方。例如语句的分号是可选的。如果每行一个语句，就可以省略分号；如果一行上有多个语句，则需要用分号来分隔。 Groovy中的字符串允许使用双引号和单引号。 当使用双引号时，可以在字符串内嵌入一些运算式，Groovy允许您使用 与 bash 类似的 ${expression} 语法进行替换。可以在字符串中包含任意的Groovy表达式。
name="James" println "My name is ${name},'00${6+1}'" //prints My name is James,'007' 如果有一大块文本,它需要类似 Python 的三重引号(""")开头，并以三重引号结尾。
1 name = "James" 2 text = """ 3 hello 4 there ${name} how are you today? 5 """ 3 登录实现
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng- 。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。下面的index.html定义了一个用户名和一个密码输入框控件，
AngularJS 应用程序 app（实际上是app.js来处理) 由 ng-app 定义。 ng-controller="LoginController" 属性是一个 AngularJS 指令。用于定义一个控制器。 LoginController 函数是一个 JavaScript 函数。AngularJS 使用 $scope 对象来调用控制器，用 $scope 用来保存AngularJS Model(模型)的对象。控制器在作用域中创建了两个属性 ( username 和 password )。 ng-model 指令绑定输入域到控制器的属性（ username 和 password ）。ng-submit="login()"绑定了后台login()方法。
1 <!DOCTYPE html> 2 <!--index.html --> 3 <html ng-app="app" lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <script src="angular.min.js"></script> 8 <script src="scripts/app.js"></script> 9 </head> 10 11 <body ng-controller="LoginController"> 12 13 <form ng-submit="login()"> 14 <h4>用户名:</h4> 15 <input ng-model="user.username"> 16 <h4>密码:</h4> 17 <input ng-model="user.password"> 18 <h5>{{info}}</h5> 19 20 <br> 21 <input type="submit" value="登陆"> 22 </form> 23 </body> 24 </html> app.js中定义了名为 app 模块，对应html页面的 ng-app="app", 其中在$scope定义了user和info可以用于前台模型绑定，另外定义了一个login()方法供前台提交调用。 $http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
1 /** 2 * app.js angular module define 3 */ 4 //ng-app="app" 5 angular.module('app', []) 6 //ng-controller="LoginController" 7 .controller('LoginController', function ($scope, $http) { 8 //user model define 9 //ng-model="user.username" 10 $scope.user = {} 11 $scope.info = '欢迎登陆' 12 13 //ng-submit="login()" 14 $scope.login = function () { 15 console.log($scope.user) 16 //Application.groovy post 17 $http.post('/login', $scope.user).then(function (res) { 18 19 console.log(res.data) 20 21 if (res.status == 200) { 22 alert('登陆成功') 23 } 24 25 }, function (reason) { 26 //{{info}} 27 $scope.info = reason.data; 28 }) 29 } 30 }); 下面用Groovy编写的登录后台处理逻辑：
1 /** 2 * Application.groovy 3 */ 4 import groovy.json.JsonBuilder 5 import groovy.json.JsonSlurper 6 import groovy.sql.Sql 7 8 import static spark.Spark.*; 9 10 class Application { 11 static JsonSlurper jsonSlurper = new JsonSlurper() 12 static Sql db = Sql.newInstance("jdbc:jtds:sqlserver://127.0.0.1:1433/lrtest;instance=sql2008", 13 "username", "password" 14 , "net.sourceforge.jtds.jdbc.Driver") 15 16 public static void main(String[] args) { 17 port(9090) 18 //default index.html 19 staticFileLocation("/static"); 20 21 get("/hello", { req, res -> "Hello World" }); 22 //app.js $http.post('/login', $scope.user) 23 post('/login', { req, res -> 24 //debug 25 println(req.body()) 26 27 def user = jsonSlurper.parseText(req.body()) 28 //debug 29 println(user) 30 31 def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user) 32 33 if (u) { 34 //return 35 halt(200, new JsonBuilder(u).toString()) 36 } else { 37 halt(400, '用户名密码不正确') 38 } 39 }) 40 } 41 } 为了更加直观表示各组成部分之间的关系，用下面的一张图来描述三者如何进行关联：
