使用Python+Flask开发桌面应用的新选择-flaskwebgui

Python 专栏收录该内容
61 篇文章 2 订阅

前言

之前分别用过了eel, pywebview进行桌面应用开发, 但是都有不太理想的地方, eel没有对flask的原生支持, 而pywebview虽然可以直接将flask的实例对象进行传递, 用起来也挺方便, 不过在调用浏览器引擎方面有点难受, 要么用cef, 就得带进去一大堆依赖, 如果用pyinstaller打包后还会出现各种跑不起来的坑, 要么就是用IE内核, 那简直要了亲命的, 还不能指定调用外部的Chrome浏览器进行渲染, 很是尴尬…要是能有一个轮子结合eelpywebview的优点, 可以直接用flask+Chrome跑的话那就完美了, 嘿嘿~还真让我给翻出来了: flaskwebgui, 下面开始实例记录一个小demo

官网

https://github.com/ClimenteA/flaskwebgui

是个19年开始做的项目, 更新还是蛮频繁的, 感谢作者ClimenteA

pip直接安装就行

pip install flaskwebgui

效果演示

auto-py-to-exe打包后扔到纯净的Win7虚拟机中进行测试, 除了需要单独安装一下Chrome以外, 不需要任何运行环境即可直接跑起来.
在这里插入图片描述

项目文件结构

就是正常的一个flask应用的结构, 这里我用了CDN, 没有加static文件夹

.
├── main.py				# 入口程序
└── templates
    └── index.html		# 页面模板

main.py代码

from flask import Flask, render_template
from flaskwebgui import FlaskUI

# 正常实例化flask对象
app = Flask(__name__)
# 将app对象传入FlaskUI的构造函数中, 并设置要打开的窗口尺寸
ui = FlaskUI(app, width=800, height=600)


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
	# 注意这里调用的是ui的run
    ui.run()

index.html代码

纯前端的代码, 其实没啥好贴的了, 从layui文档里面抄了一段后台模板测试下. 主要就是一个需要注意的地方, 记得设置页面的语言<html lang="zh">, 否则调用Chrome的时候会提示是否需要进行翻译, 比较讨厌.

<!DOCTYPE html>
<html lang="zh">    <!--注意设置语言, 否则调用Chrome打开会出现是否翻译的提示-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flaskwebgui演示程序</title>    <!--这里将会是打开的Chrome标题-->
</head>

<body>
    <div class="layui-layout layui-layout-admin">
    中间省略了, 没啥参考价值
    </div>
</body>
</html>

打包成EXE

这里还是用auto-py-to-exe, 比手工配置pyinstaller更方便, ps: 这货是eel写的

pip install auto-py-to-exe
auto-py-to-exe

注意把templates文件夹添加到打包的选项里就行
在这里插入图片描述
默认参数打包后的文件夹大小22MB多点
在这里插入图片描述
开UPX压缩试试:
在这里插入图片描述
直接干掉一半大小, 变成10MB了, 哇哈哈哈哈
在这里插入图片描述
然而…启动upx压缩后的程序报错:
在这里插入图片描述
在这里插入图片描述
本着这种问题我肯定不会是第一个发现的原则, 果然在stackoverflow上找到了病友:
https://stackoverflow.com/questions/38811966/error-when-creating-executable-file-with-pyinstaller

upx压缩的时候把VCRUNTIME140.dll给干残了, 单独设置一下不压缩这个文件, 注意上面设置的--upx-dir参数不变, 额外添加手动参数: --upx-exclude=vcruntime140.dll, 这样完整的命令:

pyinstaller --noconfirm --onedir --windowed --upx-dir "D:/tools/upx-3.96-win64" --add-data "C:/Users/Lian/Desktop/flaskgui/templates;templates/" --upx-exclude=vcruntime140.dll "C:/Users/Lian/Desktop/flaskgui/main.py"

再打包, 文件夹就大了0.1MB而已, 这次运行正常! 整个文件夹再打个zip, 只有9MB了, 好吧, 承认是我强迫症犯了…
在这里插入图片描述
进行应用分发的时候可以直接把这个压缩包+Chrome的standalone安装包扔给用户, 先装Chrome, 然后再解压执行main.exe就可以了.

结束语

这么一来的话, Chrome居然变成了运行环境RUMTIME, 不过相对于之前用.Net Framework做Winform类的桌面应用而言, 这种方式算是完美结合了WEB技术出炫酷的UI界面+Python各种轮子快速实现业务逻辑的优势, 当然缺点嘛, 可能就是第一次启动程序调用Chrome的时候会有点略慢, 不过关掉后再启动就挺快了.

BUG处理

这貌似是当前版本存在的bug, 就是在关闭浏览器之后, 后台的flask进程并没有自动退出, 看了下GitHub上的issue, 果然我又不是第一个哈哈哈哈:

