Java：QQ登录页面的制作（实现成功登录的代码）——含源码

---

图形页面（为实现登录、退出功能）：

---

package First;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

/* ----------------------------------------------- 4、编写程序入口 -------------------------------------------------- */


//QQ登录入口
public class _b3_QQ页面的实现 {
		public static void main(String[] args) {
			//使用SwingUtilities工具类调用createAndShowGUI()方法并显示GUI程序
			SwingUtilities.invokeLater(QQLogin :: initLogin);
		}
}


/* ----------------------------------------------- 1、创建QQ登陆窗口，并添加布局管理器 -------------------------------------------------- */




//创建一个QQ页面登陆类，在该类中创建一个initLogin()方法来初始化QQ登陆页面，并为窗口添加布局管理器进行区域划分
class QQLogin {
	//1、为QQ登录页面整体初始化一个JFrame窗口
	private static JFrame jf = new JFrame();
	//QQ登陆初始化方法
	public static void initLogin() {
		jf.setBounds(497, 242, 426, 300);//设置大小和位置
		jf.setUndecorated(true);//设置JFrame窗口不显示边框
		jf.setResizable(false);//禁止改变窗口大小
		
	
	//2、根据QQ页面登录页面效果进行布局分配
		BorderLayout border_layout = new BorderLayout();
		jf.setLayout(border_layout);
		//2.1创建并加入顶部面板
		JPanel panel_north = CreatePanel.CreateNorthPanel(jf);
		jf.add(panel_north, BorderLayout.PAGE_START);
		//2.1创建并加入中部面板
		JPanel panel_center = CreatePanel.CreateCenterPanel(jf);
		jf.add(panel_center, BorderLayout.CENTER);
		//2.1创建并加入左侧面板
		JPanel panel_west = CreatePanel.CreateWestPanel(jf);
		jf.add(panel_west, BorderLayout.LINE_START);
		//2.1创建并加入底部面板
		JPanel panel_south = CreatePanel.CreateSouthPanel(jf);
		jf.add(panel_south, BorderLayout.PAGE_END);
		//2.1创建并加入右侧面板
		JPanel panel_east = CreatePanel.CreateEastPanel(jf);
		jf.add(panel_east, BorderLayout.LINE_END);
		
		jf.setVisible(true);//设置窗口可见
	}
}








/* ----------------------------------------------- 2、创建区域面板类，划分容器区域 -------------------------------------------------- */








class CreatePanel{
	//顶部面板区域
	public static JPanel CreateNorthPanel(JFrame jf) {
		//1、创建一个JPanel 顶部面板
		JPanel panel = new JPanel();
		//取消面板内默认的布局
		panel.setLayout(null);
		//设置顶部面板尺寸
		panel.setPreferredSize(new Dimension(0, 140));
		//1.1、向顶部面板添加背景图片
		ImageIcon image = new ImageIcon("images/back.jpg");
		JLabel background = new JLabel(image);
		//设置背景图片的位置以及尺寸
		background.setBounds(0, 0, 426, image.getIconHeight());
		panel.add(background);
		//1.2、在顶部JPanel面板右上角添加一个退出按钮
		JButton out = new JButton(new ImageIcon("images/close_normal.jpg"));
		out.setBounds(403, 0, 26, 26);
		//设置鼠标移动到退出按钮时更改图片
		out.setRolloverIcon(new ImageIcon("images/close.hover.jpg"));
		//取消按钮边框效果
		out.setBorderPainted(false);
		panel.add(out);
		
		return panel;
	}
	
	//左侧面板区域
	public static JPanel CreateWestPanel(JFrame jf) {
			//2、创建一个JPanel 左侧面板
			JPanel panel = new JPanel();
			//取消面板内默认的布局
			panel.setLayout(null);
			//设置顶部面板尺寸
			panel.setPreferredSize(new Dimension(130, 0));
			//2.1 向顶部面板添加背景图片
			ImageIcon image = new ImageIcon("images/qq.jpg");
			JLabel background = new JLabel(image);
			//设置背景图片的位置以及尺寸
			background.setBounds(0, 0, 120, 110);
			panel.add(background);
			
			return panel;
			}
	
