用Python做一个安全攻防工具：端口嗅探器（3）

传送门

本系列原创博文传送门：

用Python做一个安全攻防工具：端口嗅探器（1）

用Python做一个安全攻防工具：端口嗅探器（2）

用Python做一个安全攻防工具：端口嗅探器（3）

用Python做一个安全攻防工具：端口嗅探器（4）

用Python做一个安全攻防工具：端口嗅探器（5）

用Python做一个安全攻防工具：端口嗅探器（6）

用Python做一个安全攻防工具：端口嗅探器（7）

用Python做一个安全攻防工具：端口嗅探器（8）

用Python做一个安全攻防工具：端口嗅探器（9）

 

阶段目标

这一篇开始使用PySide2来搭建端口嗅探器的GUI。

说实话，我有点小兴奋，因为又是一个新的领域。花了一个小时设计了一个用户界面，如下：

这算是我们的阶段性目标，就是这系列博文看完的时候，需要实现大概这个样子的小工具。

好了，接下来摩拳擦掌开始吧！

PySide2安装

第一步，自然是先安装PySide2。

普通安装

pip install pyside2

使用清华源安装

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyside2

这个whl的大小超过130m，建议使用第二种安装方式。

但博主在实验过程中，发现虽然下载速度很快，但会经常下载失败，所以复制了whl的下载地址：

https://pypi.tuna.tsinghua.edu.cn/packages/81/73/830023aa8f06d9b04bf45146fd95f1a0f8644f196713fe98bc678e35ab6c/PySide2-5.15.2-5.15.2-cp35.cp36.cp37.cp38.cp39-none-win_amd64.whl

使用其他方式下载whl，再用pip安装。

安装完之后，有一个提示warning，说到了pyside2-designer，去site-package里找了下，在pyside2目录下找到了执行文件。

不过为了熟悉里面的类和方法，暂时先不用ui编辑器设计窗体，直接用代码实现。

搭建窗体

在项目目录下新建一个python文件：

开始编写代码，就像以前学过的vue和django，在最外面是一个app。

# coding=utf-8

from PySide2.QtWidgets import QApplication  # 引入模块

app = QApplication([])     # 创建app


app.exec_()    # 启动app

执行了下，啥都没有，但是app启动了，就不会自己结束，手动结束程序进程，继续编辑代码。

新建一个窗体：

# coding=utf-8

from PySide2.QtWidgets import QApplication, QMainWindow  # 引入模块

app = QApplication([])     # 创建app
window = QMainWindow()    # 创建主窗体
window.resize(600, 480)    # 主窗体尺寸

window.show()    # 显示窗体


app.exec_()    # 启动app

运行，出现一个空白窗体：

看一下窗体上的元素，先不管布局用的frame（tkinter里是frame），一共有三个单行文本输入框（QLineEdit），三个按钮（QPushButton），一个标签（QLabel），一个文本编辑框（QPlainBoxEdit）,一个状态条（QStatusBar）。

先从最上面的三个单行文本输入框开始，顺便把窗体的名称设置一下：

# coding=utf-8

from PySide2.QtWidgets import QApplication, QMainWindow, QLineEdit  # 引入模块

app = QApplication([])     # 创建app
window = QMainWindow()    # 创建主窗体
window.resize(600, 480)    # 主窗体尺寸
window.setWindowTitle('端口嗅探器 v1.0')  # 设置窗口名称


ip_line_edit = QLineEdit(window)
ip_line_edit.setPlaceholderText('输入ip或者网址')
ip_line_edit.resize(180, 22)
ip_line_edit.move(25, 10)

thread_line_edit = QLineEdit(window)
thread_line_edit.setText('500')
thread_line_edit.resize(40, 22)
thread_line_edit.move(260, 10)

port_line_edit = QLineEdit(window)
port_line_edit.setText('0~65535')
port_line_edit.resize(55, 22)
port_line_edit.move(325, 10)


window.show()    # 显示窗体


app.exec_()    # 启动app

执行一下，看到了新的窗体：

然后加上一个标签和一个文本编辑框：

# coding=utf-8

from PySide2.QtWidgets import QApplication, QMainWindow, QLineEdit, QLabel, QPlainTextEdit  # 引入模块

app = QApplication([])     # 创建app

window = QMainWindow()    # 创建主窗体
window.resize(600, 480)    # 主窗体尺寸
window.setWindowTitle('端口嗅探器 v1.0')  # 窗体名称

ip_line_edit = QLineEdit(window)
ip_line_edit.setPlaceholderText('输入ip或者网址')
ip_line_edit.resize(180, 22)
ip_line_edit.move(25, 10)

thread_line_edit = QLineEdit(window)
thread_line_edit.setText('500')
thread_line_edit.resize(40, 22)
thread_line_edit.move(260, 10)

port_line_edit = QLineEdit(window)
port_line_edit.setText('0~65535')
port_line_edit.resize(55, 22)
port_line_edit.move(325, 10)

explain_label = QLabel(window)
explain_label.setText('端口开放情况')
explain_label.move(25, 40)

report_box_edit = QPlainTextEdit(window)
report_box_edit.move(25, 70)
report_box_edit.resize(400, 300)


window.show()    # 显示窗体


app.exec_()    # 启动app

运行一下，得到新窗口：

然后加上剩下的四个按钮，和一个状态条：

# coding=utf-8

from PySide2.QtWidgets import QApplication, QMainWindow, QLineEdit, QLabel, QPlainTextEdit, QPushButton, QStatusBar  # 引入模块

app = QApplication([])     # 创建app

window = QMainWindow()    # 创建主窗体
window.resize(600, 480)    # 主窗体尺寸
window.setWindowTitle('端口嗅探器 v1.0')  # 窗体名称

ip_line_edit = QLineEdit(window)
ip_line_edit.setPlaceholderText('输入ip或者网址')
ip_line_edit.resize(180, 22)
ip_line_edit.move(25, 10)

thread_line_edit = QLineEdit(window)
thread_line_edit.setText('500')
thread_line_edit.resize(40, 22)
thread_line_edit.move(260, 10)

port_line_edit = QLineEdit(window)
port_line_edit.setText('0~65535')
port_line_edit.resize(55, 22)
port_line_edit.move(325, 10)

explain_label = QLabel(window)
explain_label.setText('端口开放情况')
explain_label.move(25, 40)

report_box_edit = QPlainTextEdit(window)
report_box_edit.move(25, 70)
report_box_edit.resize(400, 300)

start_btn = QPushButton(window)
start_btn.setText('启动')
start_btn.move(450, 10)
start_btn.resize(80, 22)

copy_all_btn = QPushButton(window)
copy_all_btn.setText('复制全文')
copy_all_btn.move(450, 70)
copy_all_btn.resize(80, 22)

copy_ori_btn = QPushButton(window)
copy_ori_btn.setText('复制原文')
copy_ori_btn.move(450, 100)
copy_ori_btn.resize(80, 22)

clear_btn = QPushButton(window)
clear_btn.setText('清空')
clear_btn.move(450, 150)
clear_btn.resize(80, 22)

status_bar = QStatusBar(window)
status_bar.move(0, 450)

bar_label = QLabel(status_bar)
bar_label.setText('准备就绪')
bar_label.move(5, 5)

window.show()    # 显示窗体


app.exec_()    # 启动app

运行后得到窗体：

好了，窗体用代码大致实现好了。

后面会对这个窗体UI进行细微的调整，并加入PySide2的信号槽slot，将窗体和我们的核心逻辑联系起来。