https://github.com/ClimenteA/flaskwebgui/issues/58

根据热心网友提出的方案, 改一下flaskwebgui.py源代码313行的while True:开始的内容, 加一层try except来捕获异常强制退出flask就行了, 修改后的这部分代码:


        while True:
            try:	# 增加的内容
                gui_running = psutil.Process(
                    self.BROWSER_PROCESS.pid).is_running()
                gui_memory_usage = psutil.Process(
                    self.BROWSER_PROCESS.pid).memory_percent()

                if (
                    gui_running == False
                    or
                    gui_memory_usage == 0
                ):
                    break

                time.sleep(5)
            except Exception as e:	# 增加的内容
                logging.info('Forced Shutdown Browser Closed')
                break

        if isfunction(self.on_exit):
            logging.info(f"Executing {self.on_exit.__name__} function...")
            self.on_exit()
        else:
            logging.info("No 'on_exit' function provided.")

        logging.info("Closing connections...")
        FlaskUI.kill_pids_by_ports(self.port)

估计后续的更新可能会修复这个bug吧, 可以跟进一下这个项目了, 真的很不错!

更新: 使用pyinstaller打包为单个EXE文件需要注意的问题

又尝试了一下在auto-py-to-exe中打包成单个可执行文件, 对于额外引入的templates文件夹, 需要在主程序中修改一下访问路径的逻辑, 不能直接用默认的, 看代码吧:

import os
import sys
from flask import Flask, render_template
from flaskwebgui import FlaskUI

# 使用pyinstaller打包成单文件需要处理路径问题
app_path = ''
if hasattr(sys, '_MEIPASS'):	# 如果是单个EXE文件执行的时候sys中会存在这个_MEIPASS变量作为当前的工作根路径
    app_path = os.path.join(sys._MEIPASS)

# 拼接一下获得模板文件夹所在的绝对路径, 这样写不会影响打包前对源代码的调试
template_folder = os.path.join(app_path, 'templates')

# 实例化Flask对象的时候就得指定一下template_folder的位置了, static文件夹同理.
app = Flask(__name__, template_folder=template_folder)

附上打包成单个EXE文件后的运行效果, 只有9MB哦! 估计是用CDN的原因, 启动的前两秒空白等待了一会儿, 还是把静态资源打包到程序里面比较好.
在这里插入图片描述

