基于AngularJS+HTML+Groovy实现登录功能
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入门教程之Cookies读写操作示例
本文实例讲述了AngularJS的Cookies读写操作.分享给大家供大家参考,具体如下: 虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js: <script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"><
-
Ionic+AngularJS实现登录和注册带验证功能
登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li
-
Angular.js与node.js项目里用cookie校验账户登录详解
前言 最近的新项目中,用户登录需要采用cookie来记住用户,校验身份.所以本文就把实现的过程总结出来分享给大家,需要的朋友们可以参考学习. 在header中携带authId登录 在之前老的项目里,没有采用cookie来记录用户登录状态,而是在请求的header中携带一个身份标识来校验,大致方案如下: 客户端使用post请求提交user.password给服务端进行登录操作: 服务端校验用户是否合法,如果合法将产生一个唯一的身份标识authId,返回给客户端,客户端将此authId存放本地(如l
-
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
本文实例讲述了AngularJS实现用户登录状态判断的方法.分享给大家供大家参考,具体如下: 使用AngularJS的单页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面. angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了 代码中的 $rootScope.user是登录后把用户信息放到了全局rootScope上
-
基于AngularJS+HTML+Groovy实现登录功能
AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架,由谷歌最初开发的 开源项目,干净的架构吸引了大量粉丝,适合建立CRUD类型的业务应用程序,并不适合开发游戏等应用, 使用声明性编程的用户界面和命令式编程的逻辑, 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上. AngularJS是一款客户端MVC的javascript框架,而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS 架构),如果你有Struts或SpringMVC
-
Android基于Sqlite实现注册和登录功能
Android中基于Sqlite实现注册和登录功能,供大家参考,具体内容如下 前言 写这篇博客主要是为了巩固一下学的Sqlite知识以及梳理一下这个项目的逻辑 实现逻辑 项目的图片结构图如下 代码 user class public class User { private String name; //用户名 private String password; //密码 public User(String name, String password) {
-
一个注解搞定Spring Security基于Oauth2的SSO单点登录功能
目录 一.说明 二.原理说明 2.1. 同域单点登录 2.2. 跨域单点登录 2.3. 基于Oauth2的跨域单点登录流程 三.Spring Security实现 四.demo下载地址 一.说明 单点登录顾名思义就是在多个应用系统中,只需要登录一次,就可以访问其他相互信任的应用系统,免除多次登录的烦恼.本文主要介绍 同域 和 跨域 两种不同场景单点登录的实现原理,并使用 Spring Security 来实现一个最简单的跨域 SSO客户端 . 二.原理说明 单点登录主流都是基于共享 cookie
-
如何基于Session实现短信登录功能
目录 一.基于Session实现登录 1.1 业务流程图 二.发送短信验证码 2.1 发送短信请求方式及参数说明 三.登录功能 3.1 短信验证的请求方式及路径 3.2 业务层代码实现用户登录 3.3 拦截器——登录验证功能 三.隐藏用户敏感信息 四.session共享问题 总结 一.基于Session实现登录 1.1 业务流程图 二.发送短信验证码 2.1 发送短信请求方式及参数说明 这个地方为什么需要session? 因为我们需要把验证码保存在session当中 /** * 发送手机验
-
基于AngularJS实现表单验证功能
本文实例为大家分享了AngularJS实现表单验证功能的具体代码,供大家参考,具体内容如下 <!--实例解析 ng-app 指令定义了 AngularJS 应用. ng-controller 指令定义了应用控制器. ng-model 指令绑定了两个 input 元素到模型的 user 对象. formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法. reset() 方法设置了 user 对象等于 master 对象. ng-click 指令调用了 reset()
-
基于Angularjs实现分页功能
前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件 在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要基于angular direct
-
基于Laravel5.4实现多字段登录功能方法示例
前言 最近在一个项目中需要实现一个多字段登录功能,简单来说就是可以使用用户名.邮箱或手机号任意一种方式进行登录.所以本文就来给大家介绍了关于Laravel5.4多字段登录的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧. 以下内容基于laravel5.4 方法如下: 首先,通过artisan工具生成auth模块 php artisan make:auth 这时候App\Http\Controllers目录下会新增一个Auth目录,该目录下为注册登录相关的控制器,resour
-
基于PHP实现用户注册登录功能
本文介绍的是基于PHP实现用户注册登录功能,本项目分为四部分内容:1前端页面制作,2验证码制作,3实现注册登陆,4功能完善.具体情况可以往下看. 验证码制作 一.实验简介 本次实验将会带领大家使用面向对象的思想封装一个验证码类.并在注册和登陆界面展示使用.通过本次实验的学习,你将会领悟到 PHP 的 OOP 思想,以及 GD 库的使用,验证码生成. 1.1 涉及到的知识点 PHP GD库 OOP编程 1.2 开发工具 sublime,一个方便快速的文本编辑器.点击桌面左下角: 应用程序菜单/开发
-
基于Ajax技术实现无刷新用户登录功能
代码如下: // JScript 文件 function usersLogon() { var userName = document.getElementById("txtuserName").value; var password = document.getElementById("txtpassword").value; var checkCode = document.getElementById("txtCheckCode").val
-
基于 Swoole 的微信扫码登录功能实现代码
随着微信的普及,扫码登录方式越来越被现在的应用所使用.它因为不用去记住密码,只要有微信号即可方便快捷登录.微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现.这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录.大体流程如下: 客户端打开登录界面,连接到 WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描展示的带参数二维码 微信服务器回调扫码事件并通知开发者服务