今天分享一個(gè)讓開發(fā)交互式 Web app 超級(jí)簡(jiǎn)單的工具。不會(huì)?HTML，CSS，JAVASCRIPT 也沒事。

交互式 Web app 非常實(shí)用，比如說做一個(gè)問卷調(diào)查頁(yè)面、一個(gè)投票系統(tǒng)、一個(gè)信息收集表單，上傳文件等等，因?yàn)榫W(wǎng)頁(yè)是可視化的，因此還可以作為一個(gè)沒有服務(wù)端的圖片界面應(yīng)用程序而使用。

如果你有這樣的開發(fā)需求，那用 Python 真的是太簡(jiǎn)單了。

借助于 PyWebIO（pip install pywebio），你可以分分鐘實(shí)現(xiàn)網(wǎng)頁(yè)的信息錄入，可以看下面的動(dòng)圖：

上面的頁(yè)面，也就僅僅用了這 6 行代碼：

from?pywebio.input?import?*

input("This?is?a?simple?text?input")
select("This?is?a?drop?down?menu",?['Option1',?'Option2'])
checkbox("Multiple?Choices!",?options=["a",'b','c','d'])
radio("Select?any?one",?options=['1',?'2',?'3'])
textarea('Text?Area',?rows=3,?placeholder='Multiple?line?text?input')

要讓網(wǎng)頁(yè)輸出想要的信息也是非常簡(jiǎn)單，代碼如下，函數(shù)功能已經(jīng)做了相關(guān)注釋，你很容易看懂：

from?pywebio.output?import?*
from?pywebio?import?session

#?網(wǎng)頁(yè)上顯示純文本
put_text("Hello?friend!")

#?網(wǎng)頁(yè)上顯示表格
put_table([
????['Object',?'Unit'],
????['A',?'55'],
????['B',?'73'],
])

#?網(wǎng)頁(yè)上顯示?MarkDown
put_markdown('~~PyWebIO~~')

#?網(wǎng)頁(yè)上顯示下載文件的鏈接
put_file('output_file.txt',?b'You?can?put?anything?here')

#?網(wǎng)頁(yè)上顯示圖片
put_image(open('python_logo.png',?'rb').read())

#?網(wǎng)頁(yè)上顯示彈窗
popup('popup?title',?'popup?text?content')

#?保持回話是打開狀態(tài)，否則頁(yè)面顯示完畢程序退出
session.hold()

運(yùn)行的效果如下：

以上，幾行代碼就實(shí)現(xiàn)了一個(gè)帶有輸入輸出的 Web 應(yīng)用，是不是很神奇？

構(gòu)建基于瀏覽器的 GUI 程序

PyWebIO 提供了一系列命令式的交互函數(shù)來在瀏覽器上獲取用戶輸入和進(jìn)行輸出，將瀏覽器變成了一個(gè)“富文本終端”，可以用于構(gòu)建簡(jiǎn)單的 Web 應(yīng)用或基于瀏覽器的 GUI 應(yīng)用。

比如計(jì)算 BMI 指數(shù)的腳本：

from?pywebio?import?start_server
from?pywebio.input?import?input,?FLOAT
from?pywebio.output?import?put_text

def?bmi():
????height?=?input("請(qǐng)輸入你的身高(cm)：",?type=FLOAT)
????weight?=?input("請(qǐng)輸入你的體重(kg)：",?type=FLOAT)

????BMI?=?weight?/?(height?/?100)?**?2

????top_status?=?[(14.9,?'極瘦'),?(18.4,?'偏瘦'),
??????????????????(22.9,?'正常'),?(27.5,?'過重'),
??????????????????(40.0,?'肥胖'),?(float('inf'),?'非常肥胖')]

????for?top,?status?in?top_status:
????????if?BMI?<=?top:
????????????put_text('你的 BMI 值:?%.1f，身體狀態(tài)：%s'?%?(BMI,?status))
????????????break

