基于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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
javascript动画算法实例分析
Jul 31 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
Javascript 之封装(Package)
Sep 14 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
PHP的简易冒泡法代码分享
2012/08/28 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
jquery复选框全选/取消示例
2013/12/30 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
基于JavaScript实现随机点名器
2021/02/25 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python列表与元组详解实例
2013/11/01 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
logging level级别介绍
2020/02/21 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
农业资源与环境专业自荐信范文
2013/12/30 职场文书
初中科学教学反思
2014/01/21 职场文书
理想演讲稿范文
2014/05/21 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript