知名网站建设定制Python大作业——爬虫+可视化+数据分析+数据库（可视化篇）

相关链接

一、登录界面

知名网站建设定制由于该程序会通过与数知名网站建设定制据库的交互来实现歌曲知名网站建设定制收藏等功能，知名网站建设定制故需要首先设计一个进知名网站建设定制行登录注册的界面

知名网站建设定制登录界面将与主界面同大小，知名网站建设定制且为了方便布局，知名网站建设定制设置为固定大小不可改变

self.setFixedSize(960, 700)self.setWindowTitle('登录')  # 设置窗口名称self.setWindowIcon(QIcon('favicon.ico'))  # 设置左上角的窗口图标
1
2
3

接下来通过调色板控件设置窗口背景

palette = QPalette()palette.setBrush(QPalette.Background, QBrush(QPixmap('1.jpg')))self.setPalette(palette)
1
2
3

接下来设置界面控件

self.frame = QFrame(self)self.frame.move(260, 110)  # 坐标self.mainLayout = QVBoxLayout(self.frame)
1
2
3

为了简单方便，只设置了账号密码两个输入框以及登录注册两个按钮，如下为账户号输入框设置

self.nameEd1 = QLineEdit(self)  # 创建输入框self.nameEd1.setPlaceholderText("Admin")  # 设置默认文字self.nameEd1.setFont(QFont('微软雅黑', 22))  # 设置字体和大小# 设置透明度op2 = QGraphicsOpacityEffect()op2.setOpacity(0.5)self.nameEd1.setGraphicsEffect(op2)# 设置控件样式self.nameEd1.setStyleSheet('''QLineEdit{border-radius:5px; padding: 8px}''')
1
2
3
4
5
6
7
8
9

密码输入框也类似，只需要再将其编辑模式设置为小圆点填充即可

self.nameEd2.setEchoMode(QLineEdit.Password)
1

登录和注册按钮设置则完全一致

self.btnLG = QPushButton('Login')  # 按钮值设置Login# 设置透明度op3 = QGraphicsOpacityEffect()op3.setOpacity(0.5)self.btnLG.setGraphicsEffect(op3)# 设置控件样式self.btnLG.setStyleSheet('''QPushButton{background:#1E90FF;border-radius:5px;}QPushButton:hover{background:#4169E1;}\QPushButton{font-family:'Arial';color:#FFFFFF; padding:6px}''')  # hover为鼠标悬浮样式
1
2
3
4
5
6
7
8
9

接下来再将部件加入布局中，并为它们设置相邻距离

self.mainLayout.addWidget(self.nameEd1)self.mainLayout.addWidget(self.nameEd2)self.mainLayout.addWidget(self.btnLG)self.mainLayout.addWidget(self.btnRG)self.mainLayout.setSpacing(60)
1
2
3
4
5

最后再为他们绑定鼠标单击事件，即完成了登录界面的设计

self.btnLG.clicked.connect(self.login)self.btnRG.clicked.connect(self.register)
1
2

最终大概效果如下：

二、主界面

首先进行UI设计，以方便界面布局设置，界面设计大致如下

之后就可以进行GUI编程

同样首先设置窗口大小，名称，图标，并对窗口进行部分设置

self.setFixedSize(960, 700)self.setWindowTitle('Ken-Chy')self.setWindowIcon(QIcon('favicon.ico'))self.setWindowOpacity(0.9)  # 设置窗口透明度self.setAttribute(QtCore.Qt.WA_TranslucentBackground)  # 设置窗口背景透明# self.setWindowFlags(QtCore.Qt.FramelessWindowHint) # 隐藏边框
1
2
3
4
5
6

随后创建窗口部件并设置布局，由UI图我们首先可以将界面分为左右两个部件，并为它们设置Name标示，随后将左右两侧的部件加入主部件中，并为他们设置位置以及所占大小