if?__name__?==?'__main__':
????start_server(bmi,?port=80)

效果：

更多示例：

基本 demo

• 聊天室^[1]: 和當(dāng)前所有在線的人聊天 (不到 90 行代碼實(shí)現(xiàn))
• Markdown 實(shí)時(shí)預(yù)覽^[2]: 可以實(shí)時(shí)預(yù)覽的在線 Markdown 編輯器 (不到 40 行代碼實(shí)現(xiàn))
• 在線五子棋游戲^[3]: 多人協(xié)作對(duì)戰(zhàn)的五子棋游戲 (不到 100 行代碼實(shí)現(xiàn))
• 輸入演示^[4]: 演示 PyWebIO 輸入模塊的用法
• 輸出演示^[5]: 演示 PyWebIO 輸出模塊的用法

數(shù)據(jù)可視化 demo

PyWebIO 還支持使用第三方庫(kù)進(jìn)行數(shù)據(jù)可視化

• 使用 bokeh 進(jìn)行數(shù)據(jù)可視化^[6]
• 使用 plotly 進(jìn)行數(shù)據(jù)可視化^[7]
• 使用 pyecharts 創(chuàng)建基于 Echarts 的圖表^[8]
• 使用 pyg2plot 創(chuàng)建基于 G2Plot 的圖表^[9]
• 使用 cutecharts.py 創(chuàng)建卡通風(fēng)格圖表^[10]

數(shù)據(jù)可視化效果圖：

與現(xiàn)有框架集成

PyWebIO 還可以方便地整合進(jìn)現(xiàn)有的 Web 服務(wù)，讓你不需要編寫 HTML 和 JS 代碼，就可以構(gòu)建出具有良好可用性的應(yīng)用。目前支持與 Flask、Django、Tornado、aiohttp、FastAPI 框架集成。

比如說與 Tornado 應(yīng)用整合：

import?tornado.ioloop
import?tornado.web
from?pywebio.platform.tornado?import?webio_handler

class?MainHandler(tornado.web.RequestHandler):
????def?get(self):
????????self.write("Hello,?world")

if?__name__?==?"__main__":
????application?=?tornado.web.Application([
????????(r"/",?MainHandler),
????????(r"/bmi",?webio_handler(bmi)),??#?bmi?即為上文計(jì)算BMI指數(shù)的函數(shù)
????])
????application.listen(port=80,?address='localhost')
????tornado.ioloop.IOLoop.current().start()

與 Django 整合：

#?urls.py

from?django.urls?import?path
from?pywebio.platform.django?import?webio_view

#?`task_func`?is?PyWebIO?task?function
webio_view_func?=?webio_view(task_func)

urlpatterns?=?[
????path(r"tool",?webio_view_func),
]

與更多框架的整合見文檔^[11]

最后

PyWebIO 使用同步而不是基于回調(diào)的方式獲取輸入，代碼編寫邏輯更自然，非聲明式布局，布局方式簡(jiǎn)單高效，代碼侵入性小，舊腳本代碼僅需修改輸入輸出邏輯便可改造為 Web 服務(wù)，還可以整合到現(xiàn)有的主流 Web 框架。同時(shí)支持基于線程的執(zhí)行模型和基于協(xié)程的執(zhí)行模型，支持結(jié)合第三方庫(kù)實(shí)現(xiàn)數(shù)據(jù)可視化，更多知識(shí)請(qǐng)閱讀官方文檔^[12]

一句話，PyWebIO 讓交互式的 Web 開發(fā)變得更加簡(jiǎn)單，特別適合開發(fā)簡(jiǎn)單的 GUI 程序及數(shù)據(jù)可視化。

點(diǎn)擊查看更多 Web 開發(fā)文章

寫到這里，又來求贊，求在看了，如果覺得有用，歡迎分享給需要的朋友。也可以關(guān)注我，每天學(xué)習(xí)一個(gè)小技術(shù)。

參考資料