	//中部面板区域
		public static JPanel CreateCenterPanel(JFrame jf) {
				//3、创建一个JPanel 左侧面板
				JPanel panel = new JPanel();
				//取消面板内默认的布局
				panel.setLayout(null);
				//3.1、创建一个JcomboBox下拉框组件，并初始化QQ账号
				String str [] = {"123456789","987654321","1314520888"};
				JComboBox<Object> jcoCenter = new JComboBox<Object>(str);
				panel.add(jcoCenter);
				//设置下拉框可以编辑
				jcoCenter.setEditable(true);
				jcoCenter.setBounds(0, 15, 175, 30);
				//设置下拉框内容字体
				jcoCenter.setFont(new Font("Calibri",0,13));
				//3.2、创建一个JPasswordField密码框组件
				JPasswordField jpaCenter  = new JPasswordField();
				//设置密码框面板为流式布局
				jpaCenter.setLayout(new FlowLayout(FlowLayout.RIGHT,0,0));
				jpaCenter.setBounds(0, 44, 175, 30);
				jpaCenter.setPreferredSize(new Dimension(185,25));
				panel.add(jpaCenter);
				//3.3、 创建ImageIcon小键盘图标组件，并加入到密码框组件中
				ImageIcon image = new ImageIcon("images/keyboard.jpg");
				JButton jbu = new JButton(image);
				jbu.setPreferredSize(new Dimension(22,20));
				jbu.setBorderPainted(false);
				jpaCenter.add(jbu);
				//3.4、创建两个JCheckBox多选框组件
				JCheckBox jch1 = new JCheckBox("记住密码");
				//设置选中时不显示边框
				jch1.setFocusPainted(false);
				jch1.setFont(new Font("宋体", 0, 13));
				jch1.setBounds(0, 85, 80, 20);
				panel.add(jch1);
				JCheckBox jch2 = new JCheckBox("自动登录");
				//设置选中时不显示边框
				jch2.setFocusPainted(false);
				jch2.setFont(new Font("宋体", 0, 12));
				jch2.setBounds(100, 85, 80, 20);
				panel.add(jch2);				
				
				return panel;
				}
		
		
		//右侧面板区域
		public static JPanel CreateEastPanel(JFrame jf) {
				//4、创建一个JPanel 右侧面板
				JPanel panel = new JPanel();
				//取消面板内默认的布局
				panel.setLayout(null);
				//设置顶部面板尺寸
				panel.setPreferredSize(new Dimension(100, 0));
				//创建两个 JLable 标签组件
				JLabel regeist = new JLabel("注册账号");
				regeist.setForeground(new Color(100, 149, 238));
				regeist.setBounds(0, 13, 60, 30);
				regeist.setFont(new Font("宋体", 0, 12));
				//5、创建一个JPanel右侧面板------------------------------------------------???????????????????
				JLabel regetpwd = new JLabel("找回密码");
				regetpwd.setForeground(new Color(100, 149, 238));
				regetpwd.setBounds(0, 43, 60, 30);
				regetpwd.setFont(new Font("宋体", 0, 12));
				panel.add(regeist);
				panel.add(regetpwd);
				
				return panel;
				}
		
		
		//底部面板区域
				public static JPanel CreateSouthPanel(JFrame jf) {
						//6、创建一个JPanel 底部面板
						JPanel panel = new JPanel();
						//取消面板内默认的布局
						panel.setLayout(null);
						//设置顶部面板尺寸
						panel.setPreferredSize(new Dimension(0,51));
						//6.1、创建左下角多人登录图标组件
						JButton jble = new JButton(new ImageIcon("images/single_normal.jpg"));
						jble.setPreferredSize(new Dimension(40,40));
						jble.setFocusable(false);
						jble.setRolloverIcon(new ImageIcon("images/single_down.jpg"));
						jble.setBorderPainted(false);
						//设置不显示按钮区域
						jble.setContentAreaFilled(false);
						jble.setBounds(0, 10, 40, 40);
						jble.setToolTipText("多账号登录");
						//6.2、创建底部中间登录图标组件
						ImageIcon image = new ImageIcon("images/login_normal.jpg");
						JButton jb = new JButton("登录",image);
						jb.setFont(new Font("宋体",0,13));
						jb.setBounds(130, 0, 175, 40);
						//将文字放在图片中间
						jb.setHorizontalTextPosition(SwingConstants.CENTER);
						jb.setFocusPainted(false);
						jb.setContentAreaFilled(false);
						jb.setBorderPainted(false);
						jb.setRolloverIcon(new ImageIcon("images/login_hover.jpg"));
						//创建右下角二维码登录图标组件
						JButton jbri = new JButton(new ImageIcon("images/right_normal.jpg"));
						jbri.setBounds(380, 10, 40, 40);
						jbri.setFocusPainted(false);
						jbri.setBorderPainted(false);
						jbri.setContentAreaFilled(false);
						jbri.setRolloverIcon(new ImageIcon("images/right_hover.jpg"));
						jbri.setToolTipText("二维码登录");
						//将底部3个组件添加到底部JPanel面板中
						panel.add(jble);
						panel.add(jb);
						panel.add(jbri);
						
						return panel;
						}
}






