終于，Python 也可以寫前端了
前端除了用js++css+html，還有沒有其它辦法？其實python也可以
#?1. 安裝與基本流程
安裝?PyWebIO?和其他的第三方庫一樣使用pip install PyWebIO就行，沒有任何難度，此處不做多講。
但是在正式講解一些常見的操作之前，我需要解釋一下，為什么說用?PyWebIO?寫頁面就像數(shù)據(jù)分析一樣。
回想一下我們使用Python進行數(shù)據(jù)分析的流程，啟動?Jupyter Notebook?導入數(shù)據(jù)，進行數(shù)據(jù)預覽、篩選、拆分合并等操作，得到自己滿意的結果，最后保存方便查看，更重要的是一行代碼一個結果，方便調(diào)試。
而使用?PyWebIO?開發(fā)頁面流程也是類似，我們不用過分關心CSS、JS等文件，全程我們只需要操作一個py腳本。
也不用關心數(shù)據(jù)庫配置、前后端交互，就像上面的數(shù)據(jù)分析一樣，創(chuàng)建一個空白頁面，然后一行代碼添加一部分內(nèi)容，內(nèi)容可以實時編譯輸出，甚至可以在?ipython?中進行開發(fā)??
與其說是第一個第三方庫，我更愿意稱它為一個?APP?，因為一行代碼對應一個操作，例如可以調(diào)用?put_text()?、?put_image()?、?put_table()?等函數(shù)輸出文本、圖片、表格等內(nèi)容到瀏覽器！
當然，之所以能這么便捷高效的開發(fā)頁面，基于別人封裝好的，高度精準定義好的功能，因此使用場景十分有限，例如問卷調(diào)查、表單填寫、數(shù)據(jù)報告展示等簡單的、個人使用的，且對樣式、特效等不做太高要求的場景。
關于它讓人不爽的地方，我會在后面的系列文章中進行講解，這不影響它確實是一個高效率的web開發(fā)庫，下面讓我對其常見操作進行講解。
#?2. 來！現(xiàn)在就開發(fā)頁面！
本節(jié)我將介紹使用?PyWebIO?開發(fā)頁面中的一些常見操作。
當然，我深知閱讀文檔的枯燥與痛苦，所以我將以從 0 實現(xiàn)下面的頁面為最終目標進行講解！
?插入文字
平時我們寫? ``html?會用類似標簽來控制標題，用
在?PyWebIO?中可以使用?markdown?來實現(xiàn)類似效果，語法是put_markdown()，將markdown添加進去，就會自動渲染
put_markdown(("""#????我的第一個頁面
????這是早起Python教我用Python寫的第一個頁面！
????寫點什么呢？到底寫一點什么好呢？好像真的沒什么好寫的，到底寫什么呢？
????我也不知道該寫點什么，?反正有點什么內(nèi)容就好了！"""),?lstrip=True)
效果如下
?插入圖片
靜態(tài)元素是一個網(wǎng)頁的重要組成部分，使用?PyWebIO?插入也是很簡單，使用?put_image()?可以插入圖片，代碼如下
put_image(open('iShot2021-10-29?17.14.08.png',?'rb').read())?
隨手用手機拍了一張圖片，效果如下??
?插入表格
傳統(tǒng)html使用table插入表格，這里使用類似方法
????put_table([
????['商品',?'價格'],
????['蘋果',?'5.5'],
????['香蕉',?'7'],
])
效果如下，后面如果表格內(nèi)容需要變化，可以寫個函數(shù)讓他動態(tài)更新
?插入代碼
插入代碼也是沒有問題的
展示效果如下
?交互 - 收集信息
上面都是常規(guī)的靜態(tài)元素添加，其他一些庫也能做到，甚至手寫原生html都行，下面來點更高級的！
首先是簡單的交互式輸入框，開發(fā)者已經(jīng)寫好了，調(diào)用命令也很簡單
name?=?input("你的名字是什么？?")
只用一行代碼，效果如下，當然這也意味著樣式什么的不支持修改
這里我們選擇將接收到消息打印出來，當然也是可以寫一個函數(shù)，將數(shù)據(jù)進行保存，這會在后面帶大家開發(fā)問卷系統(tǒng)講到
?交互 - 隱藏輸入
如果我們在開發(fā)問卷系統(tǒng)，有些選項希望用戶輸入時可以隱藏輸入，就像輸入密碼一樣
password?=?input("不想讓別人看見你的輸入？",?type=PASSWORD)
?交互 - 輸入代碼
通過交互輸入框接收代碼也是可以的，后面我講介紹如何讓代碼執(zhí)行，下面是可以實現(xiàn)的樣式
????code?=?textarea('Code?Edit',?code={
????'mode':?"python",??#?code?language
????'theme':?'darcula',??#??Codemirror?theme
},?value='import?something\n#?Write?your?python?code')
?交互 - 按鈕功能
其實上面說的存儲數(shù)據(jù)也好，執(zhí)行代碼也好，本質(zhì)上就是給這個提交按鈕添加一個功能，我們來實現(xiàn)最簡單的計算器。也就是點擊提交，計算兩數(shù)相加
????data?=?input_group("做個計算器",?[
????????input('第一個數(shù)字',?name='num1',?type=NUMBER),
????????input('第二個數(shù)字',?name='num2',?type=NUMBER)
????])
????put_text(f"計算結果是{data['num1']}?+?{data['num2']}?=?{data['num1']?+?data['num2']}??")
因為簡單，連函數(shù)都不用定義，直接?f-string?就解決了，如果需要復雜的功能，就可以定義一個函數(shù)，點擊按鈕就執(zhí)行這個函數(shù)
?如何渲染頁面
從上面的介紹不難看出，用?PyWebIO?就好比往一張白紙里面塞東西。
但我還沒說，如何創(chuàng)建一張白紙以及如何渲染頁面，下面是一個本文用的最簡單的框架
from?pywebio?import?*
from?pywebio.input?import?*
from?pywebio.output?import?*
def?myfirstpage():
????something
if?__name__?==?'__main__':
????start_server(myfirstpage,port=8082,auto_open_webbrowser=True)
可以看到，我們只要定義一個函數(shù)，然后往里面塞各種內(nèi)容，最后通過start_server()指定端口啟動就行。
好了，以上就是 pywebio 的簡單使用，可以覆蓋絕大多數(shù)的臨時頁面開發(fā)需求，對于經(jīng)常有這方面需求可以先學習一波。