基于AngularJS+HTML+Groovy實現登錄功能

2019-11-20 10:35:06

字體：大中小

來源：轉載

供稿：網友

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

AngularJS是一款客戶端MVC的javascript框架，而客戶端MVC代表未來架構(為什么要使用MVC+REST+CQRS
架構)，如果你有Struts或SpringMVC等后端MVC框架編程經驗，學習Angular會很快，基本是按照同一個MVC思路實現的。

1 AngularJS

AngularJS 除了內置的指令外，我們還可以創建自定義指令。你可以使用 .directive 函數來添加自定義的指令。要調用自定義指令，HTMl 元素上需要添加自定義指令名。使用駝峰法來命名一個指令， runoobDirective , 但在使用它時需要以 - 分割, 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還可以定義過濾器，如下所示：

<div ng-app="myApp" ng-controller="costCtrl"><input type="number" ng-model="quantity"><input type="number" ng-model="price"><p>總價 = {{ (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

有人說，有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 的三重引號(""")開頭，并以三重引號結尾。

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

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()方法。

<!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 模塊，對應html頁面的 ng-app="app", 其中在$scope定義了user和info可以用于前臺模型綁定，另外定義了一個login()方法供前臺提交調用。 $http 是 AngularJS 中的一個核心服務，用于讀取遠程服務器的數據。

/*** 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編寫的登錄后臺處理邏輯：

/*** Application.groovy*/import groovy.json.JsonBuilderimport groovy.json.JsonSlurperimport groovy.sql.Sqlimport 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.htmlstaticFileLocation("/static");get("/hello", { req, res -> "Hello World" });//app.js $http.post('/login', $scope.user)post('/login', { req, res ->//debugprintln(req.body())def user = jsonSlurper.parseText(req.body())//debugprintln(user)def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user)if (u) {//returnhalt(, new JsonBuilder(u).toString())} else {halt(, '用戶名密碼不正確')}})}}

為了更加直觀表示各組成部分之間的關系，用下面的一張圖來描述三者如何進行關聯：