Python使用Dash開發網頁應用
作者：魔法小木瓜
本文主要是通過Dash的Checklist組件，簡單介紹使用Dash開發的Web應用。
Python Dash開發Web應用的控件基礎
本文主要是通過Dash的Checklist組件，簡單介紹使用Dash開發的Web應用
展示效果如下：
python dash簡單基礎
Dash應用程序由兩部分組成：
- 第一部分是應用程序的布局（Layout），它描述了應用程序的外觀。
- 第二部分描述了應用程序的交互性。
一、Dash的布局Layout
Dash應用的布局描述了應用的外觀。布局是一個分層的組件樹。
Dash HTML Components(dash.html)為所有HTML tags和HTML屬性關鍵字參數描述提供類，如style, class和id。
Dash核心組件(dash .dcc)生成高級組件，如控件和圖形。
Dash Layout有幾個特點：
- 布局由組件樹組成。
- 可創建復雜的可復用的組件。
- 核心組件模塊dash .dcc包含一個名為Graph的組件，Graph使用開源的plotly.js JavaScript圖形庫呈現交互式數據可視化。js支持超過35種圖表類型，并以矢量質量的SVG和高性能的WebGL呈現圖表，詳細可參考： plotly.py documentation and gallery。
- 對于編寫文本塊，可以使用dash.dcc中的Markdown組件。
- Dash核心組件(dash .dcc)包括一組較高級的組件，如下拉菜單、圖形、標記塊等。
1、Dash的HTML組件
Dash是一個web應用程序框架，它提供了圍繞HTML、CSS和JavaScript的純Python抽象。而不是編寫HTML或使用HTML模板引擎，用Python和Dash HTML Components模塊組成布局。
Dash HTML組件模塊是Dash的一部分，可以在https://github.com/plotly/dash 找到它的源代碼。
2、Dash的Core組件
Dash配備了用于交互用戶界面的動態組件。
Dash核心組件模塊可以被導入和使用，通過from dash import dcc 并允許訪問許多交互式組件，包括下拉菜單、檢查列表和滑塊。
dcc模塊是Dash的一部分，可以在https://github.com/plotly/dash 找到它的源代碼。
二、Dash Core中的Checklist
dcc.Checklist是一個用于呈現一組復選框的組件。
下面我們借助Checklist控件，組建一個簡單工程，以說明Dash開發Web應用的一些簡單內容
Demo的目錄結構如下：
.
└── dash_demo
├── app.py
└── assets
├── favicon.ico
└── img
├── julia_50px_icon.png
├── python_50px_icon.png
└── r_50px_icon.png
app.py的內容如下：
from dash import Dash, html, dcc
app = Dash(__name__)
app.title = 'Dash控件教程'
app.layout = html.Div(children=[
dcc.Checklist(
options=['Python語言', 'Julia語言', 'R語言'],
value=['Python語言', 'R語言']
),
dcc.Checklist(
options=[
{'label': 'Python語言', 'value': '1'},
{'label': 'Julia語言', 'value': '2'},
{'label': 'R語言', 'value': '3'},
],
value=['1', '3']
),
dcc.Checklist(
options={
'1': 'Python語言',
'2': 'Julia語言',
'3': 'R語言',
},
value=['1', '3']
),
dcc.Checklist(
options=[
{
'label': html.Img(src=app.get_asset_url('img/python_50px_icon.png')),
'value': 'Python語言',
},
{
'label': html.Img(src=app.get_asset_url('img/julia_50px_icon.png')),
'value': 'Julia語言',
},
{
'label': html.Img(src=app.get_asset_url('img/r_50px_icon.png')),
'value': 'R語言',
},
],
value=['Python語言', 'R語言']
),
])
if __name__ == '__main__':
app.run_server(debug=True)
運行工程：python app.py。
瀏覽器訪問：http://127.0.0.1:8050。
Dash Demo
簡單說明：
- assets目錄，是官方推薦的用于存放我們的Dash應用所依賴靜態資源文件的目錄，如依賴的css、js、favicon.ico、各種圖片及字體等靜態資源。
- Dash控件有多種使用形式，很靈活，例如文中的Checklist，選項的標簽(用戶看到的)和值(傳遞給回調的)是等價的。使用時，我們更傾向于將它們分開，這樣就可以很容易地更改標簽，而不更改使用該值的回調邏輯。
責任編輯：姜華
來源：
今日頭條
