你的位置:首页 > Java教程

[Java教程]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;Edit21    </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 User31 </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 Changes67 </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 hello4 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 post17       $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.html19     staticFileLocation("/static");20 21     get("/hello", { req, res -> "Hello World" });22     //app.js $http.post('/login', $scope.user)23     post('/login', { req, res ->24       //debug25       println(req.body())26 27       def user = jsonSlurper.parseText(req.body())28       //debug29       println(user)30 31       def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user)32 33       if (u) {34         //return35         halt(200, new JsonBuilder(u).toString())36       } else {37         halt(400, '用户名密码不正确')38       }39     })40   }41 }

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