Home > Developer > JavaScript
Logons are implemented based on AngularJS + HTML + Groovy, and angularjsgroovy
AngularJS is a browser-based front-end MVC Framework for developing browser-based responsive RWD applications. It is an open-source project initially developed by Google, and its Clean architecture attracts a large number of fans, it is suitable for building CRUD-type business applications and is not suitable for developing games and other applications. It uses Declarative Programming user interfaces and imperative programming logic, supports modern desktop and mobile browsers, Internet Explorer version 8.0 and later.
AngularJS is a javascript framework of client MVC, and client MVC represents the future architecture (why use MVC + REST + CQRS)
Architecture). If you have backend MVC Framework programming experience such as Struts or SpringMVC, you will learn Angular quickly and basically implement it according to the same MVC idea.
1 AngularJS
In addition to built-in commands, AngularJS can also create custom commands. You can use the. directive function to add custom commands. To call a custom command, you must add a custom command name to the HTMl element. Use the hump method to name an instruction runoobDirective, but use it to separate it with-, runoob-directive:
<Body ng-app = "myApp"> <runoob-directive> </runoob-directive> <script> var app = angular. module ("myApp", []); app. directive ("runoobDirective", function () {return {template: "
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> total price = {(quantity * price) | currency }}</p> </div>
AngularJS has its own HTML event processing method:
<Div ng-app = "myApp" ng-controller = "personCtrl"> <button ng-click = "toggle () ">> hide/show </button> <p ng-hide =" myVar "> Name: <input type = "text" ng-model = "firstName"> <br> Name: <input type = "text" ng-model = "lastName"> <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>
In addition, AngularJS's preferred style sheet is Twitter Bootstrap, and Twitter Bootstrap is currently the most popular front-end framework.
<!DOCTYPE html>
The above code is to see the http://www.runoob.com/angularjs/, more information can refer to the http://www.runoob.com/angularjs/
2 Groovy
Some people say that there is groovy in java. With groovy, we can use the grails framework, which is very convenient for developing web applications. Groovy statements are similar to Java statements, but there are some special points. For example, the semicolon of a statement is optional. If each line has one statement, the semicolon can be omitted. If multiple statements exist in one row, they must be separated by semicolons. Double quotation marks and single quotation marks are allowed for strings in Groovy. When double quotation marks are used, some operators can be embedded in the string. Groovy allows you to replace them with the $ {expression} syntax similar to bash. You can include any Groovy expression in a string.
name="James"println "My name is ${name},'00${6+1}'" //prints My name is James,'007'
If there is a large piece of text, it needs to start with a triple quotation mark (") similar to Python and end with a triple quotation mark.
name = "James"text = """hellothere ${name} how are you today?"""
3 login implementation
AngularJS commands are extended HTML attributes with the prefix ng -. The ng-app command initializes an AngularJS application. The ng-init command initializes application data. The ng-model command binds the element value (for example, the value of the input field) to the application. The following index.html defines a user name and a password input box control,
AngularJS app (actually handled by app. js) is defined by ng-app. The ng-controller = "LoginController" attribute is an AngularJS command. Defines a controller. The LoginController function is a JavaScript function. AngularJS uses the $ scope object to call the controller and $ scope to save the AngularJS Model object. The Controller creates two attributes (username and password) in the scope ). The ng-model command binds the attributes (username and password) of the input domain to the Controller ). Ng-submit = "login ()" is bound to the background login () method.
<! DOCTYPE html> <! --Index.html -->
App. js defines the app module, which corresponds to ng-app = "app" on the html page. In $ scope, the user and info are defined to be used for foreground model binding, in addition, a login () method is defined for the frontend to submit and call. $ Http is a core service in AngularJS and is used to read data from remote servers.
/*** 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 = 'Welcome to logs' // 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 ('login successfully') }}, function (reason) {// {info }}$ scope.info = reason. data ;})}});
The login background processing logic written in Groovy is as follows:
/*** Application. groovy */import groovy. json. jsonBuilderimport groovy. json. jsonSlurperimport groovy. SQL. sqlimport 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 I Ndex.html staticFileLocation ("/static"); get ("/hello", {req, res-> "Hello World"}); // app. js $ http. post ('/login', $ scope. user) post ('/login', {req, res-> // debuuplintln (req. body () def user = jsonSlurper. parseText (req. body () // debuuplintln (user) def u = db. firstRow ("select * from test_user WHERE username = ?. Username and password = ?. Password ", user) if (u) {// returnhalt (, new JsonBuilder (u ). toString ()} else {halt (, 'incorrect username and password ')}})}}
To more intuitively express the relationship between components, use the following figure to describe how the three are associated:
The above content is based on AngularJS + HTML + Groovy to implement the logon function, I hope to help you.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
