extjs 登陆动态

由于群中很多兄弟要求我给他们一个  与后台交互 的例子 
我就做一个  很简单的用户例子 
//这个是效果图
失败错误用户名和密码

成功后 正确用户名和密码


实用后台数据  Mysql 
/-----创建脚本  --------/
use test;

DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `id` int(11) NOT NULL auto_increment,
  `loginName` varchar(50) NOT NULL,
  `loginPassword` varchar(50) NOT NULL,
  `name` varchar(100) default NULL,
  `sex` int(11) default NULL,
  `address` varchar(100) default NULL,
  `email` varchar(30) default NULL,
  `phone` varchar(30) default NULL,
  `isFlag` int(11) default NULL,
  PRIMARY KEY  (`id`),
  KEY `fk_t_user` (`roleId`)
) ENGINE=InnoDB DEFAULT CHARSET=gbk;

INSERT INTO `t_user` VALUES (1,'admin','123456','张三 ',1,'上海 ','www.xiaohewoai@163.com','7551713',0);
INSERT INTO `t_user` VALUES (2,'xiaohezhang','123456','小张 ',1,'北京 ','www.xiaohewoai@163.com','7551713',1);

/-------------------实体类--------------/
package com.mylogin.entity;

import java.util.Date;

public class User {
private int id;
private String name;
private String password;
private Date brithday;

public Date getBrithday() {
return brithday;
}

public void setBrithday(Date brithday) {
this.brithday = brithday;
}

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

private int sex;

public int getSex() {
return sex;
}

public void setSex(int sex) {
this.sex = sex;
}

public String toString() {
return "{id:" + id + "name" + name + "password" + password + "}";
}

}



/----------------------------数据库访问类------/

package com.base;

import java.sql.Connection;
import java.sql.Driver;
import java.sql.DriverManager;
import java.sql.SQLException;

import org.junit.Test;

public class ConnectionMySql {
private static ConnectionMySql instrace;

// 创建单例获取连接
public static Connection get_conn() {
if (instrace == null) {
instrace = new ConnectionMySql();
}
return instrace._getConn();
}

// 返回数据库连接
public Connection _getConn() {
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver");
try {
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/test", "root", "root");
} catch (SQLException e) {
System.out.println("获取连接发生异常");
e.printStackTrace();
}
} catch (ClassNotFoundException e) {
System.out.println("加载驱动发生异常");
e.printStackTrace();
}
return conn;
}

@Test
public void testConnection() {
System.out.println(this.get_conn());

}
}

/--------------------后台服务类--------------/

package com.mylogin.service;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import org.junit.Test;
import com.base.ConnectionMySql;
import com.mylogin.entity.User;

/**
* 用户服务类
*
* @author god
*
*/
public class UserService {
// 根据用户密码查询用户
public User getUser(User user) throws SQLException {
String sql = "select * from t_user where loginName=? and loginPassword=?";
PreparedStatement pstm = null;
ResultSet rs = null;
Connection conn = null;
User u = null;
// 获取连接
conn = ConnectionMySql.get_conn();
// 得到preparedStatment对象
pstm = conn.prepareStatement(sql);
pstm.setString(1, user.getName());
pstm.setString(2, user.getPassword());
rs = pstm.executeQuery();
// 如果读到数据 则表示此用户存在
if (rs.next()) {
u = new User();
u.setId(rs.getInt("id"));
u.setName(rs.getString("loginName"));
u.setPassword(rs.getString("loginPassword"));
u.setSex(rs.getInt("sex"));
rs.close();
pstm.close();
conn.close();
return u;
} else {
return u;
}

}
}


/----------------------后台Servlet-----------/

package com.mylogin.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mylogin.entity.User;
import com.mylogin.service.UserService;

public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
req.setCharacterEncoding("UTF-8");
String pwd = req.getParameter("password");
String name = req.getParameter("name");
User u = new User();
u.setName(name);
u.setPassword(pwd);
UserService us = new UserService();
User user = null;
try {
user = us.getUser(u);
} catch (SQLException e) {
System.out.println("验证用户登陆失败");
e.printStackTrace();
}
PrintWriter out = resp.getWriter();
if (user != null) {
out.println("{success:true,msg:'ok'" + "}");
} else {
out.println("{success:true,msg:'用户名或者密码错误'" + "}");
}
out.flush();
out.close();
}

protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}

}
/------------------web.xml 配置-----------/
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>myextlogin</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<!-- 配置用户登陆servlet -->
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>com.mylogin.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login.do</url-pattern>
</servlet-mapping>
</web-app>

/---------前台JS---------------/

Ext.onReady(function() {
// alert("ok");
var myform = new Ext.form.FormPanel({
// absolute
baseCls : 'x-plain',
layout : "form",
id : "myform",
// title : "人员信息",
frame : true,
defaultType : 'textfield',

defaults : {
width : 200
},
items : [{
fieldLabel : "用户名",
name : "name",
emptyText : "请输入用户 ",
allowBlank : false,
selectFocus : true

}, {
fieldLabel : "密码",
allowBlank : false,
name : "password",
inputType : "password"
}]

});

var win = new Ext.Window({
title : "<center>用户登陆</center>",
width : 500,
height : 400,
items : [myform],
closeAction : "hide",
buttonAlign : "center",
buttons : [{
text : "提交",
type : "submit",
handler : function() {
// 如果通过验证
if (myform.form.isValid()) {
// 自己做一个 进度条
Ext.MessageBox.show({
// 等待标题
title : "请等待正在登陆",
// 允许进度条
progress : true,
// 设置宽度
width : 300

});
// 设置进度条 次数
var f = function(v) {
// 返回进度条 状态
return function() {
// 到了11 隐藏
if (v == 12) {
Ext.MessageBox.hide();
} else {
var i = v / 11;
Ext.MessageBox.updateProgress(
i, Math.round(100 * i)
+ '%提交');
}
};
};
// 循环
for (var i = 0; i < 13; i++) {
// 定时器
setTimeout(f(i), i * 500);

}
myform.form.doAction('submit', {
// 提交路径 我配置的一个Servlet
url : "login.do",
// 等待消息标题
// waitTitle : "等待中",
// 提交方式 分为POST 和GET
method : "POST",
// 等待消息信息
// waitMsg : "正在提交请稍后......",
// 成功之后
success : function(form, action) {
// alert('aaa');
if (action.result.msg == 'ok') {
// 我要 进入首页 可是我没有画 自己搞定
Ext.Msg.alert("首页提示", "哈哈进来吧");
} else {
alert(action.result.msg);
}
}
// 失败

});
}

}
}, {
text : "重置",
handler : function() {
var one = Ext.getCmp('myform');
one.getForm().reset();
}
}]
});
win.show();

});
/---------------------前台HTML------------------/

<!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="js/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="mycss/tree.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/adapter/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="gridPanel/forums.js"></script>
</head>
<body>
</body>
</html>


//-------------------本人不提供   EXTJS 文件自己去下载 ------/