由于群中很多兄弟要求我給他們一個(gè)? 與后臺(tái)交互 的例子?
我就做一個(gè)? 很簡(jiǎn)單的用戶例子?
//這個(gè)是效果圖
失敗錯(cuò)誤用戶名和密碼

成功后 正確用戶名和密碼


實(shí)用后臺(tái)數(shù)據(jù)? Mysql?
/-----創(chuàng)建腳本? --------/
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);

/-------------------實(shí)體類--------------/
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 + "}";
}

}



/----------------------------數(shù)據(jù)庫(kù)訪問(wèn)類------/

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;

// 創(chuàng)建單例獲取連接
public static Connection get_conn() {
if (instrace == null) {
instrace = new ConnectionMySql();
}
return instrace._getConn();
}

// 返回?cái)?shù)據(jù)庫(kù)連接
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("獲取連接發(fā)生異常");
e.printStackTrace();
}
} catch (ClassNotFoundException e) {
System.out.println("加載驅(qū)動(dòng)發(fā)生異常");
e.printStackTrace();
}
return conn;
}

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

}
}

/--------------------后臺(tái)服務(wù)類--------------/

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;

/**
* 用戶服務(wù)類
*
* @author god
*
*/
public class UserService {
// 根據(jù)用戶密碼查詢用戶
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對(duì)象
pstm = conn.prepareStatement(sql);
pstm.setString(1, user.getName());
pstm.setString(2, user.getPassword());
rs = pstm.executeQuery();
// 如果讀到數(shù)據(jù) 則表示此用戶存在
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;
}

}
}


/----------------------后臺(tái)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("驗(yàn)證用戶登陸失敗");
e.printStackTrace();
}
PrintWriter out = resp.getWriter();
if (user != null) {
out.println("{success:true,msg:'ok'" + "}");
} else {
out.println("{success:true,msg:'用戶名或者密碼錯(cuò)誤'" + "}");
}
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>

/---------前臺(tái)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 : "請(qǐng)輸入用戶 ",
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() {
// 如果通過(guò)驗(yàn)證
if (myform.form.isValid()) {
// 自己做一個(gè) 進(jìn)度條
Ext.MessageBox.show({
// 等待標(biāo)題
title : "請(qǐng)等待正在登陸",
// 允許進(jìn)度條
progress : true,
// 設(shè)置寬度
width : 300

});
// 設(shè)置進(jìn)度條 次數(shù)
var f = function(v) {
// 返回進(jìn)度條 狀態(tài)
return function() {
// 到了11 隱藏
if (v == 12) {
Ext.MessageBox.hide();
} else {
var i = v / 11;
Ext.MessageBox.updateProgress(
i, Math.round(100 * i)
+ '%提交');
}
};
};
// 循環(huán)
for (var i = 0; i < 13; i++) {
// 定時(shí)器
setTimeout(f(i), i * 500);

}
myform.form.doAction('submit', {
// 提交路徑 我配置的一個(gè)Servlet
url : "login.do",
// 等待消息標(biāo)題
// waitTitle : "等待中",
// 提交方式 分為POST 和GET
method : "POST",
// 等待消息信息
// waitMsg : "正在提交請(qǐng)稍后......",
// 成功之后
success : function(form, action) {
// alert('aaa');
if (action.result.msg == 'ok') {
// 我要 進(jìn)入首頁(yè) 可是我沒(méi)有畫(huà) 自己搞定
Ext.Msg.alert("首頁(yè)提示", "哈哈進(jìn)來(lái)吧");
} else {
alert(action.result.msg);
}
}
// 失敗

});
}

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

});
/---------------------前臺(tái)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 文件自己去下載 ------/

extjs 登陸動(dòng)態(tài)