歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

HTML+AngularJS+Groovy如何實現登錄功能

AngularJS是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS核心特性有：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等。AngularJS認為聲明式的代碼會比命令式的代碼好，因此可以通過聲明式的代碼來處理很多復雜的操作。而Groovy 是用於Java虛擬機的一種敏捷的動態語言，它是一種成熟的面向對象編程語言，既可以用於面向對象編程，又可以用作純粹的腳本語言。使用該種語言不必編寫過多的代碼，同時又具有閉包和動態語言中的其他特性。

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 : "<h1>自定義指令!</h1>"
    };
});
</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" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<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>&nbsp;&nbsp;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>

<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>

<form class="form-horizontal">
<div class="form-group">
  <label class="col-sm-2 control-label">First Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Last Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Password:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Repeat:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw2" 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>

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

<!DOCTYPE html>
<!--index.html -->
<html ng-app="app" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
    <script src="scripts/app.js"></script>
</head>

<body ng-controller="LoginController">

<form ng-submit="login()">
    <h4>用戶名:</h4>
    <input ng-model="user.username">
    <h4>密碼:</h4>
    <input  ng-model="user.password">
    <h5>{{info}}</h5>
   
    <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 == 200) {
                    alert('登陸成功')
                }

            }, function (reason) {
                //{{info}}
                $scope.info = reason.data;
            })
        }
});

下面用Groovy編寫的登錄後台處理邏輯：

/**
 * 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://127.0.0.1:1433/lrtest;instance=sql2008",
        "username", "password"
        , "net.sourceforge.jtds.jdbc.Driver")

    public static void main(String[] args) {
        port(9090)
        //default index.html
        staticFileLocation("/static");

        get("/hello", { req, res -> "Hello World" });
        //app.js $http.post('/login', $scope.user)
        post('/login', { 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(200, new JsonBuilder(u).toString())
            } else {
                halt(400, '用戶名密碼不正確')
            }
        })
    }
}

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

一些AngularJS相關文章鏈接：

AngularJS權威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡，並分享我的工作~帶你走近AngularJS系列：

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡

Linux編程

如何實現Linux操作系統的自動登錄功能

如何實現自動登錄Linux

samba如何實現加密口令登錄?

AngularJS圖片上傳功能的實現

AngularJS 實現輪播圖效果

struts2下如何實現偽靜態

Java實現一個登錄窗體功能

Android2.2.3 實現多點縮放功能

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved