PyQt5登录页面设计

一、PyQt5配置

1、工具

Anaconda + python == 3.8 + PyCharm

2、conda虚拟环境安装pyqt5

pip install PyQt5

3、PyCharm配置外部工具

556a0f48949a41c796619f42570da676.png

(1)PyUIC

e32590d7eaf14c8e9e7ffa453bbd61b7.png

名称:PyUIC

程序:D:\Anacondan\environment\environment1\python.exe

实参:-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py

工作目录:$FileDir$

(2)QtDesigner

07f8da29b6a348c8a0657d04bc236378.png

名称:QtDesigner

程序:D:\Anacondan\environment\environment1\Lib\site-packages\PySide6\designer.exe

实参:

工作目录:$ProjectFileDir$

(3)PyRCC

7ba45342da704376b06aa4059e7b3cf2.png

名称:PyRCC

程序:D:\Anacondan\environment\environment1\Scripts\pyrcc5.exe

实参:$FileName$ -o $FileNameWithoutExtension$_rc.py

工作目录:$FileDir$


二、界面设计

1、登录窗口

(1)创建窗口

选择MainWindow

2331ceb45799412bbfb114bd1130589a.png

当前窗口对象命名为LoginWindow

46db681376e14a3ea2de6de457271697.png

文件保存为LoginUi.ui

3a86402fcaf64f14b0b4bf404913282a.png

(2)添加图标资源

添加图标文件icon,与LoginUi.ui文件同目录下

7a05a7716a9c42eb9ef1d77ebad5c4ad.png

(3)QT加载图标文件

14c54c27e2024ea28a9e3b384e6f364b.png

08f0997958fd46f99ffcfa8b27d2f641.png

87f3b35eb85d41a980ebd87087ab89b1.png


(4)组件设计

添加两个Frame

c749c27894d64f8aa62f7977afecb4fe.png

frame更改样式表

fbe1b2c5cc754137a2d990dd51047269.png

#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样式表

ac5f11d62a084f11b4b455fec6a9e3da.png

#frame_2{

        background-color: rgb(255, 255, 255);

        border-top-right-radius:20px;

        border-bottom-right-radius:20px;

}

添加关闭按钮

4bfe011805fe4e43897bf2f051c1d912.png

QPushButton{

        border:none;

}

QPushButton:hover{

        padding-bottom:5px;

}

frame_2中添加一个Frame,设置最小宽度最小高度

cb1e5fa98410449e9093124e1f5a5fa7.png

frame_3中添加两个Frame,frame_3为垂直布局,边距Layout为0

1c494c647780413bb58de289d1680e94.png

frame_4的垂直策略为Expanding,垂直伸展为6

frame_5的垂直策略为Expanding,垂直伸展为1

df42212542b0464680214045fdcb8700.png168ec0a7c8e54bf5915158c144c1f4be.png

frame_4中添加两个Frame,布局为垂直布局,边距为0

c311175b0bf44c56b07318b4f3c270e2.png

frame_6的垂直策略为Expanding,垂直伸展为5

frame_7的垂直策略为Expanding,垂直伸展为1

da25cb9cf50f46c2813ea312fd55d10d.png1f12d0c0c15c4f839b8430bffc56b96e.png

frame_7中添加两个按钮Push Button,布局为水平布局

5cce7e6523b4496a84694e42895a5b71.png

frame_7样式表

dadb11cc2fc843279fe67182b1e47b08.png

QPushButton{

        border:none;

}

QPushButton:pressed{

        padding-top:5px;

        padding-left:5px;

}

窗体->预览

5bb06af6d94b45659c0f4736da045a39.png

frame_6中添加一个Stacked Widget,布局为水平布局,边距设为0

page分别重命名为page_login,page_register

6063c0cc4eda4583a69eb6e87b47f3e3.png

page_login中添加两个Line Edit,一个Push Button,布局为垂直布局

设置最小高度为35

分别命名为lineEdit_L_account、lineEdit_L_password、pushButton_L_sure

45c5f0f79c6d409ab23d34d9d8313de9.png

stackedWidget样式表

5efa9ca544994224a6871098f425b487.png

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

2a449bd2410644858cb10b3d2495fa19.png

page_login中的lineEdit添加账号、密码文本

lineEdit_2的echoMode选Password

8d9b5aff85a34103a2c9a5f9b1d0f96f.png

page_register中的lineEdit添加账号、密码文本

ae407c8173ff4d1995d2abea8ddca446.png

编辑退出按钮信号槽

ba3ff4c6fc784ab48feae805e3b3a7d8.png

frame_7中的按钮重命名

