简单模仿qq登录界面

PC端QQ的登录界面感觉挺不错的，简单的模仿了一下，实现了输入账号正确时显示出自己的头像，输入的账号错误的时候显示默认图片。以下是效果展示：



之前使用数据库一直没有涉及到图片的存取，这次便用到了相关的知识。

数据库表的创建：

create table login2(
id int auto_increment primary key,
account varchar(50) unique not null,
pwd text,
isRemember int ,
isAuto int ,
image blob);

实体类：（省略getter setter方法）

public class LoginInfos {
private String account;// 账号
private String pwd;// 密码
private byte[] img;// 图片的字节数组
private int isRemenber;// 记住密码
private int isAuto;// 自动登录
}

mysql中用blob来存储图片和音频等大容量的二进制文件，按容量可以将blob分为4种：tinyblob，blob，mediumblob，longblob。他们的大小分别为：256B，64KB，16MB，4GB，用法都是一样的。

首先将图片存入数据库中：

/**
* 将文件转换成字节数组
*
* @param file
*            文件路径
*/
private byte[] getBytesFromFile(File file) {
// TODO Auto-generated method stub
byte[] ret = null;
if (file == null) {
return null;
}
try {
FileInputStream fis = new FileInputStream(file);
ByteArrayOutputStream baos = new ByteArrayOutputStream(4096);
byte[] bs = new byte[4096];
int n = -1;
while (-1 != (n = fis.read(bs))) {
baos.write(bs, 0, n);
}
baos.close();
fis.close();
ret = baos.toByteArray();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return ret;
}

先将文件转换成字节数组，类 ByteArrayOutputStream 实现了一个输出流，其中的数据被写入一个 byte 数组。缓冲区会随着数据的不断写入而自动增长。可使用 toByteArray() 和 toString() 获取数据。（参考api）

//注册  将信息存入数据库中
registerBtn.addActionListener(new ActionListener() {

@Override
public void actionPerformed(ActionEvent e) {
// TODO Auto-generated method stub
String password = new String(pwdEdit.getPassword());
String compare = new String(compareEdit.getPassword());
if (accountEdit.getText().equals("") || password.equals("") || compare.equals("")) {
JOptionPane.showMessageDialog(frame, "输入不能为空");
} else if (!password.equals(compare)) {
JOptionPane.showMessageDialog(frame, "两次密码输入不一致");
} else {
LoginInfos login = new LoginInfos();
login.setAccount(accountEdit.getText().trim());
login.setPwd(password);
login.setImg(getBytesFromFile(file));
int result = service.insert(login);
if (result > 0) {
JOptionPane.showMessageDialog(frame, "注册成功");
frame.dispose();
} else {
JOptionPane.showMessageDialog(frame, "注册失败");
}
}
}

});

将得到的图片文件先转成byte数组再插入数据库中。

从数据库中取出图片：

@Override
public List<LoginInfos> queryAll() throws SQLException {
List<Object> list = JdbcTemplate.executeQuery(QUERY_ALL_SQL, new IObjectMapper() {

@Override
public Object getObject(ResultSet rs) throws SQLException {
LoginInfos login = new LoginInfos();
login.setAccount(rs.getString("account"));
login.setPwd(rs.getString("pwd"));
login.setIsRemenber(rs.getInt("isRemember"));
login.setIsAuto(rs.getInt("isAuto"));
// 从数据库中取出图片 存放在字节数组中
Blob blob = rs.getBlob("image");
byte[] bs = blob.getBytes(1, (int) blob.length());
login.setImg(bs);
return login;
}
});
List<LoginInfos> listLogin = new ArrayList<>();
for (Object obj : list) {
listLogin.add((LoginInfos) obj);
}
return listLogin;
}

LoginInfos login = service.query(accountEdit.getText().trim());
if (login != null) {
ab7e
ImageIcon imageIcon = new ImageIcon(login.getImg());
portraitLabel.setIcon(imageIcon);
} else {
portraitLabel.setIcon(new ImageIcon("image" + File.separator + "avatar_def.png"));
}

从数据库中取出图片，取出的先放入字节数组，再将该字节数组转成图片格式显示出来。

按照现在自己所掌握的知识来实现头像的自动转换功能，我的做法是用线程。

private void startThread() {
new Thread() {
@Override
public void run() {
// 判断账号是否记住密码和自动登录
List<LoginInfos> list = service.queryAll();
for (LoginInfos lo : list) {
if (lo.getIsRemenber() == 1) {
accountEdit.setText((lo.getAccount()));
pwdEdit.setText(lo.getPwd());
ImageIcon imageIcon = new ImageIcon(lo.getImg());
portraitLabel.setIcon(imageIcon);
rememberPwd.setSelected(true);
}
if (lo.getIsAuto() == 1) {
try {
Thread.sleep(800);
autoLogin.setSelected(true);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
JOptionPane.showMessageDialog(frame, "登录成功");
return;
}
}
// 实现头像的自动转换
while (true) {
try {
Thread.sleep(100);
LoginInfos login = service.query(accountEdit.getText().trim());
if (login != null) {
ImageIcon imageIcon = new ImageIcon(login.getImg());
portraitLabel.setIcon(imageIcon);
} else {
portraitLabel.setIcon(new ImageIcon("image" + File.separator + "avatar_def.png"));
}
} catch (InterruptedException e) {
e.printStackTrace();
}

}

}
}.start();
}

前一部分是简单的实现了自动登录的功能，循环里面的做法是每隔100毫秒按照输入的账号查询信息，查询不到则显示默认的头像，账号输入正确时便显示账号对应的头像。这样便简单的实现了gif中所显示的功能。