/* ----------------------------------------------- 2、创建并注册监听器 -------------------------------------------------- */





class LoginListener implements ActionListener{
	
	private JComboBox<Object> jco ;//用来获取QQ账号的对象
	private JPasswordField jpa ;//用来获取QQ密码的对象
	private JFrame jf;
	
	//构造方法
	public LoginListener(JComboBox<Object> jco, JPasswordField jpa, JFrame jf) {
		// TODO Auto-generated constructor stub
		super();
		this.jco=jco;
		this.jpa=jpa;
		this.jf=jf;
	}

	@Override
	//为登录动作监听事件执行处理
	public void actionPerformed(ActionEvent e) {
		// TODO Auto-generated method stub
		//1、获取登录的账号和密码
		String name = (String) jco.getSelectedItem();
		String pwd = new String(jpa.getPassword());
		//2、判断输入的账号和密码是否正确
		if(name.equals("123456789") && pwd.equals("123")) {
			//账号正确，先关闭当前JFrame登录窗口
			jf.dispose();
			//模拟显示登录成功后的QQ窗口
			JFrame jfn = new JFrame();
			jfn.setSize(289, 687);
			jfn.setLocation(800, 100);
			jfn.setUndecorated(true);
			jfn.setResizable(true);
			jfn.setVisible(true);
			//为QQ显示窗口添加背景图片和退出按钮组件
			JPanel panel = new JPanel();
			panel.setLayout(null);
			panel.setPreferredSize(new Dimension(0,140));
			ImageIcon image = new ImageIcon("images/qqSuccess.jpg");
			JLabel background = new JLabel(image);
			background.setBounds(0, 0, 289, 687);
			panel.add(background);
			//添加退出按钮
			JButton out  = new JButton(new ImageIcon("images/close2_normal.jpg"));
			out.setBounds(265, 0, 26, 26);
			out.setRolloverIcon(new ImageIcon("images/close2_hover.jpg"));
			out.setBorderPainted(false);
			panel.add(out);
			jfn.add(panel);
			//为退出按钮注册监听器，关闭当前窗口
			out.addActionListener(event -> jf.dispose());
		}
		else
			//QQ账号或者密码错误时，弹出提示信息
			JOptionPane.showMessageDialog(null, "你输入的账户名或者密码不正确，请重新输入！");
	}
	
}

---

实现登录功能的图形页面：

---

package First;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

/* ----------------------------------------------- 4、编写程序入口 -------------------------------------------------- */


//QQ登录入口
public class _b3_QQ页面的实现以及成功登录 {
		public static void main(String[] args) {
			//使用SwingUtilities工具类调用createAndShowGUI()方法并显示GUI程序
			SwingUtilities.invokeLater(QQLogin2 :: initLogin);
		}
}