self.main_widget = QtWidgets.QWidget()  # 创建窗口主部件self.main_layout = QtWidgets.QGridLayout()  # 创建主部件的网格布局self.main_widget.setLayout(self.main_layout)  # 设置窗口主部件布局为网格布局self.left_widget = QtWidgets.QWidget()  # 创建左侧部件self.left_widget.setObjectName('left_widget')self.left_layout = QtWidgets.QGridLayout()  # 创建左侧部件的网格布局层self.left_widget.setLayout(self.left_layout)  # 设置左侧部件布局为网格self.right_widget = QtWidgets.QWidget()  # 创建右侧部件self.right_widget.setObjectName('right_widget')self.right_layout = QtWidgets.QGridLayout()self.right_widget.setLayout(self.right_layout)  # 设置右侧部件布局为网格self.setCentralWidget(self.main_widget)  # 设置窗口主部件self.main_layout.addWidget(self.left_widget, 0, 0, 12, 2)  # 左侧部件在第0行第0列，占8行3列self.main_layout.addWidget(self.right_widget, 0, 2, 12, 10)  # 右侧部件在第0行第3列，占8行9列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

观察左侧部件，我们可以看到主要分为三个标签以及九个按钮

创建三个标签并为它们设置Name标示，随后创建九个按钮，同样设置Name标识，并在左侧布局中加入这些标签和按钮

