深入淺出Python編程

（模塊6Web應(yīng)用程序設(shè)計(jì)）第10單元用Flask開(kāi)發(fā)系統(tǒng)監(jiān)控看板應(yīng)用

按國(guó)旗法要求的標(biāo)準(zhǔn)制法畫(huà)國(guó)旗顯示輔助線、體現(xiàn)繪制過(guò)程右下角加文字：我愛(ài)中國(guó)五角星畫(huà)法在非Window平臺(tái)下正常顯示Outcome單元目標(biāo)/Objectives理解Web應(yīng)用程序的工作原理

理解HTTP的請(qǐng)求/request和響應(yīng)/response

了解MVC架構(gòu)模式并編寫(xiě)代碼

了解RESTWeb服務(wù)編程/API

掌握Flask框架開(kāi)發(fā)簡(jiǎn)單Web程序⑥具有追求卓越的工匠精神內(nèi)容及計(jì)劃/Agenda&Schedule6ClassHoursDetails<00:10>回顧&成果介紹<00:25>了解三層結(jié)構(gòu)的FlaskWeb應(yīng)用程序<01:20>開(kāi)發(fā)三層架構(gòu)的監(jiān)控看板Web應(yīng)用<00:40>了解MVC架構(gòu)的FlaskWeb應(yīng)用<01:20>開(kāi)發(fā)前后端分離的監(jiān)控看板Web應(yīng)用<00:05>課堂小結(jié)Total：6hours(4hPractice)Total：54Hours(24hPractice)01系統(tǒng)監(jiān)控看板monitor1.任務(wù)分析目標(biāo)解構(gòu)一是，前端UI（UserInterface，用戶接口），也就是直接和用戶面對(duì)面的網(wǎng)頁(yè)界面，它將用于呈現(xiàn)CPU和內(nèi)存的占用率等信息。二是，后臺(tái)的數(shù)據(jù)，這里主要是要獲取計(jì)算機(jī)的CPU和內(nèi)存的占用率，以及內(nèi)存的消耗數(shù)據(jù)。三是，中間層（業(yè)務(wù)邏輯層），主要是將從后臺(tái)獲取的數(shù)據(jù)轉(zhuǎn)化成相應(yīng)的圖表。模式識(shí)別圖表可以使用之前學(xué)習(xí)過(guò)的pyecharts模塊、頁(yè)面布局可以使用BootStrap庫(kù)。后臺(tái)的數(shù)據(jù)獲取比較簡(jiǎn)單，可以使用學(xué)習(xí)過(guò)的psutil模塊來(lái)實(shí)現(xiàn)。中間業(yè)務(wù)邏輯層編寫(xiě)代碼的重點(diǎn)，需要使用獲取到的數(shù)據(jù)創(chuàng)建儀表盤(pán)圖和折線圖；對(duì)于前后的分離的結(jié)構(gòu)，可以使用Ajax進(jìn)行調(diào)研。1.任務(wù)分析模式歸納Web應(yīng)用的核心：一個(gè)是客戶端（Browser）和Web服務(wù)器端（WebServer）之間的HTTP訪問(wèn)（request）和響應(yīng)（response）；另一個(gè)是Web服務(wù)器和應(yīng)用服務(wù)器（ApplicationServer）之間的通信處理。算法設(shè)計(jì)前端UI借助BootStrap來(lái)解決頁(yè)面布局、色彩搭配等問(wèn)題，且不需要太專業(yè)的前端知識(shí)；pyecharts可以方便的創(chuàng)建儀表盤(pán)圖和折線圖等漂亮圖表。Python的Flask框架可以大大簡(jiǎn)化Web開(kāi)發(fā)難度/不用寫(xiě)CGI。2.任務(wù)準(zhǔn)備Flask框架——依賴于：WerkzeugWSGI（WebServerGatewayInterface，Web服務(wù)器網(wǎng)關(guān)接口，讀作“wiz-ghee”）套件，為Flask框架提供了一個(gè)和Web服務(wù)器通信的底層庫(kù)。Jinja模板引擎，為客戶端展現(xiàn)提供了模板渲染引擎，編寫(xiě)類似于Python語(yǔ)法的代碼，然后傳遞模板數(shù)據(jù)以呈現(xiàn)最終網(wǎng)頁(yè)文檔，也就是視圖的渲染。目前，使用的是Jinja2版本。2.任務(wù)準(zhǔn)備BootStrap一個(gè)基于HTML+CSS+JavaScript開(kāi)發(fā)的用于快速開(kāi)發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架，它包含了功能強(qiáng)大的內(nèi)置組件，且易于定制，其響應(yīng)式（Responsive）CSS能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)的屏幕大小，為開(kāi)發(fā)人員創(chuàng)建前端UI提供了一個(gè)簡(jiǎn)潔統(tǒng)一的解決方案。Ajax（AsynchronousJavaScriptAndXML，異步JavaScript和XML）異步操作是相對(duì)應(yīng)同步（Synchronous）而言的，Ajax允許通過(guò)在后臺(tái)與Web服務(wù)器交換數(shù)據(jù)來(lái)異步更新網(wǎng)頁(yè)。02開(kāi)發(fā)三層架構(gòu)的監(jiān)控看板Web應(yīng)用WebApplication1.了解三層結(jié)構(gòu)的Web應(yīng)用程序表示層：向用戶顯示信息并從用戶那里收集信息。Web表示層通常使用HTML、CSS和JavaScript開(kāi)發(fā)。應(yīng)用層：也稱為邏輯層或中間層（BLL，BusinessLogicLayer），使用Python等開(kāi)發(fā)，并使用API調(diào)用與數(shù)據(jù)層進(jìn)行通信。數(shù)據(jù)層：也稱為數(shù)據(jù)訪問(wèn)層（DAL，DataAccessLayer）是存儲(chǔ)和管理應(yīng)用程序處理的信息的位置。簡(jiǎn)單的理解：表示層提供用戶界面，應(yīng)用層處理用戶輸入輸出的業(yè)務(wù)邏輯，而數(shù)據(jù)層存儲(chǔ)數(shù)據(jù)。2.創(chuàng)建FlaskWeb應(yīng)用程序Flask是基于Werkzeug實(shí)現(xiàn)的WSGI工具包和Jinja2模板引擎，借助于Werkzeug和Jinja2，我們可以在更抽象的層面編寫(xiě)復(fù)雜的Web應(yīng)用，利用PythonWeb框架，Web的開(kāi)發(fā)也變得更簡(jiǎn)單。靜態(tài)文件可以直接交由Web服務(wù)器處理。2.創(chuàng)建FlaskWeb應(yīng)用程序—