edbf2cc7f8cc4ef3b6aea8836c9742e5.png

frame_5中添加一个Stacked Widget,创建6个page,水平布局

90cb02bdfa0a4c92a0e85ab815c0f2a8.png

page_2中添加Lable,布局对齐为水平居中,文本为 账号或密码不能为空!!

page_3中添加Lable,布局对齐为水平居中,文本为 密码错误或账号不存在!!

page_4中添加Lable,布局对齐为水平居中,文本为 账号或密码不能为空!!

page_5中添加Lable,布局对齐为水平居中,文本为 密码不一致!!

page_6中添加一个Lable,布局对齐为水平居中,文本为 注册成功!!

59a5a7e1b64c47c4a498e8d8383e8f10.png

2、创建主窗口

保存命名为interfaceUi

2f468594983540eea8e3d96920f5877e.png

添加一个Frame,设置frame的最小宽度和最小高度

55c83260b5ba482c95df2d6b753d65c4.png

在frame中再添加两个Frame,布局为垂直布局,边距为0

6fcccd1dd58849308acdbc47f44e1cef.png

frame_2垂直策略改为Expanding,垂直伸展为1

frame_3垂直策略改为Expanding,垂直伸展为10

1ca1489fe87746f897c77887d64fabf3.png

在frame_2中添加两个Frame,水平布局,边距为0,frame_2水平策略为Expanding

f939fe2d2db045679a28c7a33d256218.png

frame_4中添加一个Push Button,水平布局,pushButton布局对齐为左侧

frame_5中添加三个Push Button,水平布局,pushButton布局对齐为右侧

3ce70953311e4af8abafb619765c8abc.png

frame_2样式表

8264b2f3318c4edc8bda3af107415efc.png

添加信号槽

f306ab0c336a448289cad65e3693bf0d.png

frame_3中添加两个Frame,水平布局,边距为0

frame_6水平策略改为Expanding,水平伸展为1

frame_7水平策略改为Expanding,水平伸展为10

4ae8f7d7009a44f5985f955e5aa5dbe8.png

frame_6样式表

867a7b870ee74b95a80682b365cfe259.png

#frame_6{

        border-bottom-left-radius:20px;

        border-top-right-radius:20px;

        background-color: rgb(205, 205, 205);

}

frame_7样式表

a3722e1e63c545849b68d74e34e7c3e4.png

#frame_7{

        background-color: rgb(255, 255, 255);

        border-bottom-right-radius:20px;

}

frame样式表

e736c6dc3d4c480093d1fcf732434cd1.png

#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,垂直布局,添加样式

8a54e11267314bdb878a2463f19e9f13.png

#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

ea862b28ff7a4fa5a1dac696efaf4440.png

page_home添加首页欢迎

e9f50a2f9a4440db84a93667e40b924a.png

page_web添加一个Frame,设置最大、最小宽度高度

a1cac36c65a043c790b5afe34b78391f.png

frame_8中添加四个Push Button,分别重命名为pushButton_Bilibili、pushButton_CSDN、pushButton_Apple、pushButton_Tencent,设置四个按钮最小高度30,垂直布局

979bcb5651204260b86d158d1c7e1d5c.png

frame_8样式表

d5b1e7eddbd04b4b8f66ff778fd730ab.png

QPushButton{

        border:2px solid black;

        border-radius:7px;

}

QPushButton:hover{

        background-color: rgb(205, 205, 205);

}

page_my添加一个Frame,设置最小宽度高度

1db4d7314965458fbb949efe663dee2b.png

frame_9中添加两个Line Edit,重命名为lineEdit_M_pass_1,lineEdit_M_pass_2,

一个Push Button,重命名为pushButton_M_sure,设置最小高度30

一个Stacked Widget,插入四个page,设置最大高度30,布局为垂直布局

frame_9布局为垂直布局

b8eb031adff9434898077a046c512de2.png

frame_9添加样式表

84a21ab7a8f64b9fa9b9e9ed85b049ca.png

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,布局对齐为水平居中,文本为 密码修改成功!!

1e704e7465be4303b3dbe33d3d2b6440.png


3、预览

61b607614f67417bb364cf9400f3d650.png

8551c544b0614399a7d0331f5023e105.png


三、编译

1、.ui编译为.py

62245a357dbc47eb928aa6631b2777c3.png

2、.qrc编译为.py

24b84e6e1e664a139296f9d44273c096.png


四、MySQL数据库

3c793e89b01e44b3af72367bb3bb28b6.png

五、功能实现

# 导入编译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)

图标文件不能有中文名

  • 26
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值