Home Web Front-end JS Tutorial Implement login function based on AngularJS+HTML+Groovy_AngularJS

Implement login function based on AngularJS+HTML+Groovy_AngularJS

May 16, 2016 pm 03:15 PM

AngularJS is a front-end MVC framework for developing browser-based responsive RWD applications. It is an open source project originally developed by Google. Its clean architecture has attracted a large number of fans and is suitable for building CRUD-type business applications. It is not suitable for development. Applications such as games use declarative programming for user interfaces and imperative programming for logic, supporting modern desktop and mobile browsers Internet Explorer versions 8.0 and above.

AngularJS is a client-side MVC javascript framework, and client-side MVC represents the future architecture (why use MVC+REST+CQRS
architecture), if you have Struts or SpringMVC, etc. With experience in end-end MVC framework programming, I will learn Angular quickly. It is basically implemented according to the same MVC idea.

1 AngularJS

AngularJS In addition to the built-in directives, we can also create custom directives. You can add custom directives using the .directive function. To call a custom directive, the custom directive name needs to be added to the HTMl element. Use camel case to name a directive, runoobDirective, but you need to split it with - when using it, 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>
Copy after login

AngularJS can also define filters, as follows:

<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>
Copy after login

AngularJS has its own HTML event handling method:

<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(&#39;myApp&#39;, []);
app.controller(&#39;personCtrl&#39;, function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>
Copy after login

In addition, AngularJS’s preferred style sheet is Twitter Bootstrap, which is currently the most popular front-end framework.

<!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(&#39;new&#39;)">
<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>
Copy after login


The above code can be found at http://www.runoob.com/angularjs/. For more information, please refer to http://www .runoob.com/angularjs/

2 Groovy

Some people say that if there is java, there will be groovy. With groovy, we can use the grails framework. It is very convenient to develop web applications. Groovy's statements are similar to Java, but have some special features. For example, the semicolon of a statement is optional. If there is one statement per line, you can omit the semicolon; if there are multiple statements on a line, they need to be separated by semicolons. Strings in Groovy allow both double and single quotes. When using double quotes, you can embed some expressions within the string, and Groovy allows you to use the ${expression} syntax similar to bash for substitution. Arbitrary Groovy expressions can be included in the string.

name="James"
println "My name is ${name},&#39;00${6+1}&#39;" //prints My name is James,&#39;007&#39;
Copy after login

If there is a large block of text, it needs to start with a Python-like triple quote (""") and end with a triple quote.


name = "James"
text = """
hello
there ${name} how are you today?
"""
Copy after login

3 Login implementation

AngularJS directives are extended HTML attributes with the prefix ng-app. The ng-init directive initializes application data. The ng-model directive binds element values ​​(such as input field values) to the application. The following index.html defines a username and a password input box. Control,

AngularJS application app (actually handled by app.js) is defined by ng-app. The ng-controller="LoginController" attribute is an AngularJS directive used to define a controller function. It is a JavaScript function. AngularJS uses the $scope object to save the AngularJS Model object. The controller creates two attributes (username and password) in the scope. Bind the input fields to the properties of the controller ( username and password ). ng-submit="login()" binds the background login() method defined in

<!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>
Copy after login

app.js. The app module corresponds to the ng-app="app" of the HTML page, in which user and info are defined in $scope and can be used for front-end model binding. In addition, a login() method is defined for front-end submission calls. $http is in AngularJS. A core service for reading data from remote servers.

/**
* app.js angular module define
*/
//ng-app="app"
angular.module(&#39;app&#39;, [])
//ng-controller="LoginController"
.controller(&#39;LoginController&#39;, function ($scope, $http) {
//user model define
//ng-model="user.username"
$scope.user = {}
$scope.info = &#39;欢迎登陆&#39;
//ng-submit="login()"
$scope.login = function () {
console.log($scope.user)
//Application.groovy post
$http.post(&#39;/login&#39;, $scope.user).then(function (res) {
console.log(res.data)
if (res.status == ) {
alert(&#39;登陆成功&#39;)
}
}, function (reason) {
//{{info}}
$scope.info = reason.data;
})
}
});
Copy after login

The following login background processing logic is written in 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(&#39;/login&#39;, $scope.user)
post(&#39;/login&#39;, { 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(, &#39;用户名密码不正确&#39;)
}
})
}
}
Copy after login

In order to be more precise. To visually represent the relationship between the various components, use the following picture to describe how the three are related:

Implement login function based on AngularJS+HTML+Groovy_AngularJS

The above content is based on AngularJS+HTML+Groovy to implement login For relevant knowledge about functions, please pay attention to the PHP Chinese website (www.php.cn) for more relevant content!


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PHP Development Guide: Implementing Verification Code Login PHP Development Guide: Implementing Verification Code Login Jul 01, 2023 am 09:27 AM

With the development of the Internet and the popularity of smartphones, the verification code login function is adopted by more and more websites and applications. Verification code login is a login method that verifies the user's identity by entering the correct verification code to improve security and prevent malicious attacks. In PHP development, implementing a simple verification code login function is not complicated and can be completed through the following steps. Create a database table First, we need to create a table in the database to store verification code information. The table structure can contain the following fields: id: auto-incrementing primary key phon

Steps to implement login function using CakePHP framework Steps to implement login function using CakePHP framework Jul 28, 2023 am 11:36 AM

Steps to implement login function using CakePHP framework With the development of the Internet, the login function of web applications has become one of the necessary functions for almost all websites and applications. CakePHP is a popular PHP development framework that provides many convenient functions and tools to simplify the development process, including implementing login functions. This article will introduce the steps to implement the login function using the CakePHP framework and provide relevant code examples. Install and set up the CakePHP framework First, we need to set up the CakePHP framework in our local environment

Node.js development: How to implement user registration and login functions Node.js development: How to implement user registration and login functions Nov 08, 2023 pm 12:27 PM

Node.js development: How to implement user registration and login functions, specific code examples are required Introduction: In the process of web application development, user registration and login functions are an essential part. This article will introduce in detail how to use Node.js to implement user registration and login functions, and provide specific code examples. 1. Implementation of user registration function Create database First, we need to create a database to store user registration information. Databases such as MongoDB and MySQL can be used to store user information. create

How to use PHP to implement WeChat applet login function How to use PHP to implement WeChat applet login function Jun 27, 2023 am 11:40 AM

WeChat is currently one of the instant messaging software with the largest number of users in the world, and WeChat mini programs occupy a significant market share among mobile applications. How to implement the login and authentication functions of WeChat mini programs is a skill that many developers are concerned about and need to master. In this article, we will use PHP as the back-end language to explain how to use the API and SDK officially provided by WeChat to implement the login function of the WeChat applet. 1. WeChat Mini Program Login Process Before introducing how to use PHP to implement the WeChat Mini Program login function, we first need to understand

How to use PHP to develop user registration and login functions How to use PHP to develop user registration and login functions Sep 21, 2023 pm 04:55 PM

How to use PHP for user registration and login function development In today's Internet era, user registration and login are essential functions for any website or application. PHP, as a powerful server-side scripting language, is widely used in website development. This article will introduce how to use PHP to develop user registration and login functions, and provide specific code examples. Create a database First, we need to create a database to store user information. It can be operated using relational database management systems such as MySQL. The following is a brief

How to use PHP to develop the login function of WeChat applet? How to use PHP to develop the login function of WeChat applet? Oct 26, 2023 am 09:09 AM

How to use PHP to develop the login function of WeChat applet? WeChat mini programs have become one of the platforms chosen by more and more enterprises and developers. In order to allow users to use personal information in mini programs or perform some operations that require user authentication, developers need to implement a login function. This article will introduce how to use PHP to develop the login function of WeChat applet and provide specific code examples. First, we need to understand the WeChat applet login process. Usually, the mini program login function is implemented based on the login interface provided by the WeChat open platform. Developer

Use PHP to implement WeChat applet login function Use PHP to implement WeChat applet login function May 13, 2023 am 11:21 AM

With the continuous development of the mobile Internet, WeChat mini programs have become an important channel for more and more enterprises and individuals to conduct business and services. The login function of the mini program is one of the key links in the development of the mini program. This article will introduce how to use PHP to implement the login function of WeChat applet. Apply for a WeChat open platform account. Before starting to develop WeChat mini programs, we need to apply for a WeChat open platform account and create our own mini program. The application process is relatively simple. For details, please refer to WeChat official documents. Get the AppID and App of the mini program

OAuth in PHP: Integrating third-party login functionality OAuth in PHP: Integrating third-party login functionality Jul 28, 2023 pm 11:27 PM

OAuth in PHP: Integrating third-party login functions With the rapid development of social media, more and more websites and applications provide third-party login functions, such as logging in using the user's Facebook, Google or WeChat account. This method is convenient for users and also improves the conversion rate of user registration and login. In PHP, we can implement this function through the OAuth protocol. In this article, we will explore how to leverage OAuth in PHP to integrate third-party login functionality. OAuth

See all articles