路由和視圖函數(shù)一個(gè)完整的FlaskWeb應(yīng)用一般會(huì)包含：一個(gè)應(yīng)用實(shí)例對(duì)象、一個(gè)路由和一個(gè)視圖函數(shù)。Flask實(shí)例對(duì)象所有FlaskWeb應(yīng)用都需要?jiǎng)?chuàng)建一個(gè)Flask實(shí)例對(duì)象，她以主模塊名或包的名稱為參數(shù)構(gòu)建Flask實(shí)例，一般__name__變量就是所需的值。app.route()裝飾器來(lái)定義路由Flask框架中維持了一個(gè)URL與Python函數(shù)之間的一個(gè)映射關(guān)系，稱之為路由（route），對(duì)應(yīng)的處理函數(shù)就是視圖函數(shù)。2.創(chuàng)建FlaskWeb應(yīng)用程序—

路由和視圖函數(shù)創(chuàng)建Flask實(shí)例：app=Flask(__name__)@app.route()裝飾器將首頁(yè)的訪問(wèn)URL與視圖函數(shù)index()綁定:5000/或者:5000/home，都能訪問(wèn)“debug=False”：表明Flask應(yīng)用是在調(diào)試模式下運(yùn)行，在該模式下，服務(wù)器會(huì)加載重載器（reloader）和調(diào)試器（debugger），重載器會(huì)監(jiān)視項(xiàng)目中的所有源代碼文件，發(fā)現(xiàn)有修改的話會(huì)自動(dòng)重啟服務(wù)器啟動(dòng)APP：Runningon:50002.創(chuàng)建FlaskWeb應(yīng)用程序—

請(qǐng)求/響應(yīng)循環(huán)的參數(shù)傳遞動(dòng)態(tài)路由傳遞參數(shù)是@app.route()裝飾器中的一種特殊句法，調(diào)用視圖函數(shù)時(shí)，F(xiàn)lask會(huì)將動(dòng)態(tài)部分作為關(guān)鍵字參數(shù)傳遞給視圖函數(shù)?？梢酝ㄟ^(guò)使用<converter:variable_name>為變量增加一個(gè)轉(zhuǎn)換器，它為參數(shù)指定了數(shù)據(jù)類型。2.創(chuàng)建FlaskWeb應(yīng)用程序—

