Skip to content

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

约 500 字大约 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

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 版本首页

贡献者

更新日志

2025/3/6 02:33
查看所有更新日志
  • 876bb-improve(docs): use chinese punctuation
  • 1289a-improve(docs): delete extra whitespace and blank lines
  • c2111-modify(docs): remanage folders and rename files
  • 96e66-docs: update docs
  • 8f99a-整理图片和文章
  • 0440f-更改navbar
  • 7b24f-整理文章代码格式
  • 71726-升级主题+整理文章格式
  • 978a9-整理文章格式
  • f86ee-update

Keep It Simple