基于PyQt5实现仿QQ-第二章-用户登录

基于PyQt5实现仿QQ-第二章-用户登录

Author: Daydreamer

项目简介

本项目基于PyQt5仿照目前流行的即时通信软件QQ，实现了新用户注册、用户登录、自动登录、记住多用户账号、用户搜索、添加好友、好友间聊天（消息持久化、同步化）等功能。

项目技术栈

• PyQt5: 本项目界面基于PyQt5实现。
• MySQL: 项目中的用户个人信息表、好友聊天记录表、好友表均由MySQL实现。
• SQLite: 使用SQLite将用户的账号密码存储于本地，实现了自动登录功能。
• WebSocket: 项目聊天功能基于WebSocket实现。
• FastAPI: 使用FastAPI将WebSocket服务部署到服务器，实现了任意IP间的通信。
• RabbitMQ: 基于RabbitMQ消息队列实现了消息真正的持久化（不存在好友离线接收不到消息），当用户一上线立刻会收到新消息。
• Minio: 基于Minio云存储服务器存储用户的头像、聊天记录中的图片、问价、视频等资源。

登录功能的实现

登录逻辑

接收界面用户输入的账号密码，点击登录按钮进行用户登录。通过用户的账号用户表中查询用户的相关信息（加密后的密码、用户头像url等），对数据表中的密码解密并与用户输入的密码进行比对，如果一样则登录成功，否则登录失败。

记住密码逻辑

用户可以在登录界面勾选记住密码选择项，在用户点击登录按钮后，系统会根据用户是否勾选记住密码选择项来将用户的账号密码（加密后）保存到SQLite数据库中。这样当用户下次启动QQ时，系统会自动加载SQLite本地的用户数据到界面。

自动登录逻辑

用户可以在登录界面勾选自动登录选择项，当用户下次启动QQ时，系统会自动获取界面上首个记住密码的账号相关信息，然后自动进行用户登录。

数据库表结构

用户信息表–MySQL

本地用户信息表–SQLite

登录UI界面代码