請(qǐng)求/響應(yīng)循環(huán)的參數(shù)傳遞動(dòng)態(tài)路由傳遞參數(shù):5000/user/caowen2.創(chuàng)建FlaskWeb應(yīng)用程序—

請(qǐng)求/響應(yīng)循環(huán)的參數(shù)傳遞應(yīng)用和請(qǐng)求上下文傳參應(yīng)用上下文（ApplicationContext）：跟蹤應(yīng)用程序級(jí)數(shù)據(jù)，應(yīng)用程序application可以簡(jiǎn)單的理解為創(chuàng)建Flask實(shí)例對(duì)象“app=Flask(__name__)”時(shí)創(chuàng)建的這個(gè)app對(duì)象。應(yīng)用上下文中存儲(chǔ)的值作用于整個(gè)Web應(yīng)用程序，它并不直接將值傳遞給每個(gè)視圖函數(shù)，而是訪問(wèn)current_app和g代理，F(xiàn)lask在處理請(qǐng)求時(shí)自動(dòng)推送應(yīng)用程序上下文，它指向處理當(dāng)前活動(dòng)的app。請(qǐng)求上下文（RequestContexts）：保存了客戶端和服務(wù)器交互的數(shù)據(jù)，常見(jiàn)的請(qǐng)求上下文對(duì)象有：封裝了HTTP請(qǐng)求的request、記錄請(qǐng)求會(huì)話信息的session等，request主要針對(duì)的是http的請(qǐng)求，session主要針對(duì)的是用戶。2.創(chuàng)建FlaskWeb應(yīng)用程序—

請(qǐng)求/響應(yīng)循環(huán)的參數(shù)傳遞應(yīng)用和請(qǐng)求上下文傳參:5000/user/?name=caowen編寫(xiě)一個(gè)簡(jiǎn)單的Flask應(yīng)用，分別使用動(dòng)態(tài)路由和上下文請(qǐng)求實(shí)現(xiàn)參數(shù)傳遞2.創(chuàng)建FlaskWeb應(yīng)用程序—

使用模版美化視圖Jinja模板引擎

{%...%}：流程控制語(yǔ)句

{{...}}：表達(dá)式值

