一、PyQt5配置
1、工具
Anaconda + python == 3.8 + PyCharm
2、conda虚拟环境安装pyqt5
pip install PyQt5
3、PyCharm配置外部工具
(1)PyUIC
名称:PyUIC
程序:D:\Anacondan\environment\environment1\python.exe
实参:-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py
工作目录:$FileDir$
(2)QtDesigner
名称:QtDesigner
程序:D:\Anacondan\environment\environment1\Lib\site-packages\PySide6\designer.exe
实参:
工作目录:$ProjectFileDir$
(3)PyRCC
名称:PyRCC
程序:D:\Anacondan\environment\environment1\Scripts\pyrcc5.exe
实参:$FileName$ -o $FileNameWithoutExtension$_rc.py
工作目录:$FileDir$
二、界面设计
1、登录窗口
(1)创建窗口
选择MainWindow
当前窗口对象命名为LoginWindow
文件保存为LoginUi.ui
(2)添加图标资源
添加图标文件icon,与LoginUi.ui文件同目录下
(3)QT加载图标文件
(4)组件设计
添加两个Frame
frame更改样式表
#frame{
background-color: qlineargradient(spread:pad, x1:0.482864, y1:0, x2:0.528, y2:1, stop:0 rgba(217, 44, 31, 255), stop:1 rgba(106, 255, 255, 220));
border-radius:25px;
}
#frame{}表示样式只对frame生效
frame_2样式表
#frame_2{
background-color: rgb(255, 255, 255);
border-top-right-radius:20px;
border-bottom-right-radius:20px;
}
添加关闭按钮
QPushButton{
border:none;
}
QPushButton:hover{
padding-bottom:5px;
}
frame_2中添加一个Frame,设置最小宽度最小高度
frame_3中添加两个Frame,frame_3为垂直布局,边距Layout为0
frame_4的垂直策略为Expanding,垂直伸展为6
frame_5的垂直策略为Expanding,垂直伸展为1
frame_4中添加两个Frame,布局为垂直布局,边距为0
frame_6的垂直策略为Expanding,垂直伸展为5
frame_7的垂直策略为Expanding,垂直伸展为1
frame_7中添加两个按钮Push Button,布局为水平布局
frame_7样式表
QPushButton{
border:none;
}
QPushButton:pressed{
padding-top:5px;
padding-left:5px;
}
窗体->预览
frame_6中添加一个Stacked Widget,布局为水平布局,边距设为0
page分别重命名为page_login,page_register
page_login中添加两个Line Edit,一个Push Button,布局为垂直布局
设置最小高度为35
分别命名为lineEdit_L_account、lineEdit_L_password、pushButton_L_sure
stackedWidget样式表
QLineEdit{
background-color: rgba(255, 255, 255, 0);
border:none;
border-bottom:1px solid black;
}
QPushButton{
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
border-radius:7px;
}
QPushButton:pressed{
padding-top:5px;
padding-left:5px;
}
page_regiter中添加三个Line Edit,一个Push Button,垂直布局
设置最小高度为30
分别命名为lineEdit_R_account、lineEdit_R_password_1、lineEdit_R_password_2、pushButton_R_sure
page_login中的lineEdit添加账号、密码文本
lineEdit_2的echoMode选Password
page_register中的lineEdit添加账号、密码文本
编辑退出按钮信号槽
frame_7中的按钮重命名
frame_5中添加一个Stacked Widget,创建6个page,水平布局
page_2中添加Lable,布局对齐为水平居中,文本为 账号或密码不能为空!!
page_3中添加Lable,布局对齐为水平居中,文本为 密码错误或账号不存在!!
page_4中添加Lable,布局对齐为水平居中,文本为 账号或密码不能为空!!
page_5中添加Lable,布局对齐为水平居中,文本为 密码不一致!!
page_6中添加一个Lable,布局对齐为水平居中,文本为 注册成功!!
2、创建主窗口
保存命名为interfaceUi
添加一个Frame,设置frame的最小宽度和最小高度
在frame中再添加两个Frame,布局为垂直布局,边距为0
frame_2垂直策略改为Expanding,垂直伸展为1
frame_3垂直策略改为Expanding,垂直伸展为10
在frame_2中添加两个Frame,水平布局,边距为0,frame_2水平策略为Expanding
frame_4中添加一个Push Button,水平布局,pushButton布局对齐为左侧
frame_5中添加三个Push Button,水平布局,pushButton布局对齐为右侧
frame_2样式表
添加信号槽
frame_3中添加两个Frame,水平布局,边距为0
frame_6水平策略改为Expanding,水平伸展为1
frame_7水平策略改为Expanding,水平伸展为10
frame_6样式表
#frame_6{
border-bottom-left-radius:20px;
border-top-right-radius:20px;
background-color: rgb(205, 205, 205);
}
frame_7样式表
#frame_7{
background-color: rgb(255, 255, 255);
border-bottom-right-radius:20px;
}
frame样式表
#frame{
background-color: rgb(255, 255, 255);
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
}
frame_6中添加三个Push Button,分别命名为pushButton_home、pushButton_web、pushButton_my,一个Vertical Spacer,垂直布局,添加样式
#frame_6{
border-bottom-left-radius:20px;
border-top-right-radius:20px;
background-color: rgb(205, 205, 205);
}
QPushButton{
border:none;
color: rgb(255, 255, 255);
font: 12pt "Microsoft YaHei UI";
}
QPushButton:hover{
color: rgb(168, 168, 168);
}
QPushButton:pressed{
padding-left:5px;
padding-top:5px;
}
frame_7中添加一个Stacked Widget,垂直布局,边距为0
插入三个page分别命名为page_home、page_web、page_my
page_home添加首页欢迎
page_web添加一个Frame,设置最大、最小宽度高度
frame_8中添加四个Push Button,分别重命名为pushButton_Bilibili、pushButton_CSDN、pushButton_Apple、pushButton_Tencent,设置四个按钮最小高度30,垂直布局
frame_8样式表
QPushButton{
border:2px solid black;
border-radius:7px;
}
QPushButton:hover{
background-color: rgb(205, 205, 205);
}
page_my添加一个Frame,设置最小宽度高度
frame_9中添加两个Line Edit,重命名为lineEdit_M_pass_1,lineEdit_M_pass_2,
一个Push Button,重命名为pushButton_M_sure,设置最小高度30
一个Stacked Widget,插入四个page,设置最大高度30,布局为垂直布局
frame_9布局为垂直布局
frame_9添加样式表
QLineEdit{
background-color: rgba(255, 255, 255, 0);
border:none;
border-bottom:1px solid black;
}
QPushButton{
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
border-radius:7px;
}
QPushButton:pressed{
padding-top:5px;
padding-left:5px;
}
page中添加Lable,布局对齐为水平居中,文本为空
page_2中添加Lable,布局对齐为水平居中,文本为 密码不能为空!!
page_3中添加Lable,布局对齐为水平居中,文本为 两次密码输入不一致!!
page_4中添加Lable,布局对齐为水平居中,文本为 密码修改成功!!
3、预览
三、编译
1、.ui编译为.py
2、.qrc编译为.py
四、MySQL数据库
五、功能实现
# 导入编译UI文件
from LoginUi import *
from interfaceUi import *
from PyQt5 import QtCore, QtWidgets, Qt
from PyQt5.QtWidgets import QApplication, QMainWindow
import webbrowser
import pymysql
import sys
# 设置全局变量
user_now = ''
# 创建LoginUi继承类
class LoginWindow(QMainWindow):
def __init__(self):
super().__init__()
self.ui = Ui_LoginWindow()
self.ui.setupUi(self)
# 隐藏背景框
self.setWindowFlag(QtCore.Qt.FramelessWindowHint)
self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
# 添加背景阴影
self.shadow = QtWidgets.QGraphicsDropShadowEffect(self)
self.shadow.setOffset(0, 0)
self.shadow.setBlurRadius(20)
self.shadow.setColor(QtCore.Qt.black)
# 背景阴影添加到frame
self.ui.frame.setGraphicsEffect(self.shadow)
# 按键关联
self.ui.pushButton_login.clicked.connect(lambda: self.ui.stackedWidget.setCurrentIndex(0))
self.ui.pushButton_redister.clicked.connect(lambda: self.ui.stackedWidget.setCurrentIndex(1))
self.ui.pushButton_L_sure.clicked.connect(self.login_in)
self.ui.pushButton_R_sure.clicked.connect(self.register_in)
self.show()
# 登录方法
def login_in(self):
account = self.ui.lineEdit_L_account.text()
password = self.ui.lineEdit_L_password.text()
# 建空列表
account_list = []
password_list = []
# 连接MySQL数据库
connection = pymysql.connect(database='datamy', host='localhost', port=3306, user='root', password='')
cursor = connection.cursor()
cursor.execute("select * from login")
datas = cursor.fetchall()
for data in datas:
account_list.append(data[0])
password_list.append(data[1])
# print(account_list, password_list)
# print(datas)
connection.commit()
connection.close()
# 判断账号密码
for i in range(len(account_list)):
# 账号或密码为空
if len(account) == 0 or len(password) == 0:
self.ui.stackedWidget_2.setCurrentIndex(1)
# 账号与密码对应
elif account == account_list[i] and password == password_list[i]:
# 记录登录用户
global user_now
user_now = account
# 跳转后关闭
self.window = MainWindow()
self.close()
# 账号与密码不对应
else:
# print("Invalid")
self.ui.stackedWidget_2.setCurrentIndex(2)
# 注册方法
def register_in(self):
account = self.ui.lineEdit_R_account.text()
password_1 = self.ui.lineEdit_R_password_1.text()
password_2 = self.ui.lineEdit_R_password_2.text()
if len(account) == 0 or len(password_1) == 0 or len(password_2) == 0:
self.ui.stackedWidget_2.setCurrentIndex(1)
elif password_1 != password_2:
self.ui.stackedWidget_2.setCurrentIndex(4)
else:
# 连接MySQL数据库
connection = pymysql.connect(database='datamy', host='localhost', port=3306, user='root', password='')
cursor = connection.cursor()
cursor.execute(f"insert into login values('{account}','{password_1}')")
connection.commit()
connection.close()
self.ui.stackedWidget_2.setCurrentIndex(5)
# 窗口拖动
def mousePressEvent(self, event):
if event.button() == QtCore.Qt.LeftButton and self.isMaximized() == False:
self.m_flag = True
# 获取鼠标相对位置
self.m_position = event.globalPos() - self.pos()
event.accept()
# 更改鼠标图标
self.setCursor(QtGui.QCursor(QtCore.Qt.OpenHandCursor))
def mouseMoveEvent(self, mouse_event):
if QtCore.Qt.LeftButton and self.m_flag:
# 更改窗口位置
self.move(mouse_event.globalPos() - self.m_position)
mouse_event.accept()
def mouseReleaseEvent(self, mouse_event):
self.m_flag = False
self.setCursor(QtGui.QCursor(QtCore.Qt.ArrowCursor))
# 创建interfaceUi继承类
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.ui = Ui_MainWindow()
self.ui.setupUi(self)
# 隐藏背景框
self.setWindowFlag(QtCore.Qt.FramelessWindowHint)
self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
# 按键关联
self.ui.pushButton_home.clicked.connect(lambda: self.ui.stackedWidget.setCurrentIndex(0))
self.ui.pushButton_web.clicked.connect(self.go_web)
self.ui.pushButton_my.clicked.connect(lambda: self.ui.stackedWidget.setCurrentIndex(2))
self.ui.pushButton_2.clicked.connect(self.login_out)
self.ui.pushButton_M_sure.clicked.connect(self.change_password)
self.show()
# 跳转方法
def go_web(self):
self.ui.stackedWidget.setCurrentIndex(1)
self.ui.pushButton_Bilibili.clicked.connect(lambda: webbrowser.open("https://www.bilibili.com"))
self.ui.pushButton_Apple.clicked.connect(lambda: webbrowser.open("https://www.APPLE.com"))
self.ui.pushButton_CSDN.clicked.connect(lambda: webbrowser.open("https://www.csdn.com"))
self.ui.pushButton_Tencent.clicked.connect(lambda: webbrowser.open("https://v.qq.com"))
# 退出登录方法
def login_out(self):
# 声明user_now为全局变量
global user_now
self.close()
self.login = LoginWindow()
user_now = ''
# 修改密码方法
def change_password(self):
global user_now
password = self.ui.lineEdit_M_pass_1.text()
if len(self.ui.lineEdit_M_pass_1.text()) == 0 or len(self.ui.lineEdit_M_pass_1.text()) == 0:
self.ui.stackedWidget_2.setCurrentIndex(1)
elif self.ui.lineEdit_M_pass_1.text() == self.ui.lineEdit_M_pass_2.text():
# 连接MySQL数据库
connection = pymysql.connect(database='datamy', host='localhost',
port=3306, user='root', password='')
cursor = connection.cursor()
cursor.execute(f"update login set passwords = '{password}' where accounts='{user_now}'")
connection.commit()
connection.close()
self.ui.stackedWidget_2.setCurrentIndex(3)
else:
self.ui.stackedWidget_2.setCurrentIndex(2)
# 窗口拖动
def mousePressEvent(self, event):
if event.button() == QtCore.Qt.LeftButton and self.isMaximized() == False:
self.m_flag = True
# 获取鼠标相对位置
self.m_position = event.globalPos() - self.pos()
event.accept()
# 更改鼠标图标
self.setCursor(QtGui.QCursor(QtCore.Qt.OpenHandCursor))
def mouseMoveEvent(self, mouse_event):
if QtCore.Qt.LeftButton and self.m_flag:
# 更改窗口位置
self.move(mouse_event.globalPos() - self.m_position)
mouse_event.accept()
def mouseReleaseEvent(self, mouse_event):
self.m_flag = False
self.setCursor(QtGui.QCursor(QtCore.Qt.ArrowCursor))
if __name__ == '__main__':
# 自适应缩放窗口
QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_EnableHighDpiScaling)
app = QApplication(sys.argv)
window = LoginWindow()
# window = MainWindow()
sys.exit(app.exec_())
六、环境
python == 3.8
pyqt5 == 5.9.2
七、参考资料
【数据库+PyQt5设计应用全过程-哔哩哔哩】
https://b23.tv/q2AyjuF
八、备注
1、.ui编译报错
An unexpected error occurred.
Check that you are using the latest version of PyQt5 and send an error report to
support@riverbankcomputing.com, including the following information:
* your version of PyQt (5.9.2)
* the UI file that caused this error
* the debug output of pyuic5 (use the -d flag when calling pyuic5)
图标文件不能有中文名