HTML+AngularJS+Groovy如何实现登录功能

niwn1182 8年前

来自: 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(模型)的对象。控制器在作用域中创建了两个属性 ( usernamepassword )。 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 }

为了更加直观表示各组成部分之间的关系,用下面的一张图来描述三者如何进行关联:

</div>