{#...#}：注釋2.創(chuàng)建FlaskWeb應(yīng)用程序—

使用模版美化視圖flask_psutil/templates/user_info.html3.使用模版繼承自定義404頁(yè)面使用宏（macro）復(fù)用代碼創(chuàng)建宏：一對(duì)“{%macro……%}”和“{%endmacro%}”標(biāo)簽定義一個(gè)宏。調(diào)用宏：使用“{{……}}”或者“{{callmacro_name()}}”和“{{endcall}}”調(diào)用宏。3.使用模版繼承自定義404頁(yè)面render_template()函數(shù)渲染user_card.html模板，并傳遞參數(shù)：user_info=user3.使用模版繼承自定義404頁(yè)面模板塊（block）—Jinja模板繼承網(wǎng)站各頁(yè)面的共性部分，定義成塊（blocks），也就是一些占位符（placeholders），子模板可以覆蓋。定義塊：{%block<block_name>%}{%endblock%}。繼承塊：{%extends<base_temp>%}子模塊中調(diào)用父模塊：{{super()}}404基模塊base.html的基模板文件3.使用模版繼承自定義404頁(yè)面繼承自父模板：base.html覆蓋：title和content模塊部分3.使用模版繼承自定義404頁(yè)面編寫(xiě)自定義404頁(yè)面4.創(chuàng)建監(jiān)控看板Web應(yīng)用APP監(jiān)視器Web應(yīng)用的分層結(jié)構(gòu)數(shù)據(jù)層：創(chuàng)建model.py代碼文件，創(chuàng)建Computer類，CPU和內(nèi)存占用率數(shù)據(jù)由該類代碼來(lái)獲取。表示層：創(chuàng)建view.py代碼文件，創(chuàng)建View類，結(jié)合pyecharts模塊構(gòu)建前端的兩個(gè)圖表，數(shù)據(jù)從數(shù)據(jù)層代碼classComputer來(lái)獲取。客戶端模板的渲染代碼pyecharts官網(wǎng)已經(jīng)幫我們實(shí)現(xiàn)了，所以不需要再寫(xiě)宏（macro），本節(jié)案例中也暫時(shí)不需要BootStrap，在下一小節(jié)對(duì)該案例進(jìn)行迭代升級(jí)時(shí)將會(huì)用到。應(yīng)用層：創(chuàng)建monitor_web.py代碼文件，創(chuàng)建Flask應(yīng)用實(shí)例對(duì)象，處理HTTP訪問(wèn)請(qǐng)求和路由分發(fā)、試圖函數(shù)處理等。4.創(chuàng)建監(jiān)控看板Web應(yīng)用APP—

CPU占用率折線圖model.pyComputer類（class）來(lái)封裝對(duì)CPU和內(nèi)存數(shù)據(jù)的獲取功能。折線圖中，CPU占用率橫軸（X軸）數(shù)據(jù)是時(shí)間，縱軸（Y軸）數(shù)據(jù)是比例值，因此，我們使用一個(gè)字典來(lái)存儲(chǔ)取到的CPU占用率數(shù)據(jù)，字典的key為時(shí)間，字典的value為占用率，且只保留最近10項(xiàng)。memory()用@staticmethod裝飾器將其定義為一個(gè)類的靜態(tài)方法，實(shí)際上成為了一個(gè)工具函數(shù)。4.創(chuàng)建監(jiān)控看板Web應(yīng)用APP—

CPU占用率折線圖view.py從Computer類獲取CPU占用率數(shù)據(jù)集。創(chuàng)建并配置eCharts的折線圖Line()。為了減少運(yùn)行環(huán)境對(duì)網(wǎng)絡(luò)的依賴，將圖表顯示所需的前端JS文件echarts.min.js部署到本地“/static/js/”文件夾中，所以在折線圖的構(gòu)造函數(shù)中通過(guò)配置參數(shù)“js_host”進(jìn)行了指定。4.創(chuàng)建監(jiān)控看板Web應(yīng)用APP—

CPU占用率折線圖monitor_web.py多種路由接收首頁(yè)，且直接轉(zhuǎn)向到CPU占用率視圖。url_for()函數(shù)除了在前端模板中用于動(dòng)態(tài)加載靜態(tài)文件外，還能根據(jù)視圖函數(shù)名稱得到要轉(zhuǎn)向的URL。Markup()函數(shù)對(duì)HTML進(jìn)行安全標(biāo)記。HTTP請(qǐng)求的不同方法（HTTPrequestmethods）GET：獲取資源，可以理解為讀取或者下載數(shù)據(jù)，使用GET的請(qǐng)求應(yīng)僅檢索數(shù)據(jù)。POST：向資源提交數(shù)據(jù)，用于使用HTML表單將數(shù)據(jù)發(fā)送到服務(wù)器，相當(dāng)于寫(xiě)入或上傳數(shù)據(jù)。4.創(chuàng)建監(jiān)控看板Web應(yīng)用APP—

CPU占用率折線圖訪問(wèn)URL：:5000:5000/cpu測(cè)試：每發(fā)起一次請(qǐng)求只能獲得當(dāng)時(shí)時(shí)間節(jié)點(diǎn)的數(shù)據(jù)，但系統(tǒng)并不會(huì)自動(dòng)更新，需要手動(dòng)刷新瀏覽器才能看到新的數(shù)據(jù)。創(chuàng)建CPU占用率折線圖4.創(chuàng)建監(jiān)控看板Web應(yīng)用APP—

內(nèi)存占用率儀表盤(pán)圖ClassView類：添加memory_gauge(self)成員函數(shù)。除了返回儀表盤(pán)圖，還返回內(nèi)存占用率具體數(shù)據(jù)。4.創(chuàng)建監(jiān)控看板Web應(yīng)用APP—

內(nèi)存占用率儀表盤(pán)圖monitor_web.py：memo()函數(shù)只響應(yīng)HTTP請(qǐng)求的GET方法。這里只需要顯示圖表、不需要數(shù)據(jù)，所以案例中丟棄了從View類memory_gauge()成員函數(shù)中傳遞過(guò)來(lái)的內(nèi)存詳情數(shù)據(jù)。創(chuàng)建內(nèi)存占用率儀表盤(pán)圖03開(kāi)發(fā)前后端分離的監(jiān)控看板Web應(yīng)用AjaxWeb1.了解MVC架構(gòu)的Web應(yīng)用模型層/Model包含與應(yīng)用程序相關(guān)的數(shù)據(jù)，一般通過(guò)模型層直接與數(shù)據(jù)庫(kù)服務(wù)器進(jìn)行通信，但不處理有關(guān)如何呈現(xiàn)數(shù)據(jù)的任何邏輯。視圖層/View用于向用戶顯示模型的數(shù)據(jù)，View元素處理如何與模型的數(shù)據(jù)鏈接，但不提供用戶如何使用這些數(shù)據(jù)的任何邏輯?？刂茖?Cotroller位于模型和視圖層之間，是MVC架構(gòu)模式中的“司令部”，它偵聽(tīng)視圖中觸發(fā)的所有事件和操作（需要用哪一個(gè)模型來(lái)處理），并對(duì)事件執(zhí)行適當(dāng)?shù)捻憫?yīng)（需要用哪一個(gè)視圖來(lái)顯示）。2.開(kāi)發(fā)應(yīng)用程序編程接口API在B/S結(jié)構(gòu)中，可以把對(duì)服務(wù)器端請(qǐng)求的數(shù)據(jù)、文件等都看成是資源，且每一個(gè)資源都有一個(gè)URI（UniformResourceIdentifier，統(tǒng)一資源標(biāo)識(shí)符），在前后的分離的開(kāi)發(fā)中，服務(wù)器端不再向客戶端發(fā)送解析之后的HTML文件，而只發(fā)送客戶端需要的數(shù)據(jù)/JSON。3.創(chuàng)建前后端分離的監(jiān)控看板flask_psutil/static/文件夾用于存儲(chǔ)靜態(tài)資源文件，里面又包含了css、js和images等3個(gè)子文件夾，用于存放圖片、js文件等。flask_psutil/templates/目錄存放的是模板文件，這里既有pyecharts模塊用到HTML文件，也有本案例將要用的base.html和index.html兩個(gè)前端文件。三個(gè)Python代碼文件，包括模型層的model.py、視圖層的view.py，以及控制層的monitor_api.py。3.創(chuàng)建前后端分離的監(jiān)控看板—

