A logon instance implemented by struts2 combined with extjs

1. Set up struts2 first, and you can quickly build it using myeclipse.

2. Import the library files required by extjs.

3. Write an object class User

package com.ext.model;public class User {private Integer id;private String username;private String password;public Integer getId() {    return id;}public void setId(Integer id) {    this.id = id;}public String getUsername() {    return username;}public void setUsername(String username) {    this.username = username;}public String getPassword() {    return password;}public void setPassword(String password) {    this.password = password;}}

4. Write LoginAction

Package com. ext. action; import com. ext. model. user; import com. opensymphony. xwork2.ActionSupport; public class LoginAction extends ActionSupport {private boolean success; private String message; private User user; @ Override public String execute () throws Exception {// TODO Auto-generated method stub if (user. getUsername (). equals ("admin") & user. getPassword (). equals ("admin") {this. success = true; // this. message = "your account is:" + user. getUsername () + "Password:" + user. getPassword ();} else {this. success = false; this. message = "sorry, unauthorized users cannot log on to or change the system";} return SUCCESS;} public boolean isSuccess () {return success;} public void setSuccess (boolean success) {this. success = success;} public String getMessage () {return message;} public void setMessage (String message) {this. message = message;} public User getUser () {return user;} public void setUser (User user) {this. user = user ;}}

5. struts. xml is as follows:

6. login. jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
  Insert title here   
      <script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script>    <script type="text/javascript" src="ext3/ext-all.js"></script>    <script type="text/javascript" src="ext3/ext-lang-zh_CN.js"></script>    <script type="text/javascript" src="login.js"></script>
7. login. js

Ext. onReady (function () {Ext. quickTips. init (); Ext. form. field. prototype. msgTarget = "side"; var form1 = new Ext. formPanel ({labelWidth: 40, baseCls: 'x-plain ', defaults: {width: 180}, items: [{xtype: 'textfield', fieldLabel: "username ", id: "txtName", name: 'user. username', allowBlank: false, blankText: "The user name cannot be blank! "},{ Xtype: 'textfield', fieldLabel:" password ", allowBlank: false, blankText:" The password cannot be blank! ", Name: 'user. password ', inputType: 'Password'}], buttons: [{text: "submit", type: 'submit', handler: function () {if (form1.getForm (). isValid () {Ext. messageBox. show ({title: 'wait, msg: 'loading', progressText: '', width: 300, progress: true, closable: 'false', animEl: 'loding'}); var f = function (v) {return function () {var I = v/11; Ext. messageBox. updateProgress (I, '') ;}}for (var I = 1; I <33; I ++) {setTimeout (f (I), I * 1500);} // submit to the server for form1.form. doAction ('submit ', {url: 'login. action ', method: 'post', success: function (form, action) {document. location = "index. jsp "; Ext. msg. alert ("Logon successful! ", Action. result. message) ;}, failure: function (form, action) {Ext. Msg. alert (" Logon Failed! ", Action. result. message) ;}};}}, {text: "reset", handler: function () {form1.getForm (). reset () ;}}]}); var window = new Ext. window ({title: "Logon Window", layout: 'fit', width: 290, height: 250, plain: true, bodyStyle: 'padding: 10px ', maximizable: false, closeActon: 'close', closable: false, collapsible: true, buttonAlign: 'center', items: form1}); window. show ();});

8. The index page for Successful Logon will not be written.
Using extjs to jump between pages is a little troublesome. Pay attention to the red part.