/* ----------------------------------------------- 1、创建QQ登陆窗口，并添加布局管理器 -------------------------------------------------- */




//创建一个QQ页面登陆类，在该类中创建一个initLogin()方法来初始化QQ登陆页面，并为窗口添加布局管理器进行区域划分
class QQLogin2 {
	//1、为QQ登录页面整体初始化一个JFrame窗口
	private static JFrame jf = new JFrame();
	//QQ登陆初始化方法
	public static void initLogin() {
		jf.setBounds(497, 242, 426, 300);//设置大小和位置
		jf.setUndecorated(true);//设置JFrame窗口不显示边框
		jf.setResizable(false);//禁止改变窗口大小
		
	
	//2、根据QQ页面登录页面效果进行布局分配
		BorderLayout border_layout = new BorderLayout();
		jf.setLayout(border_layout);
		//2.1创建并加入顶部面板
		JPanel panel_north = CreatePanel2.CreateNorthPanel(jf);
		jf.add(panel_north, BorderLayout.PAGE_START);
		//2.1创建并加入中部面板
		JPanel panel_center = CreatePanel2.CreateCenterPanel(jf);
		jf.add(panel_center, BorderLayout.CENTER);
		//2.1创建并加入左侧面板
		JPanel panel_west = CreatePanel2.CreateWestPanel(jf);
		jf.add(panel_west, BorderLayout.LINE_START);
		//2.1创建并加入底部面板
		JPanel panel_south = CreatePanel2.CreateSouthPanel(jf);
		jf.add(panel_south, BorderLayout.PAGE_END);
		//2.1创建并加入右侧面板
		JPanel panel_east = CreatePanel2.CreateEastPanel(jf);
		jf.add(panel_east, BorderLayout.LINE_END);
		
		jf.setVisible(true);//设置窗口可见
	}
}








/* ----------------------------------------------- 2、创建区域面板类，划分容器区域 -------------------------------------------------- */








class CreatePanel2{
	
	private static LoginListener ll ;
	
	//顶部面板区域
	public static JPanel CreateNorthPanel(JFrame jf) {
		//1、创建一个JPanel 顶部面板
		JPanel panel = new JPanel();
		//取消面板内默认的布局
		panel.setLayout(null);
		//设置顶部面板尺寸
		panel.setPreferredSize(new Dimension(0, 140));
		//1.1、向顶部面板添加背景图片
		ImageIcon image = new ImageIcon("images/back.jpg");
		JLabel background = new JLabel(image);
		//设置背景图片的位置以及尺寸
		background.setBounds(0, 0, 426, image.getIconHeight());
		panel.add(background);
		//1.2、在顶部JPanel面板右上角添加一个退出按钮
		JButton out = new JButton(new ImageIcon("images/close_normal.jpg"));
		out.setBounds(403, 0, 26, 26);
		//设置鼠标移动到退出按钮时更改图片
		out.setRolloverIcon(new ImageIcon("images/close.hover.jpg"));
		//取消按钮边框效果
		out.setBorderPainted(false);
		panel.add(out);
		
		//为 退出  按钮注册监听器，用来关闭窗口
		out.addActionListener(event -> jf.dispose());
		
		return panel;
	}
	
	//左侧面板区域
	public static JPanel CreateWestPanel(JFrame jf) {
			//2、创建一个JPanel 左侧面板
			JPanel panel = new JPanel();
			//取消面板内默认的布局
			panel.setLayout(null);
			//设置顶部面板尺寸
			panel.setPreferredSize(new Dimension(130, 0));
			//2.1 向顶部面板添加背景图片
			ImageIcon image = new ImageIcon("images/qq.jpg");
			JLabel background = new JLabel(image);
			//设置背景图片的位置以及尺寸
			background.setBounds(0, 0, 120, 110);
			panel.add(background);
			
			return panel;
			}
	
