Qt第五十六章：双向绑定-实例

灰太狼 2024-03-25 11:01 108阅读 0赞

**目录**

一、预览

二、目标拆解

三、代码

--------------------

#### 一、预览 ####

**界面描述：一个简单的表单界面：填写数据库连接信息，可测试是否连接成功，可保存连接信息，可取消。**

--------------------

![7027009422cf4bf2ab5d579a9c1c1e6e.png][]

#### 二、目标拆解 ####

1.定义结构化的界面，主体分为三个部分：**①数据结构 ②UI界面 ③定制逻辑。**  
2.定义数据结构：定义界面所涉及到的所有逻辑数据。  
3.UI界面：定义界面的控件布局、大小、位置、名称、字体、颜色...等等界面元素，**不涉及逻辑**。  
4.将数据结构与控件进行**双向绑定**：**数据变更后控件自动更新，控件更新后数据也会自动改变**。  
5.定制逻辑：**之后对界面的所有操作，都是在操作数据，而不是去操作控件本身**。

#### 三、代码 ####

from dataclasses import dataclass, field
    from threading import Thread
    
    from PySide6.QtCore import QRegularExpression
    from PySide6.QtGui import QIcon, QFont, QRegularExpressionValidator, QIntValidator
    from PySide6.QtWidgets import QVBoxLayout, QFrame, QGroupBox, QFormLayout, QLabel, QLineEdit, QHBoxLayout, \
        QPushButton, QSpacerItem, QSizePolicy, QMessageBox, QApplication, QWidget
    from watchpoints import watch
    
    from db.models import DatabaseConnection
    from service.database_connection_service import test_database_connection, add_database_connection, \
        get_database_connections
    from utils.dto import TreeWidgetDataDTO
    from web.home.home_signal import home_signal
    
    
    @dataclass
    class DataBaseConnectData(object):
        """
        数据结构
        """
        connect_name: str = field(default=None)
        host: str = field(default='127.0.0.1')
        port: int = field(default=3306)
        database: str = field(default=None)
        username: str = field(default='root')
        password: str = field(default='123456')
    
        def set_connect_name(self, value):
            self.connect_name = value
    
        def set_host(self, value):
            self.host = value
    
        def set_port(self, value):
            self.port = value
    
        def set_database(self, value):
            self.database = value
    
        def set_username(self, value):
            self.username = value
    
        def set_password(self, value):
            self.password = value
    
    
    class DataBaseConnectUi(object):
        """
        UI界面
        """
    
        def setupUi(self, DataBaseConnectUi):
            if not DataBaseConnectUi.objectName():
                DataBaseConnectUi.setObjectName(u"DataBaseConnectWindow")
            # 主窗口的设置需要用DataBaseConnectUi
            DataBaseConnectUi.resize(350, 300)
            DataBaseConnectUi.setWindowTitle('Add connections')
            DataBaseConnectUi.setWindowIcon(QIcon(':/icons/linked.png'))
            DataBaseConnectUi.setMinimumSize(350, 300)
            DataBaseConnectUi.setMaximumSize(350, 300)
    
            # 垂直布局
            self.layout = QVBoxLayout()
            DataBaseConnectUi.setLayout(self.layout)
            # 上半区是一个Frame框
            self.frame = QFrame()
            self.layout.addWidget(self.frame)
            self.frame.setFrameStyle(QFrame.Shape.Panel)
            # Frame采用表单布局
            self.form_layout = QFormLayout()
            self.form_layout.setSpacing(15)
            self.frame.setLayout(self.form_layout)
    
            self.font = QFont()
            self.font.setPointSize(12)
            self.font.setFamily('KaiTi')
    
            self.name_label = QLabel('连接名')
            self.name_label.setFont(self.font)
            self.name_label.setMinimumHeight(30)
            self.name_edit = QLineEdit()
    
            self.name_edit.setFont(self.font)
            self.name_edit.setPlaceholderText("连接名")
            self.name_edit.setMinimumHeight(30)
            self.form_layout.addRow(self.name_label, self.name_edit)
    
            self.host_label = QLabel('主机')
            self.host_label.setFont(self.font)
            self.host_label.setMinimumHeight(30)
            self.host_edit = QLineEdit()
            # IP校验器
            self.host_edit.setValidator(QRegularExpressionValidator(
                QRegularExpression('^((2[0-4]\d|25[0-5]|\d?\d|1\d{2})\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$')))
            # 掩码
            self.host_edit.setInputMask("000.000.000.000;_")
            self.host_edit.setFont(self.font)
            self.host_edit.setPlaceholderText("主机")
            self.host_edit.setMinimumHeight(30)
            self.form_layout.addRow(self.host_label, self.host_edit)
    
            self.port_label = QLabel('端口')
            self.port_label.setFont(self.font)
            self.port_label.setMinimumHeight(30)
            self.port_edit = QLineEdit()
            self.port_edit.setValidator(QIntValidator(0, 65535))
            self.port_edit.setFont(self.font)
            self.port_edit.setPlaceholderText("端口")
            self.port_edit.setMinimumHeight(30)
            self.form_layout.addRow(self.port_label, self.port_edit)
    
            self.database_label = QLabel('数据库')
            self.database_label.setFont(self.font)
            self.database_label.setMinimumHeight(30)
            self.database_edit = QLineEdit()
            self.database_edit.setFont(self.font)
            self.database_edit.setPlaceholderText("数据库")
            self.database_edit.setMinimumHeight(30)
            self.form_layout.addRow(self.database_label, self.database_edit)
    
            self.username_label = QLabel('账号')
            self.username_label.setFont(self.font)
            self.username_label.setMinimumHeight(30)
            self.username_edit = QLineEdit()
            self.username_edit.setFont(self.font)
            self.username_edit.setPlaceholderText("账号")
            self.username_edit.setMinimumHeight(30)
            self.form_layout.addRow(self.username_label, self.username_edit)
    
            self.password_label = QLabel('密码')
            self.password_label.setFont(self.font)
            self.password_label.setMinimumHeight(30)
            self.password_edit = QLineEdit()
            self.password_edit.setFont(self.font)
            self.password_edit.setPlaceholderText("密码")
            self.password_edit.setEchoMode(QLineEdit.EchoMode.Password)
            self.password_edit.setMinimumHeight(30)
            self.form_layout.addRow(self.password_label, self.password_edit)
    
            # 下半区是一个按钮组
            self.group_box = QGroupBox()
            self.group_box.setMinimumHeight(30)
            self.group_box.setMaximumHeight(30)
            self.layout.addWidget(self.group_box)
            self.box_layout = QHBoxLayout()
            self.box_layout.setContentsMargins(0, 0, 0, 0)
            self.group_box.setLayout(self.box_layout)
    
            self.button_test = QPushButton('测试')
            self.button_ok = QPushButton('OK')
            self.button_cancel = QPushButton('Cancel')
    
            self.box_layout.addWidget(self.button_test)
            self.box_layout.addItem(QSpacerItem(40, 20, QSizePolicy.Expanding, QSizePolicy.Minimum))
            self.box_layout.addWidget(self.button_ok)
            self.box_layout.addWidget(self.button_cancel)
    
    
    class DataBaseConnect(QWidget, DataBaseConnectUi):
        """
        定制逻辑
        """
    
        def __init__(self, parent=None):
            super(DataBaseConnect, self).__init__(parent=parent)
            self.setupUi(self)
            self.data: DataBaseConnectData = DataBaseConnectData()
            # 双向绑定
            self.v_binding()
            # 默认值初始化
            self.name_edit.setText(self.data.connect_name)
            self.host_edit.setText(self.data.host)
            self.port_edit.setText(str(self.data.port))
            self.database_edit.setText(self.data.database)
            self.username_edit.setText(self.data.username)
            self.password_edit.setText(self.data.password)
            # 按钮绑定槽函数
            self.button_test.clicked.connect(self.test_linked)
            self.button_ok.clicked.connect(self.add_linked)
            self.button_cancel.clicked.connect(self.close)
            self.password_edit.returnPressed.connect(self.test_linked)
    
        def v_binding(self):
            """
            将输入控件与数据-双向绑定
            """
            watch(self.data.connect_name, callback=lambda frame, elem, exec_info: self.name_edit.setText(elem.obj))
            watch(self.data.host, callback=lambda frame, elem, exec_info: self.host_edit.setText(elem.obj))
            watch(self.data.port, callback=lambda frame, elem, exec_info: self.port_edit.setText(elem.obj))
            watch(self.data.database, callback=lambda frame, elem, exec_info: self.database_edit.setText(elem.obj))
            watch(self.data.username, callback=lambda frame, elem, exec_info: self.username_edit.setText(elem.obj))
            watch(self.data.password, callback=lambda frame, elem, exec_info: self.password_edit.setText(elem.obj))
    
            self.name_edit.textChanged.connect(lambda: self.data.set_connect_name(self.name_edit.text()))
            self.host_edit.textChanged.connect(lambda: self.data.set_host(self.host_edit.text()))
            self.port_edit.textChanged.connect(lambda: self.data.set_port(self.port_edit.text()))
            self.database_edit.textChanged.connect(lambda: self.data.set_database(self.database_edit.text()))
            self.username_edit.textChanged.connect(lambda: self.data.set_username(self.username_edit.text()))
            self.password_edit.textChanged.connect(lambda: self.data.set_password(self.password_edit.text()))
    
        # 测试连接是否成功
        def test_linked(self):
            # 数据校验
            if self.data.host == '' or self.data.host is None:
                return
            if self.data.database == '' or self.data.database is None:
                return
            connection: bool = test_database_connection(self.data.host, int(self.data.port), self.data.database,
                                                        self.data.username,
                                                        self.data.password)
            if connection:
                msgBox = QMessageBox()
                msgBox.resize(350, 200)
                msgBox.setWindowTitle(' ')
                msgBox.setText("<h2>连接成功</h2>")
                msgBox.setStyleSheet("QLabel{ color: green}")
                msgBox.setIcon(QMessageBox.Icon.Information)
                msgBox.exec()
    
            else:
                msgBox = QMessageBox()
                msgBox.resize(350, 200)
                msgBox.setWindowTitle(' ')
                msgBox.setText("<h2>连接失败</h2>")
                msgBox.setStyleSheet("QLabel{ color: red}")
                msgBox.setIcon(QMessageBox.Icon.Warning)
                msgBox.exec()
    
        # 添加连接到数据库
        def add_linked(self):
            # 数据校验
            if self.data.host == '' or self.data.host is None:
                return
            if self.data.database == '' or self.data.database is None:
                return
            if self.data.connect_name == '' or self.data.connect_name is None:
                return
            connection: bool = test_database_connection(self.data.host, int(self.data.port), self.data.database,
                                                        self.data.username,
                                                        self.data.password)
            if connection:
                add_database_connection(
                    DatabaseConnection(link_name=self.data.connect_name, type='mysql', host=self.data.host,
                                       port=int(self.data.port), db=self.data.database, username=self.data.username,
                                       password=self.data.password))
    
                self.close()
    
                # 刷新树
                def thread_function():
                    # 在新线程中处理数据
                    data: list[TreeWidgetDataDTO] = [TreeWidgetDataDTO(x.id, None, x.link_name) for x in
                                                     get_database_connections()]
                    # 处理完数据发送渲染信号
                    home_signal.signal_render_tree_widget.emit(data)
    
                # 使用新线程去发送信号
                thread = Thread(target=thread_function)
                thread.start()
    
            else:
                msgBox = QMessageBox()
                msgBox.resize(350, 200)
                msgBox.setWindowTitle(' ')
                msgBox.setText("<h2>连接失败</h2>")
                msgBox.setStyleSheet("QLabel{ color: red}")
                msgBox.setIcon(QMessageBox.Icon.Warning)
                msgBox.exec()
    
    
    if __name__ == '__main__':
        app = QApplication([])
        database_connect = DataBaseConnect()
        database_connect.show()
        app.exec()

[7027009422cf4bf2ab5d579a9c1c1e6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b214932c5859416c9fdde9e4bb7b6def.png