self.left_label_1 = QtWidgets.QPushButton("每日推荐")self.left_label_1.setObjectName('left_label')self.left_label_2 = QtWidgets.QPushButton("我的音乐")self.left_label_2.setObjectName('left_label')self.left_label_3 = QtWidgets.QPushButton("联系与帮助")self.left_label_3.setObjectName('left_label')self.left_button_1 = QtWidgets.QPushButton(qtawesome.icon('fa.music', color='white'), "热门歌曲")self.left_button_1.setObjectName('left_button')self.left_button_2 = QtWidgets.QPushButton(qtawesome.icon('fa.sellsy', color='white'), "热门歌手")self.left_button_2.setObjectName('left_button')self.left_button_3 = QtWidgets.QPushButton(qtawesome.icon('fa.film', color='white'), "热门MV")self.left_button_3.setObjectName('left_button')self.left_button_4 = QtWidgets.QPushButton(qtawesome.icon('fa.home', color='white'), "我的下载")self.left_button_4.setObjectName('left_button')self.left_button_5 = QtWidgets.QPushButton(qtawesome.icon('fa.download', color='white'), "我的收藏")self.left_button_5.setObjectName('left_button')self.left_button_6 = QtWidgets.QPushButton(qtawesome.icon('fa.heart', color='white'), "切换账号")self.left_button_6.setObjectName('left_button')self.left_button_7 = QtWidgets.QPushButton(qtawesome.icon('fa.comment', color='white'), "开发流程")self.left_button_7.setObjectName('left_button')self.left_button_8 = QtWidgets.QPushButton(qtawesome.icon('fa.star', color='white'), "作者博客")self.left_button_8.setObjectName('left_button')self.left_button_9 = QtWidgets.QPushButton(qtawesome.icon('fa.question', color='white'), "联系作者")self.left_button_9.setObjectName('left_button')self.left_layout.addWidget(self.left_label_1, 1, 0, 1, 3)self.left_layout.addWidget(self.left_button_1, 2, 0, 1, 3)self.left_layout.addWidget(self.left_button_2, 3, 0, 1, 3)self.left_layout.addWidget(self.left_button_3, 4, 0, 1, 3)self.left_layout.addWidget(self.left_label_2, 5, 0, 1, 3)self.left_layout.addWidget(self.left_button_4, 6, 0, 1, 3)self.left_layout.addWidget(self.left_button_5, 7, 0, 1, 3)self.left_layout.addWidget(self.left_button_6, 8, 0, 1, 3)self.left_layout.addWidget(self.left_label_3, 9, 0, 1, 3)self.left_layout.addWidget(self.left_button_7, 10, 0, 1, 3)self.left_layout.addWidget(self.left_button_8, 11, 0, 1, 3)self.left_layout.addWidget(self.left_button_9, 12, 0, 1, 3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

设置完左侧之后我们看右边的布局

最顶部是搜索框，实则就是一个输入的控件

我们首先为该位置创建一个部件并设置为网格布局

随后创建输入控件以及图标并加入到搜索框布局中

最后再将搜索框部件加入右侧布局中

self.right_bar_widget = QtWidgets.QWidget()  # 右侧顶部搜索框部件self.right_bar_layout = QtWidgets.QGridLayout()  # 右侧顶部搜索框网格布局self.right_bar_widget.setLayout(self.right_bar_layout)self.search_icon = QtWidgets.QLabel(chr(0xf002) + ' ' + '搜索  ')self.search_icon.setFont(qtawesome.font('fa', 20))self.right_bar_widget_search_input = QtWidgets.QLineEdit()self.right_bar_widget_search_input.setPlaceholderText("输入歌手、歌曲或用户，回车进行搜索")self.right_bar_layout.addWidget(self.search_icon, 0, 0, 1, 1)self.right_bar_layout.addWidget(self.right_bar_widget_search_input, 0, 1, 1, 8)self.right_layout.addWidget(self.right_bar_widget, 0, 0, 1, 9)
1
2
3
4
5
6
7
8
9
10
11
12

接下来下面左侧是搜索结果的展示，右边是操作选项

搜索结果因为是可以点击播放的，所以与操作选项实则都是一些按钮

那么我们首先先创建两个“搜索结果”和“执行操作”两个标签

随后再创建左侧十个按钮（搜索结果），右侧六个按钮（执行操作）

并将它们加入布局即可完成

搜索结果按钮创建大致如下，可通过参数传入字符串设置按钮文字

self.search_result_button_1 = QtWidgets.QPushButton()
1

执行操作按钮创建大致如下

self.operator_button_1 = QtWidgets.QToolButton()self.operator_button_1.setText("导出所有歌曲的url地址")self.operator_button_1.setIcon(qtawesome.icon('fa.download', color='red'))  # 设置按钮图标self.operator_button_1.setIconSize(QtCore.QSize(50, 50))  # 设置按钮大小self.operator_button_1.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)  # 设置按钮与文字展示方式
1
2
3
4
5

最后是最下面的进度条以及上一首下一首和播放按钮

self.right_process_bar = QtWidgets.QProgressBar()  # 播放进度部件self.process_value = 0  # 设置播放值（0为还未播放）self.right_process_bar.setValue(self.process_value)  # 设置进度条所处位置self.right_process_bar.setFixedHeight(3)  # 设置进度条高度self.right_process_bar.setTextVisible(False)  # 不显示进度条文字self.console_button_1 = QtWidgets.QPushButton(qtawesome.icon('fa.backward', color='#F76677'), "")self.console_button_2 = QtWidgets.QPushButton(qtawesome.icon('fa.forward', color='#F76677'), "")self.console_button_3 = QtWidgets.QPushButton(qtawesome.icon('fa.play', color='#F76677', font=18), "")self.console_button_3.setIconSize(QtCore.QSize(30, 30))
1
2
3
4
5
6
7
8
9
10

随后同上将他们加入布局中

接着设置控件间距，并通过Name标识为他们设置样式，如

self.main_layout.setSpacing(0)self.left_widget.setStyleSheet("\    QPushButton{border:none;color:white;}\    QPushButton#left_label{\        border:none;\        border-bottom:1px solid white;\        font-size:18px;\        font-weight:700;\        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\    }\    QPushButton#left_button:hover{border-left:4px solid red;font-weight:700;}\    QWidget#left_widget{\        background:gray;\        border-top:1px solid white;\        border-bottom:1px solid white;\        border-left:1px solid white;\        border-top-left-radius:10px;\        border-bottom-left-radius:10px;\    }")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

最后再为它们绑定鼠标事件即大功告成！

self.right_bar_widget_search_input.returnPressed.connect(            lambda: self.search(self.right_bar_widget_search_input.text()))self.search_result_button_1.clicked.connect(lambda: self.play_music(0))self.search_result_button_2.clicked.connect(lambda: self.play_music(1))self.search_result_button_3.clicked.connect(lambda: self.play_music(2))self.search_result_button_4.clicked.connect(lambda: self.play_music(3))self.search_result_button_5.clicked.connect(lambda: self.play_music(4))self.search_result_button_6.clicked.connect(lambda: self.play_music(5))self.search_result_button_7.clicked.connect(lambda: self.play_music(6))self.search_result_button_8.clicked.connect(lambda: self.play_music(7))self.search_result_button_9.clicked.connect(lambda: self.play_music(8))self.search_result_button_10.clicked.connect(lambda: self.play_music(9))self.console_button_1.clicked.connect(self.pre_music)self.console_button_3.clicked.connect(lambda: self.play_music_by_button())self.console_button_2.clicked.connect(self.next_music)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15