像數(shù)據(jù)分析一樣寫(xiě) Web 頁(yè)面，這個(gè) Python 庫(kù)做到了！
提起用 Python 寫(xiě)一個(gè) web 頁(yè)面，總是會(huì)想起Django/Flask等這樣的大家伙。
他們確實(shí)好用，但就是流程繁瑣，比如有時(shí)就想寫(xiě)一個(gè)簡(jiǎn)單的頁(yè)面，比如問(wèn)卷調(diào)查，拿 Django 來(lái)說(shuō)吧總要經(jīng)過(guò)安裝、啟動(dòng)、配置、創(chuàng)建app、注冊(cè)路由、寫(xiě)各種 html/css/js 文件，小白的話說(shuō)不定就卡死在哪一步了。
尤其對(duì)于數(shù)據(jù)分析相關(guān)用戶，我就想寫(xiě)個(gè)頁(yè)面展示個(gè)報(bào)告，有沒(méi)有更簡(jiǎn)單的選擇？
恰好最近從一些文章中了解到一個(gè)新的 web 開(kāi)發(fā)庫(kù) PyWebIO ，我也嘗試著用他去寫(xiě)一個(gè)頁(yè)面，結(jié)果很驚艷，不用css什么亂七八糟的文件，一個(gè)py腳本就能搞定一整個(gè)頁(yè)面！
并且寫(xiě)頁(yè)面的過(guò)程就像用pandas進(jìn)行數(shù)據(jù)分析一樣輕松！所以我打算拿幾篇文章來(lái)循序漸進(jìn)的分享這個(gè)庫(kù)的相關(guān)操作，本文是第一篇，主要介紹一下基本流程與常見(jiàn)操作。
01
安裝與基本流程
安裝 PyWebIO 和其他的第三方庫(kù)一樣使用pip install PyWebIO就行，沒(méi)有任何難度，此處不做多講。
但是在正式講解一些常見(jiàn)的操作之前，我需要解釋一下，為什么說(shuō)用 PyWebIO 寫(xiě)頁(yè)面就像數(shù)據(jù)分析一樣。
回想一下我們使用Python進(jìn)行數(shù)據(jù)分析的流程，啟動(dòng) Jupyter Notebook 導(dǎo)入數(shù)據(jù)，進(jìn)行數(shù)據(jù)預(yù)覽、篩選、拆分合并等操作，得到自己滿意的結(jié)果，最后保存方便查看，更重要的是一行代碼一個(gè)結(jié)果，方便調(diào)試。
而使用 PyWebIO 開(kāi)發(fā)頁(yè)面流程也是類似，我們不用過(guò)分關(guān)心CSS、JS等文件，全程我們只需要操作一個(gè)py腳本。
也不用關(guān)心數(shù)據(jù)庫(kù)配置、前后端交互，就像上面的數(shù)據(jù)分析一樣，創(chuàng)建一個(gè)空白頁(yè)面，然后一行代碼添加一部分內(nèi)容，內(nèi)容可以實(shí)時(shí)編譯輸出，甚至可以在 ipython 中進(jìn)行開(kāi)發(fā)??
與其說(shuō)是第一個(gè)第三方庫(kù)，我更愿意稱它為一個(gè) APP ，因?yàn)橐恍写a對(duì)應(yīng)一個(gè)操作，例如可以調(diào)用 put_text() 、 put_image() 、 put_table() 等函數(shù)輸出文本、圖片、表格等內(nèi)容到瀏覽器！
當(dāng)然，之所以能這么便捷高效的開(kāi)發(fā)頁(yè)面，基于別人封裝好的，高度精準(zhǔn)定義好的功能，因此使用場(chǎng)景十分有限，例如問(wèn)卷調(diào)查、表單填寫(xiě)、數(shù)據(jù)報(bào)告展示等簡(jiǎn)單的、個(gè)人使用的，且對(duì)樣式、特效等不做太高要求的場(chǎng)景。
關(guān)于它讓人不爽的地方，我會(huì)在后面的系列文章中進(jìn)行講解，這不影響它確實(shí)是一個(gè)高效率的web開(kāi)發(fā)庫(kù)，下面讓我對(duì)其常見(jiàn)操作進(jìn)行講解。
02
來(lái)！現(xiàn)在就開(kāi)發(fā)頁(yè)面！
本節(jié)我將介紹使用 PyWebIO 開(kāi)發(fā)頁(yè)面中的一些常見(jiàn)操作。
當(dāng)然，我深知閱讀文檔的枯燥與痛苦，所以我將以從 0 實(shí)現(xiàn)下面的頁(yè)面為最終目標(biāo)進(jìn)行講解！
插入文字
平時(shí)我們寫(xiě) ``html 會(huì)用類似標(biāo)簽來(lái)控制標(biāo)題，用
在 PyWebIO 中可以使用 markdown 來(lái)實(shí)現(xiàn)類似效果，語(yǔ)法是put_markdown()，將markdown添加進(jìn)去，就會(huì)自動(dòng)渲染
put_markdown(("""#????我的第一個(gè)頁(yè)面
????這是早起Python教我用Python寫(xiě)的第一個(gè)頁(yè)面！
????
????寫(xiě)點(diǎn)什么呢？到底寫(xiě)一點(diǎn)什么好呢？好像真的沒(méi)什么好寫(xiě)的，到底寫(xiě)什么呢？
????我也不知道該寫(xiě)點(diǎn)什么，?反正有點(diǎn)什么內(nèi)容就好了！"""),?lstrip=True)
效果如下
插入圖片
靜態(tài)元素是一個(gè)網(wǎng)頁(yè)的重要組成部分，使用 PyWebIO ?插入也是很簡(jiǎn)單，使用 put_image() 可以插入圖片，代碼如下
put_image(open('iShot2021-10-29?17.14.08.png',?'rb').read())?
隨手用手機(jī)拍了一張圖片，效果如下??
插入表格
傳統(tǒng)html使用table插入表格，這里使用類似方法
????put_table([
????['商品',?'價(jià)格'],
????['蘋(píng)果',?'5.5'],
????['香蕉',?'7'],
])
效果如下，后面如果表格內(nèi)容需要變化，可以寫(xiě)個(gè)函數(shù)讓他動(dòng)態(tài)更新
插入代碼
插入代碼也是沒(méi)有問(wèn)題的
展示效果如下
交互 - 收集信息
上面都是常規(guī)的靜態(tài)元素添加，其他一些庫(kù)也能做到，甚至手寫(xiě)原生html都行，下面來(lái)點(diǎn)更高級(jí)的！
首先是簡(jiǎn)單的交互式輸入框，開(kāi)發(fā)者已經(jīng)寫(xiě)好了，調(diào)用命令也很簡(jiǎn)單
name?=?input("你的名字是什么？?")
只用一行代碼，效果如下，當(dāng)然這也意味著樣式什么的不支持修改
這里我們選擇將接收到消息打印出來(lái)，當(dāng)然也是可以寫(xiě)一個(gè)函數(shù)，將數(shù)據(jù)進(jìn)行保存，這會(huì)在后面帶大家開(kāi)發(fā)問(wèn)卷系統(tǒng)講到
交互 - 隱藏輸入
如果我們?cè)陂_(kāi)發(fā)問(wèn)卷系統(tǒng)，有些選項(xiàng)希望用戶輸入時(shí)可以隱藏輸入，就像輸入密碼一樣
password?=?input("不想讓別人看見(jiàn)你的輸入？",?type=PASSWORD)
交互 - 輸入代碼
通過(guò)交互輸入框接收代碼也是可以的，后面我講介紹如何讓代碼執(zhí)行，下面是可以實(shí)現(xiàn)的樣式
????code?=?textarea('Code?Edit',?code={
????'mode':?"python",??#?code?language
????'theme':?'darcula',??#??Codemirror?theme
},?value='import?something\n#?Write?your?python?code')
交互 - 按鈕功能
其實(shí)上面說(shuō)的存儲(chǔ)數(shù)據(jù)也好，執(zhí)行代碼也好，本質(zhì)上就是給這個(gè)提交按鈕添加一個(gè)功能，我們來(lái)實(shí)現(xiàn)最簡(jiǎn)單的計(jì)算器。也就是點(diǎn)擊提交，計(jì)算兩數(shù)相加
????data?=?input_group("做個(gè)計(jì)算器",?[
????????input('第一個(gè)數(shù)字',?name='num1',?type=NUMBER),
????????input('第二個(gè)數(shù)字',?name='num2',?type=NUMBER)
????])
????put_text(f"計(jì)算結(jié)果是{data['num1']}?+?{data['num2']}?=?{data['num1']?+?data['num2']}??")
因?yàn)楹?jiǎn)單，連函數(shù)都不用定義，直接 f-string 就解決了，如果需要復(fù)雜的功能，就可以定義一個(gè)函數(shù)，點(diǎn)擊按鈕就執(zhí)行這個(gè)函數(shù)
如何渲染頁(yè)面
從上面的介紹不難看出，用 PyWebIO 就好比往一張白紙里面塞東西。
但我還沒(méi)說(shuō)，如何創(chuàng)建一張白紙以及如何渲染頁(yè)面，下面是一個(gè)本文用的最簡(jiǎn)單的框架
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)
可以看到，我們只要定義一個(gè)函數(shù)，然后往里面塞各種內(nèi)容，最后通過(guò)start_server()指定端口啟動(dòng)就行！
03
小結(jié)
至此，有關(guān) ?PyWebIO ?開(kāi)發(fā)頁(yè)面的基本流程與常見(jiàn)操作就介紹完了。
是不是就像數(shù)據(jù)分析一樣，拿著各種函數(shù)對(duì)數(shù)據(jù)一通操作，我們也是拿著各種寫(xiě)好的功能，需要一個(gè)添加一個(gè)！ 如果你感興趣的話，我強(qiáng)烈建議你自己敲一遍代碼感受一下。
我是岳哥，最后給大家分享我寫(xiě)的SQL兩件套：《SQL基礎(chǔ)知識(shí)第二版》和《SQL高級(jí)知識(shí)第二版》的PDF電子版。里面有各個(gè)語(yǔ)法的解釋、大量的實(shí)例講解和批注等等，非常通俗易懂，方便大家跟著一起來(lái)實(shí)操。
有需要的讀者可以下載學(xué)習(xí)，在下面的公眾號(hào)「數(shù)據(jù)前線」(非本號(hào))后臺(tái)回復(fù)關(guān)鍵字：SQL，就行
數(shù)據(jù)前線
后臺(tái)回復(fù)關(guān)鍵字：1024，獲取一份精心整理的技術(shù)干貨
后臺(tái)回復(fù)關(guān)鍵字：進(jìn)群，帶你進(jìn)入高手如云的交流群。
推薦閱讀