	//中部面板区域
		public static JPanel CreateCenterPanel(JFrame jf) {
				//3、创建一个JPanel 左侧面板
				JPanel panel = new JPanel();
				//取消面板内默认的布局
				panel.setLayout(null);
				//3.1、创建一个JcomboBox下拉框组件，并初始化QQ账号
				String str [] = {"123456789","987654321","1314520888"};
				JComboBox<Object> jcoCenter = new JComboBox<Object>(str);
				panel.add(jcoCenter);
				//设置下拉框可以编辑
				jcoCenter.setEditable(true);
				jcoCenter.setBounds(0, 15, 175, 30);
				//设置下拉框内容字体
				jcoCenter.setFont(new Font("Calibri",0,13));
				//3.2、创建一个JPasswordField密码框组件
				JPasswordField jpaCenter  = new JPasswordField();
				//设置密码框面板为流式布局
				jpaCenter.setLayout(new FlowLayout(FlowLayout.RIGHT,0,0));
				jpaCenter.setBounds(0, 44, 175, 30);
				jpaCenter.setPreferredSize(new Dimension(185,25));
				panel.add(jpaCenter);
				//3.3、 创建ImageIcon小键盘图标组件，并加入到密码框组件中
				ImageIcon image = new ImageIcon("images/keyboard.jpg");
				JButton jbu = new JButton(image);
				jbu.setPreferredSize(new Dimension(22,20));
				jbu.setBorderPainted(false);
				jpaCenter.add(jbu);
				//3.4、创建两个JCheckBox多选框组件
				JCheckBox jch1 = new JCheckBox("记住密码");
				//设置选中时不显示边框
				jch1.setFocusPainted(false);
				jch1.setFont(new Font("宋体", 0, 13));
				jch1.setBounds(0, 85, 80, 20);
				panel.add(jch1);
				JCheckBox jch2 = new JCheckBox("自动登录");
				//设置选中时不显示边框
				jch2.setFocusPainted(false);
				jch2.setFont(new Font("宋体", 0, 12));
				jch2.setBounds(100, 85, 80, 20);
				panel.add(jch2);
				
				//添加对LoginListener监听器类进行封装
				//初始化登录监听器，封装账号和密码
				ll = new LoginListener(jcoCenter, jpaCenter, jf);
				
				return panel;
				}
		
		
		//右侧面板区域
		public static JPanel CreateEastPanel(JFrame jf) {
				//4、创建一个JPanel 右侧面板
				JPanel panel = new JPanel();
				//取消面板内默认的布局
				panel.setLayout(null);
				//设置顶部面板尺寸
				panel.setPreferredSize(new Dimension(100, 0));
				//创建两个 JLable 标签组件
				JLabel regeist = new JLabel("注册账号");
				regeist.setForeground(new Color(100, 149, 238));
				regeist.setBounds(0, 13, 60, 30);
				regeist.setFont(new Font("宋体", 0, 12));
				//5、创建一个JPanel右侧面板------------------------------------------------???????????????????
				JLabel regetpwd = new JLabel("找回密码");
				regetpwd.setForeground(new Color(100, 149, 238));
				regetpwd.setBounds(0, 43, 60, 30);
				regetpwd.setFont(new Font("宋体", 0, 12));
				panel.add(regeist);
				panel.add(regetpwd);
				
				return panel;
				}
		
		
		//底部面板区域
				public static JPanel CreateSouthPanel(JFrame jf) {
						//6、创建一个JPanel 底部面板
						JPanel panel = new JPanel();
						//取消面板内默认的布局
						panel.setLayout(null);
						//设置顶部面板尺寸
						panel.setPreferredSize(new Dimension(0,51));
						//6.1、创建左下角多人登录图标组件
						JButton jble = new JButton(new ImageIcon("images/single_normal.jpg"));
						jble.setPreferredSize(new Dimension(40,40));
						jble.setFocusable(false);
						jble.setRolloverIcon(new ImageIcon("images/single_down.jpg"));
						jble.setBorderPainted(false);
						//设置不显示按钮区域
						jble.setContentAreaFilled(false);
						jble.setBounds(0, 10, 40, 40);
						jble.setToolTipText("多账号登录");
						//6.2、创建底部中间登录图标组件
						ImageIcon image = new ImageIcon("images/login_normal.jpg");
						JButton jb = new JButton("登录",image);
						jb.setFont(new Font("宋体",0,13));
						jb.setBounds(130, 0, 175, 40);
						//将文字放在图片中间
						jb.setHorizontalTextPosition(SwingConstants.CENTER);
						jb.setFocusPainted(false);
						jb.setContentAreaFilled(false);
						jb.setBorderPainted(false);
						jb.setRolloverIcon(new ImageIcon("images/login_hover.jpg"));
						//创建右下角二维码登录图标组件
						JButton jbri = new JButton(new ImageIcon("images/right_normal.jpg"));
						jbri.setBounds(380, 10, 40, 40);
						jbri.setFocusPainted(false);
						jbri.setBorderPainted(false);
						jbri.setContentAreaFilled(false);
						jbri.setRolloverIcon(new ImageIcon("images/right_hover.jpg"));
						jbri.setToolTipText("二维码登录");
						//将底部3个组件添加到底部JPanel面板中
						panel.add(jble);
						panel.add(jb);
						panel.add(jbri);
						
						//为  登录  按钮注册监听器，后台检测QQ账号密码是否正确
						jb.addActionListener(ll);
						
						return panel;
						}
}






