Java:QQ登陆页面的制做(实现成功登陆的代码)——含源码

2022年05月14日 阅读数:6
这篇文章主要向大家介绍Java:QQ登陆页面的制做(实现成功登陆的代码)——含源码,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

图形页面(为实现登陆、退出功能):


package First;

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

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


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


/* ----------------------------------------------- 一、建立QQ登录窗口,并添加布局管理器 -------------------------------------------------- */




//建立一个QQ页面登录类,在该类中建立一个initLogin()方法来初始化QQ登录页面,并为窗口添加布局管理器进行区域划分
class QQLogin {
   
   
	//一、为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);//禁止改变窗口大小
		
	
	//二、根据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);//设置窗口可见
	}
}








/* ----------------------------------------------- 二、建立区域面板类,划分容器区域 -------------------------------------------------- */








class CreatePanel{
   
   
	//顶部面板区域
	public static JPanel CreateNorthPanel(JFrame jf) {
   
   
		//一、建立一个JPanel 顶部面板
		JPanel panel = new JPanel();
		//取消面板内默认的布局
		panel.setLayout(null);
		//设置顶部面板尺寸
		panel.setPreferredSize(new Dimension(0, 140));
		//1.一、向顶部面板添加背景图片
		ImageIcon image = new ImageIcon("images/back.jpg");
		JLabel background = new JLabel(image);
		//设置背景图片的位置以及尺寸
		background.setBounds(0, 0, 426, image.getIconHeight());
		panel.add(background);
		//1.二、在顶部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) {
   
   
			//二、建立一个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) {
   
   
				//三、建立一个JPanel 左侧面板
				JPanel panel = new JPanel();
				//取消面板内默认的布局
				panel.setLayout(null);
				//3.一、建立一个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.二、建立一个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.三、 建立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.四、建立两个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) {
   
   
				//四、建立一个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));
				//五、建立一个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) {
   
   
						//六、建立一个JPanel 底部面板
						JPanel panel = new JPanel();
						//取消面板内默认的布局
						panel.setLayout(null);
						//设置顶部面板尺寸
						panel.setPreferredSize(new Dimension(0,51));
						//6.一、建立左下角多人登陆图标组件
						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.二、建立底部中间登陆图标组件
						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;
						}
}






/* ----------------------------------------------- 二、建立并注册监听器 -------------------------------------------------- */





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
		//一、获取登陆的帐号和密码
		String name = (String) jco.getSelectedItem();
		String pwd = new String(jpa.getPassword());
		//二、判断输入的帐号和密码是否正确
		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.*;

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


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


/* ----------------------------------------------- 一、建立QQ登录窗口,并添加布局管理器 -------------------------------------------------- */




//建立一个QQ页面登录类,在该类中建立一个initLogin()方法来初始化QQ登录页面,并为窗口添加布局管理器进行区域划分
class QQLogin2 {
   
   
	//一、为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);//禁止改变窗口大小
		
	
	//二、根据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);//设置窗口可见
	}
}








/* ----------------------------------------------- 二、建立区域面板类,划分容器区域 -------------------------------------------------- */








class CreatePanel2{
   
   
	
	private static LoginListener ll ;
	
	//顶部面板区域
	public static JPanel CreateNorthPanel(JFrame jf) {
   
   
		//一、建立一个JPanel 顶部面板
		JPanel panel = new JPanel();
		//取消面板内默认的布局
		panel.setLayout(null);
		//设置顶部面板尺寸
		panel.setPreferredSize(new Dimension(0, 140));
		//1.一、向顶部面板添加背景图片
		ImageIcon image = new ImageIcon("images/back.jpg");
		JLabel background = new JLabel(image);
		//设置背景图片的位置以及尺寸
		background.setBounds(0, 0, 426, image.getIconHeight());
		panel.add(background);
		//1.二、在顶部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) {
   
   
			//二、建立一个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) {
   
   
				//三、建立一个JPanel 左侧面板
				JPanel panel = new JPanel();
				//取消面板内默认的布局
				panel.setLayout(null);
				//3.一、建立一个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.二、建立一个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.三、 建立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.四、建立两个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) {
   
   
				//四、建立一个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));
				//五、建立一个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) {
   
   
						//六、建立一个JPanel 底部面板
						JPanel panel = new JPanel();
						//取消面板内默认的布局
						panel.setLayout(null);
						//设置顶部面板尺寸
						panel.setPreferredSize(new Dimension(0,51));
						//6.一、建立左下角多人登陆图标组件
						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.二、建立底部中间登陆图标组件
						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;
						}
}






/* ----------------------------------------------- 二、建立并注册监听器 -------------------------------------------------- */





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
		//一、获取登陆的帐号和密码
		String name = (String) jco.getSelectedItem();
		String pwd = new String(jpa.getPassword());
		//二、判断输入的帐号和密码是否正确
		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, "你输入的帐户名或者密码不正确,请从新输入!");
	}
	
}

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

在这里插入图片描述
我将图片放在了与bin文件夹与src文件夹并列的images文件夹中,这样就能够实现图片显示的效果。web