基于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 相关文章推荐
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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计算税后工资的方法
2015/07/28 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python实现五子棋小程序
2019/06/18 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
基于Python绘制个人足迹地图
2020/06/01 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
大学毕业感言200字
2014/03/09 职场文书
关于环保的活动方案
2014/08/25 职场文书
教师节感谢信
2015/01/22 职场文书
体检通知范文
2015/04/21 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Python实现信息管理系统
2022/06/05 Python