(資料科學學習手札108)Python+Dash快速web應用開發——靜態部件篇(上)

itread01 2021-02-22 11:16:44
Python 快速 dash 手札 python+dash


> 本文示例程式碼已上傳至我的`Github`倉庫[https://github.com/CNFeffery/DataScienceStudyNotes](https://github.com/CNFeffery/DataScienceStudyNotes)# 1 簡介 這是我的系列教程**Python+Dash快速web應用開發**的第六期,在上一期的文章中,我們完成了對`Dash`中回撥互動高階特性的探討,在今後陸續推出的教程內容中,我們將一起來學習`Dash`生態中那些豐富的**頁面部件**,從而賦予我們打造各種強大互動式web應用的能力。 而在今天的教程內容中,我將帶大家學習`Dash`中實用的一些基礎性的**靜態部件**,它們可以幫助我們打造更加正式的web應用。 # 2 Dash中的基礎靜態部件 我們在這裡所說的靜態頁面部件,主要指的是其本身不具備直接的互動功能,而是以**呈現內容**為主要功能,就像下面的簡單對比一樣:> app1.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcimport dash_core_components as dccapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( [ html.Br(), html.H1('靜態部件示例'), html.Hr(), html.H2('這是二級標題'), html.H3('這是三級標題'), html.H4('這是四級標題'), html.P( [ '這是一個', html.A('連結', href='#'), ',而這是一段', html.Strong('加粗文字'), ',這是一段帶上下標的文字:', '測試', html.Sup('上標'), ',測試', html.Sub('下標') ] ), html.Br(), html.H1('互動部件示例'), html.Br(), dcc.Dropdown( options=[ {'label': '測試1', 'value': '測試1'}, {'label': '測試2', 'value': '測試2'}, {'label': '測試3', 'value': '測試3'}, ]), html.Br(), dcc.Checklist( options=[ {'label': '測試1', 'value': '測試1'}, {'label': '測試2', 'value': '測試2'}, {'label': '測試3', 'value': '測試3'}, ], value=['測試1'] ), html.Br(), dcc.RangeSlider( min=0, max=20, step=0.5, value=[5, 15] ) ] ))if __name__ == '__main__': app.run_server(debug=True)``` 可以看到,靜態部件其實就是我們平時瀏覽網頁看到的各種內容元素,他們本身不直接承擔回撥互動功能,只能配合其他互動部件來實現互動功能。## 2.1 Dash中常用的基礎靜態部件 在`Dash`中所整合的一些常用基礎性靜態部件,其實就是對一些常見`html`元素的遷移,對應著`dash_html_components`中封裝的眾多類,這裡我們只介紹部分比較常用的:### 2.1.1 與文字格式相關的常用部件 首先我們來介紹`Dash`眾多基礎靜態部件中,與組織頁面或文字格式相關的一些:- **H1()到H6()** 在`dash_html_components`中,`H1()`到`H6()`分別對應著1級到6級標題。- **Br()與Hr()** `dash_html_components`中的`Br()`表示換行,而`Hr()`則表示水平分割線,這在我們佈局元素時經常使用到。- **P()** `P()`用於表示一段文字或內容,典型如我們在部落格中看到的每一段落內容都是由`P()`標籤所組織的,配合`css`中的`text-indent`屬性可以用來設定首行縮排。- **A()** `A()`用於表示一個可點選的連結,其引數`href`用於填入對應跳轉的地址,也可以配合`id`,實現點選重新定位到頁面內的其它元素,其`target`引數用於設定跳轉方式,譬如`target="_blank"`會在新標籤頁跳轉開啟,具體內容可參考(https://www.w3school.com.cn/tags/att_a_target.asp)。- **I()、Code()、U()、Mark()** `I()`主要用於在段落中將包裹的文字內容變為*斜體*,`Code()`用於在一段文字中表示`程式碼片段`,`U()`用於給所包含內容新增下劃線,`Mark()`則用於高亮標註文字。 以上所介紹的這些靜態部件可以通過下面的小例子直觀的感受一下:> app2.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( [ html.H1('一級標題', id='demo1'), html.H2('二級標題'), html.H3('三級標題'), html.H4('四級標題'), html.H5('五級標題'), html.H6('六級標題'), html.Br(), # 換行 html.Hr(), # 水平分割線 html.P('這是一段文字。'*20), html.P('這是另一段帶有首行縮排的文字。'*10, style={'text-indent': '3rem'}), html.A('跳轉到費弗裡的Github倉庫', target='_blank', href='https://github.com/CNFeffery/DataScienceStudyNotes'), # 跳轉到外部連結 html.Br(), html.A('跳轉到六級標題', href='#demo2'), html.P( [ '一段文字中出現了', html.I('斜體'), ',以及程式碼片段', html.Code('import dash'), ',還有一段', html.U('帶下劃線的文字'), ',一段', html.Mark('高亮標註文字'), ',以及另一段', html.Mark('不同顏色的高亮標註文字。', style={'background-color': 'lightblue'}) ] ) ] + [html.Br()] * 50 + [html.A('回到頂端一級標題', href='#demo1'), html.H1('頁內元素跳轉示例標題', id='demo2')] ))if __name__ == '__main__': app.run_server(debug=True)``` ### 2.1.2 與內容組織相關的常用部件 前面我們針對常用的一些與文字格式相關的靜態部件進行了介紹,而在實際應用中我們不僅要展示文字內容,還需要展示圖片、音訊、視訊等多媒體內容,下面我們來學習如何在`Dash`中構造更加豐富的內容展示形式:- **基於Blockquote()實現塊引用** 利用`dash_html_components`中的`Blockquote()`,我們可以直接傳入字串,或巢狀其他元素,從而構造出塊引用,就像`markdown`中的`>`所包含渲染的內容那樣,參考下面的例子:> app3.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( html.Blockquote( html.P('這是一段由塊引用包裹的文字內容' * 10), style={ 'background-color': 'rgba(211, 211, 211, 0.25)', 'text-indent': '3rem' } ) ))if __name__ == "__main__": app.run_server(debug=True)``` - **基於Ol()與Li()渲染有序列表** 利用`Ol()`巢狀多個`Li()`,可以自動渲染出帶序號的有序列表,就像下面這個簡單的例子:> app4.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( html.Ol( [ html.Br(), html.Br(), html.Li('待辦事項1'), html.Li('待辦事項2'), html.Li('待辦事項3'), html.Li('待辦事項4') ] ) ))if __name__ == "__main__": app.run_server(debug=True)``` - **基於Ul()與Li()渲染層級列表** 而除了與`Ol()`相互配合之外,`Li()`還可以巢狀在`Ul()`中渲染帶層級關係的列表:> app5.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( html.Ul( [ html.Br(), html.Br(), html.Li('1'), html.Li('2'), html.Ul( [ html.Li('2.1'), html.Li('2.2'), html.Li('2.3'), html.Ul( [ html.Li('2.1.1'), html.Li('2.1.2'), html.Li('2.1.3'), ] ) ] ), html.Li('3'), html.Li('4') ] ) ))if __name__ == "__main__": app.run_server(debug=True)``` - **利用Img()渲染圖片** `Img()`等價於`html`中的`img`標籤,我們通過`src`引數傳入圖片地址來渲染出圖片,以我以前一篇部落格的作品圖片為例:> app6.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( [ html.H5('(在模仿中精進資料視覺化05)疫情期間市值增長top25公司'), html.Img(src='https://img2020.cnblogs.com/blog/1344061/202011/1344061-20201129183046286-1089258422.png', style={'width': '100%'}) ] ))if __name__ == "__main__": app.run_server(debug=True)``` - **利用Audio()與Video()播放音訊與視訊** 利用`Audio()`和`Video()`,我們可以通過引數`src`傳入對應音訊與視訊檔案的url地址,從而實現在網頁中嵌入音訊與視訊,其中引數`controls`必須設定為`True`否則不會正常渲染:> app7.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( [ html.H5('音訊示例:'), html.Audio(src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3', controls=True), html.H5('視訊示例:'), html.Video(src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4', controls=True, style={'width': '100%'}), ] ))if __name__ == "__main__": app.run_server(debug=True)``` - **利用Iframe()嵌入其他網頁** 類似`iframe`標籤,我們也可以利用`Iframe()`來在網頁中嵌入其他網頁,可以通過`src`引數直接傳入目標網頁url,也可以通過`srcDoc`引數傳入整個網頁的html原始碼字串:> app8.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( [ html.Iframe(src='https://www.baidu.com/', style={'width': '100%', 'height': '800px'}) ] ))if __name__ == "__main__": app.run_server(debug=True)``` - **利用Textarea()構造輸入框** 有時候我們需要構造出一個能供使用者輸入大段文字的輸入框,譬如很多的線上編輯器,而在`Dash`中我們可以使用`dash_core_components`中的`Textarea()`來實現這個功能,並且`dcc.Textarea()`同樣具有`value`和`placeholder`屬性,可以配合回撥函式實現很多功能。 譬如下面的例子中我們編寫了一個簡單的髒話和諧工具,會將使用者輸入的所有~~他媽~~替換為“**”
版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
https://www.itread01.com/content/1613828643.html

  1. Detailed usage of urllib in Python 3 (header, proxy, timeout, authentication, exception handling)
  2. python 第三方库paramiko
  3. python 第三方库paramiko
  4. Python third party library paramiko
  5. Python third party library paramiko
  6. 卸载 PyCharm!这才是 Python 小白的最理想的 IDE
  7. 卸载 PyCharm!这才是 Python 小白的最理想的 IDE
  8. Uninstall pycharm! This is the ideal IDE for Python Xiaobai
  9. django学习-27.admin管理后台里:对列表展示页面的数据展示进行相关优化
  10. Uninstall pycharm! This is the ideal IDE for Python Xiaobai
  11. Django learning - 27. Admin management background: optimize the data display of the list display page
  12. python day2
  13. python day2
  14. Python 内存泄漏问题排查
  15. Troubleshooting of Python memory leak
  16. Python 与 excel的简单应用
  17. Simple application of Python and excel
  18. Python 与 excel的简单应用
  19. Simple application of Python and excel
  20. 2.7万 Star!最全面的 Python 设计模式集合
  21. 27000 stars! The most comprehensive collection of Python design patterns
  22. python day3
  23. python day3
  24. Commonly used data operation functions of Python
  25. (数据科学学习手札108)Python+Dash快速web应用开发——静态部件篇(上)
  26. (learning notes of data science 108) Python + dash rapid web application development -- static components (I)
  27. (数据科学学习手札108)Python+Dash快速web应用开发——静态部件篇(上)
  28. (learning notes of data science 108) Python + dash rapid web application development -- static components (I)
  29. [Python] Matplotlib 图表的绘制和美化技巧
  30. Drawing and beautifying skills of [Python] Matplotlib chart
  31. [Python] Matplotlib 图表的绘制和美化技巧
  32. Drawing and beautifying skills of [Python] Matplotlib chart
  33. Virtual environment of Python project
  34. 翻译:《实用的Python编程》02_01_Datatypes
  35. Translation: practical Python Programming 02_ 01_ Datatypes
  36. 翻译:《实用的Python编程》02_01_Datatypes
  37. 翻译:《实用的Python编程》02_01_Datatypes
  38. Translation: practical Python Programming 02_ 01_ Datatypes
  39. Translation: practical Python Programming 02_ 01_ Datatypes
  40. Python 3 入门,看这篇就够了
  41. Python 3 entry, see this is enough
  42. 华为大佬打造的400集Python视频学起来,学完万物皆可爬
  43. 400 episodes of Python video created by Huawei boss
  44. django之csrf_exempt解决跨域请求的问题
  45. CSRF of Django_ Exempt solves the problem of cross domain requests
  46. 1.7 万 Star!一个简单实用的 Python 进度条库
  47. 17000 stars! A simple and practical Python progress bar library
  48. Python爬虫:设置Cookie解决网站拦截并爬取蚂蚁短租
  49. Python crawler: setting cookie to solve website interception and crawling ant short rent
  50. Python-Net编程
  51. Python net programming
  52. 学习Python数学英语基础重要吗?Python教程!
  53. Is it important to learn the basics of math and English in Python!
  54. Python数据分析常用库有哪些?Python学习!
  55. What are the common libraries for Python data analysis? Learn Python!
  56. win 创建python虚拟环境
  57. Creating Python virtual environment with win
  58. In order to automatically collect B station barrage, I developed a tool in Python
  59. 用Python编程语言来实现阿姆斯特朗数的检查
  60. Using python programming language to check Armstrong number