前言
在網(wǎng)上搜索 “python 做界面” ，得到的結(jié)果無非是 Tkinter 、 wxWidgets 、 Qt 、 Gtk 。它們要不然就是打包后太大，要不就是界面丑，要不就是代碼繁瑣。這些都是 GUI，那么 web 界面又如何？
我之前推薦過 streamlit，在簡單的場景下，它仍然值得推薦。但是 streamlit 實(shí)在不靈活，受限于它的核心機(jī)制，有些需求幾乎無法實(shí)現(xiàn)。用來做簡單的數(shù)據(jù)看板，還行。
streamlit 中加個(gè)邊框線都很復(fù)雜，無語
我需要一個(gè)靈活的web框架，可以做web服務(wù)的網(wǎng)站，也可以打包成獨(dú)立的 exe ?，F(xiàn)在找到了，就是 niecgui。
看看演示效果
后續(xù)我會(huì)發(fā)布更多關(guān)于 nicegui 的教程。其中涉及重要知識(shí)點(diǎn)的，會(huì)以文章形式發(fā)布(方便查找)。視頻主要演示實(shí)戰(zhàn)過程。
今天，我將用一個(gè)小例子，整體體驗(yàn)一下 nicegui 吸引我的特性：
- 上手 nicegui 最關(guān)鍵的知識(shí)點(diǎn)
- 打包獨(dú)立的 exe
我們需要安裝這些庫
pip install nicegui pyinstaller pandas openpyxl
不要忘記一鍵三連。你的點(diǎn)贊、收藏、關(guān)注，是我創(chuàng)作的動(dòng)力。
啟動(dòng)
創(chuàng)建 main.py 文件。簡單顯示一段文本作為開始。
- 行3: 所有的組件使用 ui.xxxx 創(chuàng)建
- 行6: 最后必需寫這句，啟動(dòng)服務(wù)
我們只需要簡單執(zhí)行 main.py 腳本即可。默認(rèn)情況下，你的瀏覽器會(huì)自動(dòng)打開了頁面。效果是這樣子：
注意幾點(diǎn)：
執(zhí)行腳本的控制臺(tái)，此時(shí)處于占用狀態(tài)。因?yàn)?nicegui 啟動(dòng)了一個(gè) web 服務(wù)。
如果你關(guān)掉了這個(gè)控制臺(tái)，那么服務(wù)就停止。
nicegui 使用的是 fastapi 作為 web 服務(wù)框架
此外，它會(huì)自動(dòng)監(jiān)控當(dāng)前目錄的 python 文件變化。因此我們可以直接修改代碼(保存文件)，瀏覽器的界面會(huì)自動(dòng)更新。
nicegui 內(nèi)置了許多組件可以使用，我們也沒必要每個(gè)組件去學(xué)習(xí)，需要的時(shí)候查文檔即可。
更多組件的使用技巧，可以查看我的后續(xù)視頻教程
今天重點(diǎn)是講解 nicegui 的關(guān)鍵知識(shí)點(diǎn)，我將用一個(gè)非常簡單的需求?？创a更直接：
界面是這樣子：
’ fill=‘%23FFFFFF’%3E%3Crect x=‘249’ y=‘126’ width=‘1’ height=‘1’%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
- 需求是，在輸入框中輸入execl 文件，點(diǎn)擊按鈕，下方顯示表格數(shù)據(jù)
布局
代碼與界面對比，我們可以看到 nicegui 的基本布局方式：
- 按代碼執(zhí)行創(chuàng)建組件的順序，界面上從上往下放置
很容易想到，它必定提供了一個(gè)能讓我們把組件橫向放置的組件，比如 ui.row:
布局并非學(xué)習(xí) nicegui 的核心知識(shí)點(diǎn)，現(xiàn)在，我們不需要關(guān)注布局
事件驅(qū)動(dòng)
nicegui 與市面上大多數(shù)界面框架一樣，使用事件驅(qū)動(dòng)流程推進(jìn)。在我們的需求中，點(diǎn)擊按鈕后，需要加載表格。因此需要定義按鈕的點(diǎn)擊事件。
’ fill=‘%23FFFFFF’%3E%3Crect x=‘249’ y=‘126’ width=‘1’ height=‘1’%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
- 行10-12：定義函數(shù)
- 行14：設(shè)置按鈕參數(shù) on_click = 自定義函數(shù)
- 此時(shí)點(diǎn)擊按鈕，自定義函數(shù)就會(huì)執(zhí)行
但是，我們該怎么在自定義函數(shù)中加入表格？所有基于事件驅(qū)動(dòng)的框架，都需要把組件提前放置好，就算當(dāng)前沒有合適的數(shù)據(jù)。
在 nicegui 中有三種官方的方式。建議大家耐心看完，我相信官方文檔都沒有講解得這么有邏輯。
我知道官方的方式都顯得挺繁瑣。放心，不是只能用官方的方式，我們可以自己打造更新方式。比如像 streamlit 一樣的"傻瓜模式"
方式一：直接放入空表格，在點(diǎn)擊按鈕的時(shí)候，重新填入表格數(shù)據(jù)
- 行19：在 row 組件下方創(chuàng)建 table 組件，這次我們需要在點(diǎn)擊事件中使用表格對象，因此定義變量 table
- 行11：使用 pandas 加載數(shù)據(jù)
- 行13-14：改寫表格的配置。nicegui 使用 aggrid，這是一個(gè)非常厲害的前端表格庫，可以配置出功能強(qiáng)大的表格。這里我們只是配置表頭和數(shù)據(jù)
- 行15：調(diào)用 update 函數(shù)，此時(shí)界面的表格才能刷新
界面是這樣子的：
這種方式需要一開始定義一個(gè)空表格，顯得不自然
方式二：使用容器
我們可以先定義一個(gè) row 容器作為表格的占位：
- 行19：定義 row，用變量"拿著" 對象
- 行13：清除容器
- 行14：把表格移到容器里面
這種方式也顯得不自然，因?yàn)楸砀竦脑O(shè)置(行13-14) 與表格定義的地方(行19) 被劃到不同的地方。每次都需要清除容器，比較麻煩。
方式三：定義刷新函數(shù)
官方為了解決上述方式的不協(xié)調(diào)，特意打造了一種刷新裝飾器。其實(shí)本質(zhì)上就是方式二的封裝：
’ fill=‘%23FFFFFF’%3E%3Crect x=‘249’ y=‘126’ width=‘1’ height=‘1’%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
- 行20-23：定義函數(shù)，并打上
ui.refreshable裝飾器 - 行25：執(zhí)行函數(shù)，相當(dāng)于方式二中使用容器占位
- 行12：由于目前的版本，refreshable 不能支持參數(shù)，我們只能定義全局變量
- 行15：調(diào)用 table box.refresh 函數(shù)，相當(dāng)于方式二中的，把容器內(nèi)容清空，然后重新執(zhí)行一次 table box 函數(shù)
實(shí)話說，這里官方設(shè)計(jì)不怎么樣。這種方式由于全局變量的影響，導(dǎo)致代碼更離散。
我已經(jīng)向官方提了 issue ，未來的版本可能會(huì)得到改善
是不是感覺與 streamlit 相比，要麻煩很多？確實(shí)是這樣子。不過，我們可以利用它的特性，打造出類似 streamlit 的運(yùn)行方式。下一節(jié)我就會(huì)詳細(xì)介紹
打包獨(dú)立應(yīng)用
nicegui 特別吸引我的一點(diǎn)是，它可以讓我們直接打包成單文件程序，可以在其他沒有安裝 python 的電腦上運(yùn)行。
首先，我們需要修改 main.py 的代碼：
- 在 ui.run 函數(shù)中，設(shè)置2個(gè)參數(shù)
- reload = False 是打包必需
- native = True ，程序啟動(dòng)時(shí)，就像普通的程序一樣有獨(dú)立的窗體。如果此參數(shù)為False，那么啟動(dòng)時(shí)就會(huì)觸發(fā)瀏覽器打開頁面
然后在同目錄下創(chuàng)建一個(gè) build.py 文件，代碼如下：
- 這與官方文檔有一些不一樣。安裝官方給的代碼，很容易把其他的python環(huán)境給打包進(jìn)來，導(dǎo)致最終文件非常大
- 建議大家使用 venv 創(chuàng)建虛擬環(huán)境進(jìn)行打包
然后在同目錄下創(chuàng)建一個(gè) build.py 文件，代碼如下：
[外鏈圖片轉(zhuǎn)存中…(img-8PdW7ayu-1689833136779)]文章來源：http://www.zghlxwxcb.cn/news/detail-642816.html
- 這與官方文檔有一些不一樣。安裝官方給的代碼，很容易把其他的python環(huán)境給打包進(jìn)來，導(dǎo)致最終文件非常大
- 建議大家使用 venv 創(chuàng)建虛擬環(huán)境進(jìn)行打包
接下來就是執(zhí)行這個(gè)文件即可。成功后，同目錄下會(huì)看到一個(gè) dist 的文件夾，里面就是打包后的 exe 文件。文章來源地址http://www.zghlxwxcb.cn/news/detail-642816.html
到了這里，關(guān)于python做界面，強(qiáng)烈推薦nicegui的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
