Laksanakan fungsi log masuk berdasarkan AngularJS+HTML+Groovy

AngularJS ialah rangka kerja MVC bahagian hadapan untuk membangunkan aplikasi RWD responsif berasaskan penyemak imbas Ia merupakan projek sumber terbuka yang asalnya dibangunkan oleh Google telah menarik sejumlah besar peminat dan sesuai untuk membina perniagaan jenis CRUD aplikasi. Ia tidak sesuai untuk pembangunan Aplikasi seperti permainan menggunakan pengaturcaraan deklaratif untuk antara muka pengguna dan pengaturcaraan penting untuk logik, menyokong pelayar moden dan Internet Explorer versi 8.0 dan ke atas.

AngularJS ialah rangka kerja javascript MVC sisi klien, dan MVC sisi klien mewakili seni bina masa hadapan (mengapa menggunakan seni bina MVC+REST+CQRS
), jika anda mempunyai Struts atau SpringMVC, dsb. . Dengan pengalaman dalam pengaturcaraan rangka kerja MVC akhir, saya akan mempelajari Angular dengan cepat ia dilaksanakan mengikut idea MVC yang sama.

1 AngularJS

AngularJS Selain arahan terbina dalam, kami juga boleh mencipta arahan tersuai. Anda boleh menambah arahan tersuai menggunakan fungsi .directive. Untuk memanggil arahan tersuai, nama arahan tersuai perlu ditambahkan pada elemen HTMl. Gunakan kes unta untuk menamakan arahan, runoobDirective, tetapi anda perlu memisahkannya dengan - apabila menggunakannya, 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>

Salin selepas log masuk

AngularJS juga boleh mentakrifkan penapis, seperti berikut:

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

Salin selepas log masuk

AngularJS mempunyai kaedah pengendalian acara HTML sendiri:

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

Salin selepas log masuk

Selain itu, helaian gaya pilihan AngularJS ialah Twitter Bootstrap, yang pada masa ini merupakan rangka kerja bahagian hadapan yang paling popular.

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

Salin selepas log masuk

Kod di atas boleh didapati di http://www.runoob.com/angularjs/ Untuk maklumat lanjut, sila rujuk http: //www .runoob.com/angularjs/

2 Groovy

Ada orang kata kalau ada java, akan ada groovy. kita boleh menggunakan rangka kerja grails Sangat mudah untuk membangunkan aplikasi web. Kenyataan Groovy adalah serupa dengan Java, tetapi mempunyai beberapa ciri khas. Sebagai contoh, koma bertitik bagi pernyataan adalah pilihan. Jika terdapat satu pernyataan setiap baris, anda boleh meninggalkan koma bertitik jika terdapat berbilang pernyataan pada baris, ia perlu dipisahkan dengan koma bertitik. Rentetan dalam Groovy membenarkan petikan berganda dan tunggal. Apabila menggunakan petikan berganda, anda boleh membenamkan beberapa ungkapan dalam rentetan dan Groovy membenarkan anda menggunakan sintaks ${expression} serupa dengan bash untuk penggantian. Ungkapan Groovy arbitrari boleh disertakan dalam rentetan.

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

Salin selepas log masuk

Jika terdapat blok teks yang besar, ia perlu bermula dengan petikan tiga seperti Python (""") dan diakhiri dengan petikan tiga kali ganda.

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

Salin selepas log masuk

3 Pelaksanaan log masuk

Arahan AngularJS ialah atribut HTML lanjutan dengan awalan ng- app. Arahan ng-init memulakan data aplikasi Arahan model-ng mengikat nilai elemen (seperti nilai medan input) index.html berikut mentakrifkan nama pengguna dan kotak input kata laluan >

Aplikasi aplikasi AngularJS (sebenarnya dikendalikan oleh app.js) ditakrifkan oleh ng-app Atribut ng-controller="LoginController" ialah arahan AngularJS yang digunakan untuk mentakrifkan fungsi pengawal Ia adalah fungsi JavaScript objek $scope untuk menyimpan objek Model AngularJS Pengawal mencipta dua atribut (nama pengguna dan kata laluan) dalam skop. mengikat kaedah log masuk latar belakang() yang ditakrifkan dalam

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

Salin selepas log masuk

app.js Modul apl sepadan dengan ng-app="app" halaman HTML, di mana pengguna dan maklumat ditakrifkan dalam $scope dan boleh digunakan untuk pengikatan model hadapan Di samping itu, kaedah log masuk() ditakrifkan untuk panggilan penyerahan bahagian hadapan adalah dalam AngularJS Perkhidmatan teras untuk membaca data dari pelayan jauh

Logik pemprosesan latar belakang log masuk berikut ditulis dalam Groovy:

/**
* 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;
})
}
});

Salin selepas log masuk

/**
* 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;)
}
})
}
}

Salin selepas log masuk

Untuk menjadi lebih tepat untuk mewakili perhubungan antara pelbagai komponen secara visual, gunakan gambar berikut untuk menerangkan bagaimana ketiga-tiganya berkaitan:

Kandungan di atas adalah berdasarkan AngularJS+HTML+Groovy untuk melaksanakan log masuk Untuk pengetahuan yang berkaitan tentang fungsi, sila beri perhatian kepada bahasa Cina PHP laman web (www.php.cn) untuk kandungan yang lebih relevan!