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