基于AngularJS+HTML+Groovy实现登录功能


Posted in Javascript onFebruary 17, 2016

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" 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('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 = """
hello
there ${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.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('/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(, new JsonBuilder(u).toString())
} else {
halt(, '用户名密码不正确')
}
})
}
}

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

基于AngularJS+HTML+Groovy实现登录功能

以上内容是基于AngularJS+HTML+Groovy实现登录功能的相关知识,希望对大家有所帮助。

Javascript 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
JsDom 编程小结
Aug 09 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 #Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 #Javascript
Bootstrap中CSS的使用方法
Feb 17 #Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 #Javascript
基于javascript简单实现对身份证校验
Jan 25 #Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 #Javascript
Bootstrap布局组件应用实例讲解
Feb 17 #Javascript
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
ajax缓存问题解决途径
2006/12/06 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
MySQL修改密码方法总结
2008/03/25 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
激活 ActiveX 控件
2006/10/09 Javascript
在视频前插入广告
2006/11/20 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
详谈javascript异步编程
2016/02/21 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
element中的$confirm的使用
2020/04/26 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
python在控制台输出进度条的方法
2015/06/20 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
实例详解Python装饰器与闭包
2019/07/29 Python
在keras里实现自定义上采样层
2020/06/28 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
行政经理的岗位职责
2013/11/23 职场文书
军人违纪检讨书
2014/02/04 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Python实现科学占卜 让视频自动打码
2022/04/09 Python