# -*- coding: utf-8 -*-# Form implementation generated from reading ui file '.\login_ui.ui'
#
# Created by: PyQt5 UI code generator 5.15.6
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.from PyQt5 import QtCore, QtGui, QtWidgetsclass Ui_Form(object):def setupUi(self, Form):Form.setObjectName("Form")Form.resize(502, 384)self.frame = QtWidgets.QFrame(Form)self.frame.setGeometry(QtCore.QRect(10, 10, 481, 361))self.frame.setStyleSheet("background-color: rgb(254,254,254);\n"
"border:none;")self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)self.frame.setFrameShadow(QtWidgets.QFrame.Raised)self.frame.setObjectName("frame")self.label = QtWidgets.QLabel(self.frame)self.label.setGeometry(QtCore.QRect(0, 0, 481, 141))self.label.setStyleSheet("border-image: url(:/img/bg.webp);\n"
"border-radius:0px;")self.label.setText("")self.label.setObjectName("label")self.logo_label = QtWidgets.QLabel(self.frame)self.logo_label.setGeometry(QtCore.QRect(200, 80, 81, 81))self.logo_label.setStyleSheet("border-radius: 40px;\n"
"border:3px solid white;\n"
"border-image: url(:/img/WechatIMG228.png);")self.logo_label.setText("")self.logo_label.setObjectName("logo_label")self.pwd_edit = QtWidgets.QLineEdit(self.frame)self.pwd_edit.setGeometry(QtCore.QRect(120, 230, 251, 31))self.pwd_edit.setFocusPolicy(QtCore.Qt.ClickFocus)self.pwd_edit.setStyleSheet("border-bottom: 2px solid #eee;padding-left:35px;")self.pwd_edit.setEchoMode(QtWidgets.QLineEdit.Password)self.pwd_edit.setObjectName("pwd_edit")self.label_3 = QtWidgets.QLabel(self.frame)self.label_3.setGeometry(QtCore.QRect(126, 184, 20, 20))self.label_3.setStyleSheet("border-image: url(:/img/qq.png);")self.label_3.setText("")self.label_3.setObjectName("label_3")self.label_4 = QtWidgets.QLabel(self.frame)self.label_4.setGeometry(QtCore.QRect(126, 233, 20, 20))self.label_4.setStyleSheet("border-image: url(:/img/lock.png);")self.label_4.setText("")self.label_4.setObjectName("label_4")self.login_btn = QtWidgets.QPushButton(self.frame)self.login_btn.setGeometry(QtCore.QRect(140, 300, 221, 41))self.login_btn.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))self.login_btn.setStyleSheet("background-color: qlineargradient(spread:pad, x1:0.492611, y1:0, x2:0.482759, y2:1, stop:0 rgba(67, 182, 253, 255), stop:1 rgba(0, 147, 238, 255));\n"
"color: rgb(255, 255, 255);\n"
"border-radius:4px;")self.login_btn.setObjectName("login_btn")self.auto_login = QtWidgets.QCheckBox(self.frame)self.auto_login.setGeometry(QtCore.QRect(120, 270, 87, 20))self.auto_login.setStyleSheet("color:rgb(214,214,214);")self.auto_login.setObjectName("auto_login")self.remember_pwd = QtWidgets.QCheckBox(self.frame)self.remember_pwd.setGeometry(QtCore.QRect(217, 270, 87, 20))self.remember_pwd.setStyleSheet("color:rgb(214,214,214);")self.remember_pwd.setObjectName("remember_pwd")self.find_pwd = QtWidgets.QPushButton(self.frame)self.find_pwd.setGeometry(QtCore.QRect(306, 270, 81, 21))self.find_pwd.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))self.find_pwd.setStyleSheet("color:rgb(214,214,214);")self.find_pwd.setObjectName("find_pwd")self.regi_id = QtWidgets.QPushButton(self.frame)self.regi_id.setGeometry(QtCore.QRect(0, 330, 81, 31))self.regi_id.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))self.regi_id.setStyleSheet("color:rgb(214,214,214);")self.regi_id.setObjectName("regi_id")self.close_btn = QtWidgets.QPushButton(self.frame)self.close_btn.setGeometry(QtCore.QRect(450, 0, 31, 31))self.close_btn.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))self.close_btn.setStyleSheet(".QPushButton{\n"
"border-image: url(:/img/close.png);\n"
"background-color: rgba(255, 255, 255, 0);\n"
"margin:7px;\n"
"}\n"
"")self.close_btn.setText("")self.close_btn.setObjectName("close_btn")self.label_5 = QtWidgets.QLabel(self.frame)self.label_5.setGeometry(QtCore.QRect(10, 10, 31, 31))self.label_5.setStyleSheet("border-image: url(:/img/qq_white.png);\n"
"background-color: rgba(255, 255, 255, 0);")self.label_5.setText("")self.label_5.setObjectName("label_5")self.label_6 = QtWidgets.QLabel(self.frame)self.label_6.setGeometry(QtCore.QRect(40, 10, 51, 31))self.label_6.setStyleSheet("font: 20px \".AppleSystemUIFont\";\n"
"color: rgb(255, 255, 255);\n"
"background-color: rgba(255, 255, 255, 0);")self.label_6.setObjectName("label_6")self.id_comboBox = QtWidgets.QComboBox(self.frame)self.id_comboBox.setGeometry(QtCore.QRect(120, 180, 251, 31))self.id_comboBox.setStyleSheet(".QComboBox{\n"
"    border-bottom: 2px solid #eee;\n"
"    padding-left:35px;    \n"
"}\n"
"\n"
"\n"
"QComboBox:editable {\n"
"    background: white;\n"
"}\n"
"\n"
"\n"
"/* QComboBox gets the \"on\" state when the popup is open */\n"
"QComboBox:!editable:on, QComboBox::drop-down:editable:on {\n"
"\n"
"}\n"
"\n"
"QComboBox:on { /* shift the text when the popup opens */\n"
"    padding-top: 3px;\n"
"    padding-left: 4px;\n"
"}\n"
"\n"
"QComboBox::drop-down {\n"
"    width: 25px;\n"
"    \n"
"    border-image: url(:/img/down.png);\n"
"\n"
"}\n"
"\n"
"QComboBox::down-arrow {\n"
"    image: url(../res/arrow.ico);\n"
"}\n"
"\n"
"QComboBox::down-arrow:on { /* shift the arrow when popup is open */\n"
"    top: 1px;\n"
"    left: 1px;\n"
"}\n"
"\n"
"QComboBox QAbstractItemView::item{\n"
"    min-height: 70px;\n"
"    min-width: 70px;\n"
"    outline:0px;\n"
"}\n"
"\n"
"QComboBox::placeholder{\n"
"    color:gray;\n"
"}\n"
"\n"
"QComboBox QAbstractItemView::item:hover {\n"
"}\n"
"\n"
"QComboBox QAbstractItemView::item:selected:active{\n"
"}\n"
"\n"
"QComboBox QAbstractItemView::item:selected:!active{\n"
"}")self.id_comboBox.setEditable(True)self.id_comboBox.setCurrentText("")self.id_comboBox.setDuplicatesEnabled(False)self.id_comboBox.setFrame(True)self.id_comboBox.setObjectName("id_comboBox")self.id_comboBox.raise_()self.label.raise_()self.logo_label.raise_()self.pwd_edit.raise_()self.label_3.raise_()self.label_4.raise_()self.login_btn.raise_()self.auto_login.raise_()self.remember_pwd.raise_()self.find_pwd.raise_()self.regi_id.raise_()self.close_btn.raise_()self.label_5.raise_()self.label_6.raise_()self.retranslateUi(Form)QtCore.QMetaObject.connectSlotsByName(Form)def retranslateUi(self, Form):_translate = QtCore.QCoreApplication.translateForm.setWindowTitle(_translate("Form", "Form"))self.pwd_edit.setPlaceholderText(_translate("Form", "密码"))self.login_btn.setText(_translate("Form", "安全登录"))self.auto_login.setText(_translate("Form", "自动登录"))self.remember_pwd.setText(_translate("Form", "记住密码"))self.find_pwd.setText(_translate("Form", "找回密码"))self.regi_id.setText(_translate("Form", "注册账号"))self.label_6.setText(_translate("Form", "QQ"))
import ui.img_rc

