Skip to content

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

504字约2分钟

前后端

2021-10-15

项目结构

  • root
    • dist
      • css
      • fonts
      • img
      • js
        • favicon.ico
        • index.html
    • pyside_flask_desk
      • __init__.py
    • app.py
    • run_test.py
  1. dist: 文件夹为前端内容, 其中包括前端的 HTML, CSS, JS 等内容
  2. pyside_flask_desk: 文件夹内 __init__.py 文件为创建 Qt 窗口, 并使用线程启动 Flask
  3. run_test.py: 为程序主入口

代码

程序主入口

run_test.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="钓鱼城", icon=root + "/dist/favicon.ico")

注意

其中 icon 的路径必须使用绝对路径, 相对路径无法加载.

创建 Qt 主窗口

__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):
        # flask app.run()
        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:关闭qtapp窗口时, 调用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_()

Flask 后端响应

app.py
from flask import Flask, render_template

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')

注意

其中 static_url_path='' 不可缺少, 是由于前端 HTML 中将资源加载的目录写死为根目录.

static_folder='dist', template_folder='dist' 根据具体项目的实际情况写 HTML, CSS 等文件在的文件夹即可.

该文件为 Flask 接口主文件.

最终效果

钓鱼城系统 Qt 版本首页
钓鱼城系统 Qt 版本首页

变更历史

最后更新于: 查看全部变更历史
  • docs: update docs

    于 2024/11/19
  • 整理图片和文章

    于 2024/11/7
  • 更改navbar

    于 2024/11/4
  • 整理文章代码格式

    于 2024/11/1
  • 升级主题+整理文章格式

    于 2024/11/1
  • 整理文章格式

    于 2024/10/29
  • update

    于 2024/10/17
  • 新增文字+CRLF全部替换为LF

    于 2024/10/17
  • 反序列化

    于 2024/9/30
  • 整理图片格式和名称(not finished)

    于 2024/9/30
  • 给予文件夹顺序

    于 2024/9/24
  • 调整博客分类+修改about-me.md

    于 2024/9/24
  • first commit

    于 2024/9/20

Keep It Simple