分享一個讓開發(fā)交互式 Web app 超級簡單的工具。不會 HTML，CSS，JAVASCRIPT 也沒事。交互式 Web app 非常實用，比如說做一個問卷調(diào)查頁面、一個投票系統(tǒng)、一個信息收集表單，上傳文件等等，因為網(wǎng)頁是可視化的，因此還可以作為一個沒有服務(wù)端的圖片界面應(yīng)用程序而使用。

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

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

?上面的頁面，也就僅僅用了這 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)頁輸出想要的信息也是非常簡單，代碼如下，函數(shù)功能已經(jīng)做了相關(guān)注釋，你很容易看懂：

from pywebio.output import * from pywebio import session# 網(wǎng)頁上顯示純文本 put_text("Hello friend!")# 網(wǎng)頁上顯示表格 put_table([['Object', 'Unit'],['A', '55'],['B', '73'], ])# 網(wǎng)頁上顯示 MarkDown put_markdown('~~PyWebIO~~')# 網(wǎng)頁上顯示下載文件的鏈接 put_file('output_file.txt', b'You can put anything here')# 網(wǎng)頁上顯示圖片 put_image(open('python_logo.png', 'rb').read())# 網(wǎng)頁上顯示彈窗 popup('popup title', 'popup text content')# 保持回話是打開狀態(tài)，否則頁面顯示完畢程序退出 session.hold()

???????????????????????????????????????????????????????

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

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

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

from pywebio import start_server from pywebio.input import input, FLOAT from pywebio.output import put_textdef bmi():height = input("請輸入你的身高(cm)：", type=FLOAT)weight = input("請輸入你的體重(kg)：", type=FLOAT)BMI = weight / (height / 100) ** 2top_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))breakif __name__ == '__main__':start_server(bmi, port=80)

效果：

?

更多示例：

基本 demo

• 聊天室[1]: 和當前所有在線的人聊天 (不到 90 行代碼實現(xiàn))

• Markdown 實時預(yù)覽[2]: 可以實時預(yù)覽的在線 Markdown 編輯器 (不到 40 行代碼實現(xiàn))

• 在線五子棋游戲[3]: 多人協(xié)作對戰(zhàn)的五子棋游戲 (不到 100 行代碼實現(xiàn))

• 輸入演示[4]: 演示 PyWebIO 輸入模塊的用法

• 輸出演示[5]: 演示 PyWebIO 輸出模塊的用法

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

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

• 使用 bokeh 進行數(shù)據(jù)可視化[6]

• 使用 plotly 進行數(shù)據(jù)可視化[7]

• 使用 pyecharts 創(chuàng)建基于 Echarts 的圖表[8]

• 使用 pyg2plot 創(chuàng)建基于 G2Plot 的圖表[9]

• 使用 cutecharts.py 創(chuàng)建卡通風格圖表[10]

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

PyWebIO 還可以方便地整合進現(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_handlerclass 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 即為上文計算BMI指數(shù)的函數(shù)])application.listen(port=80, address='localhost')tornado.ioloop.IOLoop.current().start()

與 Django 整合：

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

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

參考資料

[1]????????聊天室

[2]????????Markdown 實時預(yù)覽

[3]????????在線五子棋游戲

[4]????????輸入演示

[5]????????輸出演示

[6]? ? ? ??使用 bokeh 進行數(shù)據(jù)可視化

[7]????????使用 plotly 進行數(shù)據(jù)可視化

[8]????????使用 pyecharts 創(chuàng)建基于 Echarts 的圖表

[9]????????使用 pyg2plot 創(chuàng)建基于 G2Plot 的圖表

[10]? ? ? ?使用 cutecharts.py 創(chuàng)建卡通風格圖表

[11]????????文檔

[12]????????官方文檔

總結(jié)

以上是生活随笔為你收集整理的用Python写前端的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。