/* ----------------------------------------------- 2、创建并注册监听器 -------------------------------------------------- */





class LoginListener2 implements ActionListener{
	
	private JComboBox<Object> jco ;//用来获取QQ账号的对象
	private JPasswordField jpa ;//用来获取QQ密码的对象
	private JFrame jf;
	
	//构造方法
	public LoginListener2(JComboBox<Object> jco, JPasswordField jpa, JFrame jf) {
		// TODO Auto-generated constructor stub
		super();
		this.jco=jco;
		this.jpa=jpa;
		this.jf=jf;
	}

	@Override
	//为登录动作监听事件执行处理
	public void actionPerformed(ActionEvent e) {
		// TODO Auto-generated method stub
		//1、获取登录的账号和密码
		String name = (String) jco.getSelectedItem();
		String pwd = new String(jpa.getPassword());
		//2、判断输入的账号和密码是否正确
		if(name.equals("123456789") && pwd.equals("123")) {
			//账号正确，先关闭当前JFrame登录窗口
			jf.dispose();
			//模拟显示登录成功后的QQ窗口
			JFrame jfn = new JFrame();
			jfn.setSize(289, 687);
			jfn.setLocation(800, 100);
			jfn.setUndecorated(true);
			jfn.setResizable(true);
			jfn.setVisible(true);
			//为QQ显示窗口添加背景图片和退出按钮组件
			JPanel panel = new JPanel();
			panel.setLayout(null);
			panel.setPreferredSize(new Dimension(0,140));
			ImageIcon image = new ImageIcon("images/qqSuccess.jpg");
			JLabel background = new JLabel(image);
			background.setBounds(0, 0, 289, 687);
			panel.add(background);
			//添加退出按钮
			JButton out  = new JButton(new ImageIcon("images/close2_normal.jpg"));
			out.setBounds(265, 0, 26, 26);
			out.setRolloverIcon(new ImageIcon("images/close2_hover.jpg"));
			out.setBorderPainted(false);
			panel.add(out);
			jfn.add(panel);
			//为退出按钮注册监听器，关闭当前窗口
			out.addActionListener(event -> jf.dispose());
		}
		else
			//QQ账号或者密码错误时，弹出提示信息
			JOptionPane.showMessageDialog(null, "你输入的账户名或者密码不正确，请重新输入！");
	}
	
}

注意：
在使用完代码后，你可能发现图片未插入进去，可能是你的文件夹的目录位置不正确所导致的，那么看一下我的文件夹是放在什么位置的吧。

我将图片放在了与bin文件夹与src文件夹并列的images文件夹中，这样就可以实现图片显示的效果。