基于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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
Node.js中sequelize时区的配置方法
Dec 10 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
JavaScript函数重载操作实例浅析
May 02 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php实现学生管理系统
2020/03/21 PHP
PDO::commit讲解
2019/01/27 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
js函数的延迟加载实现代码
2012/10/11 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python操作qml对象过程详解
2019/09/26 Python
pycharm运行scrapy过程图解
2019/11/22 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
会话Bean的种类
2013/11/07 面试题
优质的学校老师推荐信
2013/10/28 职场文书
商务助理岗位职责
2013/11/13 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
药品营销策划方案
2014/06/15 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
后勤个人工作总结
2015/02/28 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
vue判断按钮是否可以点击
2022/04/09 Vue.js