展开阅读全文
打赏
文章很值,打赏犒劳作者一下
相关推荐
<p style="background:white;"> <span style="font-family:'微软雅黑',sans-serif;color:#313d54;">PyTorch</span><span style="font-family:'微软雅黑',sans-serif;color:#313d54;">版的<span>YOLOv5</span>是轻量而高性能的实时目标检测方法。利用<span>YOLOv5</span>训练完自己的数据集后,如何向大众展示并提供落地的服务呢?<span> </span></span> </p> <p style="background:white;">   </p> <p style="background:white;"> <span style="font-family:'微软雅黑',sans-serif;color:#313d54;">本课程将提供相应的解决方案,具体讲述如何使用<span>Web</span>应用程序框架<span>Flask</span>进行<span>YOLOv5</span>的<span>Web</span>应用部署。用户可通过客户端浏览器上传图片,经服务器处理后返回图片检测数据并在浏览器中绘制检测结果。<span> </span></span> </p> <p style="background:white;">   </p> <p style="background:white;"> <span style="font-family:'微软雅黑',sans-serif;color:#313d54;">本课程的<span>YOLOv5</span>使用<span>ultralytics/yolov5</span>,在</span><strong><span style="font-family:'Helvetica',sans-serif;color:#c00000;">Ubuntu</span></strong><span style="font-family:'微软雅黑',sans-serif;color:#313d54;">系统上做项目演示,并提供在</span><strong><span style="font-family:'微软雅黑',sans-serif;color:#c00000;">Windows</span></strong><span style="font-family:'微软雅黑',sans-serif;color:#313d54;">系统上的部署方式文档。</span> </p> <p style="background:white;"> <span style="font-family:'微软雅黑',sans-serif;color:#313d54;">本项目采取前后端分离的系统架构和开发方式,减少前后端的耦合。课程包括:<span>YOLOv5</span>的安装、 <span>Flask</span>的安装、<span>YOLOv5</span>的检测<span>API</span>接口python代码、 <span>Flask</span>的服务程序的python代码、前端<span>html</span>代码、<span>CSS</span>代码、<span>Javascript</span>代码、系统部署演示、生产系统部署建议等。</span> </p> <p style="background:white;"> <span style="font-family:'微软雅黑',sans-serif;color:#313d54;"> </span> </p> <p style="margin-left:0cm;"> 本人推出了有关YOLOv5目标检测的系列课程。请持续关注该系列的其它视频课程,包括: </p> <p> 《YOLOv5(PyTorch)目标检测实战:训练自己的数据集》 </p> <p> Ubuntu系统 <strong><a href="https://edu.csdn.net/course/detail/30793"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/30793</span></a></strong> </p> <p> Windows系统 <strong><a href="https://edu.csdn.net/course/detail/30923"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/30923</span></a></strong> </p> <p> 《YOLOv5(PyTorch)目标检测:原理与源码解析》<strong><a href="https://edu.csdn.net/course/detail/31428"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/31428</span></a></strong> </p> <p> 《YOLOv5(PyTorch)目标检测实战:Flask Web部署》<strong><a href="https://edu.csdn.net/course/detail/31087"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/31087</span></a></strong> </p> <p> 《YOLOv5(PyTorch)目标检测实战:TensorRT加速部署》<span style="background-color:#ffffff;"><strong><a href="https://edu.csdn.net/course/detail/32303"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/32303</span></a></strong></span> </p> <p> <img src="https://img-bss.csdnimg.cn/202010271340349334.jpg" alt="yolov5部署演示" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202010271340598046.jpg" alt="系统架构" /> </p>
<p style="font-size:16px;"> <span style="font-size:18px;"><span style="background-color:#FFFFFF;">Python 数据分析+pyecharts 可视化 + Flask Web端服务 + 2大真实项目 手把手实战教程.</span></span> </p> <p style="font-size:16px;"> Python数据分析课程以Python为核心工具,结合其工具包pyecharts+开发IDEA pycharm + web 框架Flask。课程以案例为中心,结合案例讲解让同学们更清晰的掌握每一个知识点的应用与工作流程。 </p> <p style="font-size:16px;"> <strong>2大项目案例: 重点讲解 开发架构 + 部署上线流程,手把手实战教学。 </strong> </p> <p style="font-size:16px;"> 1. 开发架构 </p> <p style="font-size:16px;"> (1)基于PyCharm + Flask + Echarts + Python+Pandas 组合进行数据分析全栈开发 </p> <p style="font-size:16px;"> (2)PyCharm: 项目开发的IDEA; </p> <p style="font-size:16px;"> (3)Flask:作为WEB框架,主要连接后端服务数据。主要演示: 前后端分离架构 + 模板直接渲染架构; </p> <p style="font-size:16px;"> (4)Echarts: 这里使用pyecharts 作为可视化数据展示; </p> <p style="font-size:16px;"> (5)Python: 作为后端数据生成的语言; </p> <p style="font-size:16px;"> (6)Pandas: 主要作为数据分析库; </p> <p style="font-size:16px;"> 2 部署线上服务案例 </p> <p style="font-size:16px;"> (1)资讯类项目-基于Flask 模板渲染 词云; </p> <p style="font-size:16px;"> (2)人口统计项目-基于Flask 前后端分离 Line 和 Bar 组合 数据统计; </p> <p style="font-size:16px;"> <strong>课程特色</strong> </p> <p style="font-size:16px;"> 课程风格通俗易懂 </p> <p style="font-size:16px;"> 案例内容持续更 </p> <p style="font-size:16px;"> 简单易懂,接地气的案例 </p> <p style="font-size:16px;"> 有效,提供所有数据和代码 </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291440447128.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291440543352.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291441085943.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291441198368.png" alt="" /> </p>
<p> <span style="font-size:13.3333px;">        Web网站发展至今,特别是服务器端,涉及的知识非常广泛,这对程序员的要求会越来越高。如果采用成熟、稳健的框架,那么一些诸 如安全性、数据流控制等类型的基础性工作都可以让框架来处理,而程序开发人员则可以把更多的精力放在具体业务逻辑功能的实现和优化上。</span><br /><span style="font-size:13.3333px;">        使用Flask框架的优势有以下几点:</span><br /><span style="font-size:13.3333px;">        可以大大降低开发难度,提高开发效率,让快速、高效的Web开发成为可能。</span><br /><span style="font-size:13.3333px;">        可以带来系统稳定性和可扩展性的提升。Flask自由、灵活、可扩展性强、第三方库的选择面广,用第三方库可以实现自己想要的功能,而且很多第三方库还可以定制与裁减。</span><br /><span style="font-size:13.3333px;">       对于初学者来说简单易学,入门门槛很低,即便没有多少Web开发经验,也能很快做出网站,大大节约了初学者的学习成本。</span><br /></p><p style="font-size:13.3333px;">       综上所述,Flask 是一个用Python语言编写的Web微框架,可以让开发人员快速开发各种Web应用 </p> <p style="font-size:13.3333px;">        课程预计每周更两节 </p> <p> <img src="https://img-bss.csdn.net/201912160435192734.jpg" alt="" /></p>
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页

打赏

DexterLien

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值