HTML+AngularJS+Groovy如何实现登录功能(2)

  有人说,有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 的三重引号(""")开头,并以三重引号结尾。


1 name = "James"
2 text = """
3 hello
4 there ${name} how are you today?
5 """

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-8">
    <title>Title</title>
    <script src="https://www.linuxidc.com/angular.min.js"></script>
    <script src="https://www.linuxidc.com/scripts/app.js"></script>
</head>

<body ng-controller="LoginController">

<form ng-submit="login()">
    <h4>用户名:</h4>
    <input ng-model="user.username">
    <h4>密码:</h4>
    <input  ng-model="user.password">
    <h5>{{info}}</h5>
   
    <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 == 200) {
                    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://127.0.0.1:1433/lrtest;instance=sql2008",
        "username", "password"
        , "net.sourceforge.jtds.jdbc.Driver")

public static void main(String[] args) {
        port(9090)
        //default index.html
        staticFileLocation("/static");

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/c1f64d429a7d1d18528a9180ceea7ad5.html