struts2 结合extjs实现的一个登录实例
一、先搭建好struts2，可以通过myeclipse快速搭建。
二、再导入extjs所需的库文件。
三、写一个实体类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; } }四、写LoginActionpackage 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="你的账号是："+user.getUsername()+"密码是："+user.getPassword(); }else{ this.success=false; this.message="对不起，未授权的用户不能登录改系统"; } 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; } }五、struts.xml如下所示：<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> <struts> <package name="extjs" extends="json-default" namespace="/"> <action name="Login" class="com.ext.action.LoginAction"> <result type="json"></result> </action> </package> </struts>六、login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="ext3/resources/css/ext-all.css"/> <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> </head> <body> </body> </html>七、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:"用户名", id:"txtName", name:'user.username', allowBlank:false, blankText:"用户名不能为空!" },{ xtype:'textfield', fieldLabel:"密码", allowBlank:false, blankText:"密码不能为空!", name:'user.password', inputType:'password' }], buttons:[{ text:"提交", type:'submit', handler:function(){ if(form1.getForm().isValid()) { Ext.MessageBox.show({ title:'请等待', msg:'正在加载', 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); } //提交到服务器操作 form1.form.doAction('submit',{ url:'Login.action', method:'post', success:function(form,action){ document.location="index.jsp"; Ext.Msg.alert("登录成功！",action.result.message); }, failure:function(form,action){ Ext.Msg.alert("登录失败！",action.result.message); } }); } }}, { text:"重置", handler:function() { form1.getForm().reset(); } }] }); var window = new Ext.Window({ title :"登录窗口", 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(); });
八、登录成功的index页面就不写了。
用extjs实现页面间的跳转开始学有点麻烦，注意红色部分。
转自：http://www.cnblogs.com/kunpengit/archive/2012/04/05/2433279.html
本文由用户 fmms 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！