如何使用 Qt 和 Flask 开发一个本地应用？

约 449 字大约 2 分钟

前后端

2021-10-15

项目结构

root

dist# 文件夹内为前端内容，其中包括前端的 HTML, CSS, JS 等内容

css

fonts

img

favicon.ico

index.html

pyside_flask_desk

__init__.py# 创建 Qt 窗口，并使用线程启动 Flask

app.py

run.py# 程序主入口

代码

Qt-Flask-App

root

run.py

pyside_flask_desk

__init__.py

app.py

root/run.py
# ! -*- coding: utf-8 -*-
import sys
import os
from app import *
from PySide2.QtCore import QFileInfo
from pyside_flask_desk import init_gui

sys.path.append (( os.path.dirname ( os.path.abspath ( os.path.dirname ( __file__ )) )) .replace ( "\\", "/" ))

if __name__ == '__main__':
    root = QFileInfo ( __file__ ) .absolutePath ( )
    init_gui ( app, port=5000, window_title="Qt-Flask-App", icon=root + "/dist/favicon.ico" ) # icon 的路径须使用绝对路径
root/pyside_flask_desk/__init__.py
import sys
from PySide2 import QtCore, QtWidgets, QtGui, QtWebEngineWidgets
import socket

class ApplicationThread ( QtCore.QThread ) :
    def __init__ ( self, application, port=5000 ) :
        super ( ApplicationThread, self ) .__init__ ( )
        self.application = application
        self.port = port

    def __del__ ( self ) :
        self.wait ( )

    def run ( self ) :
        self.application.run ( port=self.port, threaded=True )

class WebPage ( QtWebEngineWidgets.QWebEnginePage ) :
    def __init__ ( self, root_url ) :
        super ( WebPage, self ) .__init__ ( )
        self.root_url = root_url

    def home ( self ) :
        self.load ( QtCore.QUrl ( self.root_url ))

def init_gui ( application, icon, port, width=800, height=600,
             window_title="PyFladesk", argv=None ) :
    if argv is None:
        argv = sys.argv

    # 创建主窗口框架
    qtapp = QtWidgets.QApplication ( argv )

    # 线程启动 flask
    webapp = ApplicationThread ( application, port )
    webapp.start ( )
    # connect function: 关闭 qt app 窗口时， 调用 flask 的终止
    qtapp.aboutToQuit.connect ( webapp.terminate )

    # 创建主窗口， 并设置大小， 标题， icon
    window = QtWidgets.QMainWindow ( )
    window.resize ( width, height )
    window.setWindowTitle ( window_title )
    window.setWindowIcon ( QtGui.QIcon ( icon ))

    # 创建 WebEngineView 并套入主窗口
    webView = QtWebEngineWidgets.QWebEngineView ( window )
    window.setCentralWidget ( webView )

    # 通过 home ( ) 加载 url, 并将 page 放入 view
    page = WebPage ( 'http://localhost:{}'.format ( port ))
    page.home ( )
    webView.setPage ( page )

    # 显示窗口
    window.show ( )
    return qtapp.exec_ ( )
root/app.py
from flask import Flask, render_template

# 其中 static_url_path='' 不可缺少， 是由于前端 HTML 中将资源加载的目录写死为根目录
# static_folder='dist', template_folder='dist' 根据具体项目的实际情况写 HTML, CSS 等文件在的文件夹即可
# 该文件为 Flask 接口主文件

app = Flask ( __name__, static_url_path='', static_folder='dist', template_folder='dist' )

app.config['EXPLAIN_TEMPLATE_LOADING'] = True

# 路由
@app.route ( '/' )
def greet ( ) :
    return render_template ( 'index.html' )