第Python使用Dash開(kāi)發(fā)網(wǎng)頁(yè)應(yīng)用的方法詳解目錄PythonDash開(kāi)發(fā)Web應(yīng)用的控件基礎(chǔ)一、Dash的布局Layout1、Dash的HTML組件2、Dash的Core組件二、DashCore中的Checklist

PythonDash開(kāi)發(fā)Web應(yīng)用的控件基礎(chǔ)

本文主要是通過(guò)Dash的Checklist組件，簡(jiǎn)單介紹使用Dash開(kāi)發(fā)的Web應(yīng)用

展示效果如下：

pythondash簡(jiǎn)單基礎(chǔ)

Dash應(yīng)用程序由兩部分組成：

第一部分是應(yīng)用程序的布局（Layout），它描述了應(yīng)用程序的外觀。第二部分描述了應(yīng)用程序的交互性。

一、Dash的布局Layout

Dash應(yīng)用的布局描述了應(yīng)用的外觀。布局是一個(gè)分層的組件樹(shù)。

DashHTMLComponents(dash.html)為所有HTMLtags和HTML屬性關(guān)鍵字參數(shù)描述提供類，如style,class和id。

Dash核心組件(dash.dcc)生成高級(jí)組件，如控件和圖形。

DashLayout有幾個(gè)特點(diǎn)：

布局由組件樹(shù)組成。可創(chuàng)建復(fù)雜的可復(fù)用的組件。核心組件模塊dash.dcc包含一個(gè)名為Graph的組件，Graph使用開(kāi)源的plotly.jsJavaScript圖形庫(kù)呈現(xiàn)交互式數(shù)據(jù)可視化。js支持超過(guò)35種圖表類型，并以矢量質(zhì)量的SVG和高性能的WebGL呈現(xiàn)圖表，詳細(xì)可參考：plotly.pydocumentationandgallery。對(duì)于編寫文本塊，可以使用dash.dcc中的Markdown組件。Dash核心組件(dash.dcc)包括一組較高級(jí)的組件，如下拉菜單、圖形、標(biāo)記塊等。

1、Dash的HTML組件

Dash是一個(gè)web應(yīng)用程序框架，它提供了圍繞HTML、CSS和JavaScript的純Python抽象。而不是編寫HTML或使用HTML模板引擎，用Python和DashHTMLComponents模塊組成布局。

DashHTML組件模塊是Dash的一部分，可以在/plotly/dash找到它的源代碼。

2、Dash的Core組件

Dash配備了用于交互用戶界面的動(dòng)態(tài)組件。

Dash核心組件模塊可以被導(dǎo)入和使用，通過(guò)fromdashimportdcc并允許訪問(wèn)許多交互式組件，包括下拉菜單、檢查列表和滑塊。

dcc模塊是Dash的一部分，可以在/plotly/dash找到它的源代碼。

二、DashCore中的Checklist

dcc.Checklist是一個(gè)用于呈現(xiàn)一組復(fù)選框的組件。

下面我們借助Checklist控件，組建一個(gè)簡(jiǎn)單工程，以說(shuō)明Dash開(kāi)發(fā)Web應(yīng)用的一些簡(jiǎn)單內(nèi)容

Demo的目錄結(jié)構(gòu)如下：

.

└──dash_demo

├──app.py

└──assets

├──favicon.ico

└──img

├──julia_50px_icon.png

├──python_50px_icon.png

└──r_50px_icon.png

app.py的內(nèi)容如下：

fromdashimportDash,html,dcc

app=Dash(__name__)

app.title='Dash控件教程'

app.layout=html.Div(children=[

dcc.Checklist(

options=['Python語(yǔ)言','Julia語(yǔ)言','R語(yǔ)言'],

value=['Python語(yǔ)言','R語(yǔ)言']

dcc.Checklist(

options=[

{'label':'Python語(yǔ)言','value':'1'},

{'label':'Julia語(yǔ)言','value':'2'},

{'label':'R語(yǔ)言','value':'3'},

value=['1','3']

dcc.Checklist(

options={

'1':'Python語(yǔ)言',

'2':'Julia語(yǔ)言',

'3':'R語(yǔ)言',

value=['1','3']

dcc.Checklist(

options=[

'label':html.Img(src=app.get_asset_url('img/python_50px_icon.png')),

'value':'Python語(yǔ)言',

'label':html.Img(src=app.get_asset_url('img/julia_50px_icon.png')),

'value':'Julia語(yǔ)言',

'label':html.Img(src=app.get_asset_url('img/r_50px_icon.png')),

'value':'R語(yǔ)言',

value=['Python語(yǔ)言','R語(yǔ)言']

if__name__=='__main__':

app.run_server(debug=True)

運(yùn)行工程：pythonapp.py。

瀏覽器訪問(wèn)：:8050。

DashDemo

簡(jiǎn)單說(shuō)明：

assets目錄，是官方推薦的用于存放我們的Dash應(yīng)用所依賴靜態(tài)資源文件的目錄，如依賴的css、js、favi