用户下拉框组件代码

这里因为官方提供的QComboBox不能实现用户头像显示的效果，所以这里基于QWidget重写了QComboBox组件。

from PyQt5.QtWidgets import QWidget, QLabel, QHBoxLayout, QVBoxLayout, QApplication, QToolButton, QPushButton
from PyQt5.QtGui import QPixmap, QIcon
from PyQt5.QtCore import QEvent, QObject, pyqtSignal
from PyQt5 import QtCore
import ui.img_rcclass ComboBoxItem(QWidget):"""重写comboBoxAuthor: Daydreamer"""itemOpSignal = pyqtSignal(str)def __init__(self, user_id, user_name, user_icon):super().__init__()self.user_name = user_nameself.user_id = user_idself.user_icon = user_iconself. initUi()def initUi(self):lb_user_name = QLabel(self.user_name, self)  # 创建一个用户名labellb_user_id = QLabel(self.user_id, self)  # 创建一个用户id labellb_user_name.setStyleSheet("""color: black;background-color: rgba(255,255,255,0);""")lb_user_id.setStyleSheet("""color: black;background-color: rgba(255,255,255,0);""")lb_user_icon = QLabel(self)  # 创建一个用户头像labellb_user_icon.setPixmap(QPixmap(self.user_icon))lb_user_icon.setMaximumSize(QtCore.QSize(60, 60))lb_user_icon.setMinimumSize(QtCore.QSize(60, 60))lb_user_icon.setScaledContents(True)self.bt_close = QPushButton(self)  # 创建一个关闭按钮self.bt_close.setMaximumSize(QtCore.QSize(20, 20))self.bt_close.setMinimumSize(QtCore.QSize(20, 20))self.bt_close.setStyleSheet("""QPushButton {border-radius: 10px;background-color: rgba(255, 255, 255, 0);border-image: url(:/img/close_2.png);}QPushButton:hover {background-color: #fe5439;}""")# 创建一个垂直布局vlayout = QVBoxLayout()# 将用户名label和用户id label添加到垂直布局vlayout.addWidget(lb_user_name)vlayout.addWidget(lb_user_id)# 创建一个水平布局hlayout = QHBoxLayout()# 将用户头像label和垂直布局和关闭按钮添加到水平布局hlayout.addWidget(lb_user_icon)hlayout.addLayout(vlayout)hlayout.addStretch(1)hlayout.addWidget(self.bt_close)hlayout.setContentsMargins(5, 5, 5, 5)hlayout.setSpacing(5)# 设置布局self.setLayout(hlayout)# 在按钮上安装事件过滤器self.bt_close.installEventFilter(self)# 在窗口上安装事件过滤器self.installEventFilter(self)def eventFilter(self, object, event):"""重写事件过滤器方法:param obj: 事件发送对象:param event: 事件对象:return: bool"""if object is self:if event.type() == QEvent.Enter:self.setStyleSheet("QWidget{color:white}")elif event.type() == QEvent.Leave:self.setStyleSheet("QWidget{color:black}")elif object is self.bt_close:if event.type() == QEvent.MouseButtonPress:self.itemOpSignal.emit(self.user_id)return QWidget.eventFilter(self, object, event)

