Fork me on GitHub

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

　　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 的首选样式表是 Twitter Bootstrap， Twitter 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>&nbsp;&nbsp;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 }

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

posted @ 2016-02-16 22:19  JackWang-CUMT  阅读(3675)  评论(1)  编辑  收藏  举报