首頁 >web前端 >js教程 >基於AngularJS+HTML+Groovy實作登入功能_AngularJS

基於AngularJS+HTML+Groovy實作登入功能_AngularJS

PHP中文网原創: 2016-05-16 15:15:221665瀏覽

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還可以定義過濾器，如下所示：

<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(&#39;myApp&#39;, []);
app.controller(&#39;personCtrl&#39;, function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>

AngularJS 有自己的HTML事件處理方式：

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/../css/bootstrap.min.css">
<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(&#39;new&#39;)">
<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>

另外AngularJS 的首選樣式表是Twitter Bootstrap， Twitter Bootstrap 是目前最受歡迎的前端框架。

以上程式碼都是參考 http://www.runoob.com/angularjs/ ，更多的資料可以參考 http://www .runoob.com/angularjs/

2 Groovy

name="James"
println "My name is ${name},&#39;00${6+1}&#39;" //prints My name is James,&#39;007&#39;

有人說，有java就有groovy，用groovy,我們可以使用grails框架，感覺用來開發web應用程式非常很方便。 Groovy的語句和Java類似，但有一些特別的地方。例如語句的分號是可選的。如果每行一個語句，就可以省略分號；如果一行上有多個語句，則需要用分號來分隔。 Groovy中的字串允許使用雙引號和單引號。當使用雙引號時，可以在字串內嵌入一些運算式，Groovy允許您使用與 bash 類似的 ${expression} 語法進行替換。可以在字串中包含任意的Groovy表達式

。

如果有一大塊文字,它需要類似Python 的三重引號(""")開頭，並以三重引號結尾。

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

3 登入實作

<!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>

AngularJS 指令是擴充的HTML 屬性，帶有前綴-app-app-app指令初始化一個AngularJS 應用程式。控件，

AngularJS 應用程式app（實際上是app.js來處理) 由ng-app 定義。是一個JavaScript 函數。綁定輸入域到控制器的屬性（ username 和password ）。 app 模組，對應html頁面的ng-app="app", 其中在$scope定義了user和info可以用於前台模型綁定，另外定義了一個login()方法供前台提交調用。的一個核心服務，用來讀取遠端伺服器的資料。直觀表示各組成部分之間的關係，用下面的一張圖來描述三者如何進行關聯：

/**
* app.js angular module define
*/
//ng-app="app"
angular.module(&#39;app&#39;, [])
//ng-controller="LoginController"
.controller(&#39;LoginController&#39;, function ($scope, $http) {
//user model define
//ng-model="user.username"
$scope.user = {}
$scope.info = &#39;欢迎登陆&#39;
//ng-submit="login()"
$scope.login = function () {
console.log($scope.user)
//Application.groovy post
$http.post(&#39;/login&#39;, $scope.user).then(function (res) {
console.log(res.data)
if (res.status == ) {
alert(&#39;登陆成功&#39;)
}
}, function (reason) {
//{{info}}
$scope.info = reason.data;
})
}
});

/**
* Application.groovy
*/
import groovy.json.JsonBuilder
import groovy.json.JsonSlurper
import groovy.sql.Sql
import 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.html
staticFileLocation("/static");
get("/hello", { req, res -> "Hello World" });
//app.js $http.post(&#39;/login&#39;, $scope.user)
post(&#39;/login&#39;, { req, res ->
//debug
println(req.body())
def user = jsonSlurper.parseText(req.body())
//debug
println(user)
def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user)
if (u) {
//return
halt(, new JsonBuilder(u).toString())
} else {
halt(, &#39;用户名密码不正确&#39;)
}
})
}
}

以上內容是基於AngularJS+HTML+Groovy實現登錄功能的相關知識，更多相關內容請關注PHP中文網（www.php.cn）！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：解析Node.js基於模組和套件的程式碼部署方式_node.js下一篇：解析Node.js基於模組和套件的程式碼部署方式_node.js

看更多

基於AngularJS+HTML+Groovy實作登入功能_AngularJS

相關文章