简单模仿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) {
            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中所显示的功能。