模型層（model）開(kāi)發(fā)模型層（model）模型層為用戶準(zhǔn)備好后端所需要的數(shù)據(jù)，這里因?yàn)闃I(yè)務(wù)需求比較簡(jiǎn)單，不需要額外的數(shù)據(jù)庫(kù)、文件等訪問(wèn)開(kāi)銷，且在上一個(gè)小節(jié)中已經(jīng)實(shí)現(xiàn)了利用psutil模塊獲取到了CPU和內(nèi)存的占用率等數(shù)據(jù)，本小節(jié)的功能中可以直接使用，不需要再編寫(xiě)新的代碼。3.創(chuàng)建前后端分離的監(jiān)控看板—

視圖層（view）開(kāi)發(fā)視圖層（view）視圖層代碼與上一個(gè)版本相比，因?yàn)椴辉傧蚩蛻舳硕朔祷亟馕龊蟮腍TML文件，取而代之的是JSON數(shù)據(jù)，因此需要新增兩個(gè)函數(shù)。Echarts圖表對(duì)象的dump_options_with_quotes()方法可以直接獲取配置的JSON格式值。內(nèi)存信息除了返回儀表盤(pán)圖外，還將時(shí)間戳、總大小、剩余大小等值作為一個(gè)字典對(duì)象返回。3.創(chuàng)建前后端分離的監(jiān)控看板—

控制器層(Controller)開(kāi)發(fā)視圖函數(shù)cpu_json()和memo_json()都是返回JSON數(shù)據(jù)。內(nèi)存占用率的成員方法memory_gauge_api()返回的是一個(gè)元組，也可以將圖表配置的JSON數(shù)據(jù)作為一個(gè)字典數(shù)據(jù)項(xiàng)裝入一個(gè)字典后，再使用jsonify()函數(shù)總體轉(zhuǎn)換成JSON格式返回給客戶端。3.創(chuàng)建前后端分離的監(jiān)控看板—

模板的開(kāi)發(fā)我們?nèi)匀皇褂胋ase.html文件為模板文件的父模板，再創(chuàng)建一個(gè)index.html的模板文件，該模板繼承自base.html母模板。index.html的開(kāi)發(fā)注意包括兩個(gè)部分，