登录逻辑代码

这里的用户登录相关的SQL操作我是基于ORM的，大家可以自己实现。代码对用户体验进行了一些细小的优化，这里不进行介绍。

#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
@Project ：socket_pyqt 
@File ：login.py
@Author ：SCC
@Date ：2023/5/30 13:54 
This program is good and not any bug. If you find Bug, it must be your problem.
"""
import sys
import timefrom PyQt5 import QtCore
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QColor
from PyQt5.QtWidgets import QWidget, QGraphicsDropShadowEffect, QMessageBox, QListWidget, QListWidgetItem, QApplication
from Assets.ComboBoxItem import ComboBoxItem
import lib.sql_command as sql_command
import db.mysql_orm.crud as mysql_crud
import db.sqlite_orm.crud as sqlite_crud
from threading import Thread
from page.main_test import QQMainPage
from page.registered import registered_ui
from ui.login_ui import Ui_Formclass login_ui(QWidget, Ui_Form):# login_window = QtCore.pyqtSignal()  # 跳转信号flag = 0def __init__(self):super(login_ui, self).__init__()self.history_data = []  # 用户历史数据self.info_id = []self.setupUi(self)self.update_timer = QtCore.QTimer()self.update_timer.start(1000)self.init_ui()  # 初始化Ui函数self.init_slots()self.init_data()  # 初始化部分数据def init_data(self):"""初始化用户记录Author: SCCLast_Author: Daydreamer:return: 无"""self.history_data = sqlite_crud.get_info()  # 获取历史数据if self.history_data is False:  # 如果得到的用户记录为空则直接返回returnelse:# 遍历用户数据，将用户数据添加到comboBox中for info in self.history_data:# 创建一个ComboBoxItem对象，并设置好用户信息item = ComboBoxItem(info.user_id, info.user_name, 'ui/WechatIMG228.png')listwitem = QListWidgetItem(self.listw)self.listw.setItemWidget(listwitem, item)self.info_id.append(info.user_id)item.itemOpSignal.connect(self.itemOp)  # 连接删除用户记录槽函数，将comboBox的索引传到槽函数self.show_data(0)  # 打开QQ界面默认显示comboBox中的第一个用户记录self.id_comboBox.activated[int].connect(self.show_data)  # 连接显示用户密码槽函数# if self.auto_login.isChecked():#     print("自动登录")#     self.auto_login_fun()def comboBoxTextChanged(self, text):"""Author: Daydreamer:param text::return: 无"""if text == "":self.pwd_edit.clear()def itemOp(self, qq):"""删除comboBox和sqlite中的用户Author: Daydreamer传入参数: 需要删除的QQ号"""sqlite_crud.remove_history(qq)  # 调用crud中的方法删除sqlite中的用户记录index_qq = self.info_id.index(qq)  # 得到需要删除qq号所在comboBox中的索引位置self.listw.takeItem(index_qq)  # 删除comboBox中的用户记录if self.id_comboBox.currentText() == "":  # 如果comboBox中的用户记录被删除，则密码行中的数据同样清空self.pwd_edit.clear()def auto_login_fun(self):"""自动登录功能Author: Daydreamer:return: 无"""if self.pwd_edit.text() == '':  # 判断是有密码returnelse:  # 有密码就进行自动登录self.login()  # 调用登录函数def show_data(self, int):"""显示用户账号密码（下拉框选择显示）Author: Daydreamer:return: 无"""self.id_comboBox.setEditText(self.history_data[int].user_id)self.pwd_edit.setText(self.history_data[int].user_pwd)self.pwd_edit.setFocus()  # 将光标锁定在密码输入框if self.pwd_edit.text() != "":  # 密码不为空的话就是默认勾选记住密码self.remember_pwd.setChecked(True)  # 设置记住密码勾选if self.history_data[int].is_auto_login == '1':  # 判断是否自动登录self.auto_login.setChecked(True)  # 设置自动登录勾选else:self.remember_pwd.setChecked(False)  # 取消记住密码勾选self.auto_login.setChecked(False)  # 如果没有密则取消自动登录def init_ui(self):# Author: SCC# 初始化UI的函数self.setAttribute(Qt.WA_TranslucentBackground)  # 窗体背景透明self.setWindowFlags(Qt.WindowStaysOnTopHint | Qt.FramelessWindowHint | Qt.Tool)  # 窗口置顶，无边框，在任务栏不显示图标shadow = QGraphicsDropShadowEffect()  # 设定一个阴影,半径为10,颜色为#444444,定位为0,0shadow.setBlurRadius(10)shadow.setColor(QColor("#444444"))shadow.setOffset(0, 0)self.frame.setGraphicsEffect(shadow)  # 为frame设定阴影效果self.listw = QListWidget()  # 实例化一个列表框self.id_comboBox.setModel(self.listw.model())self.id_comboBox.setView(self.listw)self.id_comboBox.setCurrentIndex(-1)self.id_comboBox.lineEdit().setPlaceholderText("账号/邮箱/电话号")self.id_comboBox.currentTextChanged.connect(self.comboBoxTextChanged)def init_slots(self):# Author: SCC# 初始化信号和槽的函数self.update_timer.timeout.connect(self.close_page_test)  # 定时器槽函数，用于判断是否自动登录成功，自动登录成功则关闭登录界面self.close_btn.clicked.connect(lambda: self.closeEvent(self))self.login_btn.clicked.connect(self.login)  # 连接登录槽函数self.pwd_edit.returnPressed.connect(self.Enter_to_login)  # 连接回车登录槽函数（用户输入完密码以后支持回车登录））self.regi_id.clicked.connect(self.register_id)  # 连接注册账号槽函数def close_page_test(self):"""# Auther: Daydreamer# 自动登录成功后隐藏QQ登录界面:return:"""if login_ui.flag == 0:if self.auto_login.isChecked():print("自动登录")# self.auto_login_fun()self.update_timer.start(1)if login_ui.flag == 1:# print('hide')# time.sleep(0)self.update_timer.stop()self.hide()def register_id(self):"""#Author: Daydreamer#打开注册账号界面关闭登录界面:return: 无"""self.register_page = registered_ui(self)  # 打开注册界面# selfself.login_window.emit()self.register_page.show()self.hide()  # 关闭登录界面def Enter_to_login(self):"""回车登录功能Author: SCC:return: 无"""if self.pwd_edit.text() == '':print("请输入密码!!!")QMessageBox.about(self, "Error", "请输入密码在进行登录!!!")returnelse:self.login()  # 调用登录函数def login(self):"""登陆的函数Author: SCCLast_Author: Daydreamer:return: 无"""id = self.id_comboBox.currentText()  # 获取账户输入账号pwd = self.pwd_edit.text()  # 获取密码输入ret = sql_command.pwd_eval(id, pwd)  # 账号密码验证函数，返回一个布尔值if ret:print("登陆成功")info = mysql_crud.get_user_info(id)# 进行登陆历史记录存储，要根据是否勾选记住密码来进行数据库的存储if self.remember_pwd.isChecked():  # 判断是否记住密码if self.auto_login.isChecked():  # 判断是否自动登录print("记住密码和自动登录")sqlite_crud.add_history_info(str(id), info["name"], info["logo"], str(1), str(pwd))  # 记住密码并且自动登录login_ui.flag = 1self.qqmain_page = QQMainPage(id, info["logo"], info["name"])self.qqmain_page.center()  # 调用center方法将窗口显示在屏幕中心self.qqmain_page.show()self.hide()  # 隐藏登录界面else:print("记住密码但不自动登录")sqlite_crud.add_history_info(str(id), info["name"], info["logo"], str(0),str(pwd))  # 记住密码但是不自动登录login_ui.flag = 1# TODO：跳转到用户的主界面self.qqmain_page = QQMainPage(id, info["logo"], info["name"])self.qqmain_page.center()  # 调用center方法将窗口显示在屏幕中心self.qqmain_page.show()self.hide()  # 隐藏登录界面else:print("没有记住密码")sqlite_crud.add_history_info(str(id), info["name"], info["logo"], str(0))  # 没有记住密码就不能login_ui.flag = 1# TODO：跳转到用户的主界面self.qqmain_page = QQMainPage(id, info["logo"], info["name"])self.qqmain_page.center()  # 调用center方法将窗口显示在屏幕中心self.qqmain_page.show()self.hide()  # 隐藏登录界面else:QMessageBox.about(self, "Error", "账号密码错误，请重新输入")login_ui.flag = 1"""下方为鼠标左键拖动重写事件"""def mousePressEvent(self, event):  # 鼠标左键按下时获取鼠标坐标,按下右键取消if event.button() == Qt.LeftButton:self.m_flag = Trueself.m_Position = event.globalPos() - self.pos()event.accept()elif event.button() == Qt.RightButton:self.m_flag = Falsedef mouseMoveEvent(self, QMouseEvent):  # 鼠标在按下左键的情况下移动时,根据坐标移动界面try:if Qt.LeftButton and self.m_flag:self.move(QMouseEvent.globalPos() - self.m_Position)QMouseEvent.accept()except BaseException as e:passdef mouseReleaseEvent(self, QMouseEvent):  # 鼠标按键释放时,取消移动self.m_flag = Falsedef closeEvent(self, QCloseEvent):# Author: SCC# 界面关闭函数，并手动退出进程self.close()  # 关闭界面sys.exit()

最终效果

项目源码在这里，可以的话就给个小星星吧！QQ源码

特别鸣谢：LoadingCreate ҈҉҈҉҈҉҈ 对我的帮助！