PythonWeb開發(fā)技術與應用（Flask版）（微課版） 課件全套 第1-7章 Flask基礎 - 實例：簡易博客系統(tǒng)

Flask課程——第一章初探Flask了解Web開發(fā)的基礎概念完成Flask開發(fā)環(huán)境的搭建了解瀏覽網(wǎng)頁的基本原理學習目標教學重點教學難點重點掌握Flask框架，知道它是什么，我們?yōu)槭裁匆盟?，我們怎么去使用它。教學難點難點是理解Web開發(fā)基礎，框架的概念，應用的架構，模板引擎，表單處理等等內容。教學重難點簡單Web程序認識Flask框架Flask的安裝和配置請求與響應小結認識Flask框架Scenarioimport如今，我們可以看到各種各樣的Web應用，但大家不知道如何搭建，本次課程學習簡潔高效的Flask框架，構建Web應用01認識Flask框架Flask框架是什么？Flask是一個基于Python的輕量級Web應用框架，它旨在幫助開發(fā)者快速構建簡單而強大的Web應用程序。與傳統(tǒng)的重量級框架相比，F(xiàn)lask提供了更大的靈活性，使開發(fā)者能夠根據(jù)項目的需求進行定制。2010Flask誕生早期階段擴展和豐富生態(tài)系統(tǒng)python社區(qū)支持持續(xù)更新發(fā)展歷程201320152015至今01為什么要有Flask框架?問題思考先說結論，為了讓開發(fā)者在面對中小型項目能有更好的選擇。python常用的web開發(fā)框架有Django，Django功能大而全，F(xiàn)lask只包含基本的配置,Django的一站式解決的思路，能讓開發(fā)者不用在開發(fā)之前就在選擇應用的基礎設施上花費大量時間。Django有模板，表單，路由，基本的數(shù)據(jù)庫管理等等內建功能。與之相反，F(xiàn)lask只是一個內核，默認依賴于2個外部庫：Jinja2模板引擎和WSGI工具集--Werkzeug,flask的使用特點是基本所有的工具使用都依賴于導入的形式去擴展，flask只保留了web開發(fā)的核心功能。flask性能上基本滿足一般web開發(fā)的需求,并且靈活性以及可擴展性上要優(yōu)于其他web框架,對各種數(shù)據(jù)庫的契合度都非常高?在真實的生產環(huán)境下，小項目開發(fā)快，大項目設計靈活，大家以后開發(fā)肯定是要按需求來思考什么框架會更高效。Flask的安裝和配置02首先我們要會安裝python的環(huán)境，然后在編譯器里面安裝flask相關的依賴先去官網(wǎng)下python環(huán)境，如下圖所示。Flask的安裝和配置找到對應版本，如下圖所示。Flask的安裝和配置下載完成后打開安裝包進行安裝，如圖下圖所示。安裝之前勾選“AddPython3.7toPATH”復選框，以便Python自動配置環(huán)境變量。Flask的安裝和配置按“Win+R”組合鍵打開“運行”對話框，輸入“cmd”，打開命令提示符窗口輸入pip-V命令來查看python版本及pip版本，如下圖所示。Flask的安裝和配置

使用pip方式來安裝Flask，將鏡像源配置成阿里云，然后再命令提示符窗口輸入命令

pipinstallflask==1.1.1jinja2==2.11.3itsdangerous==2.0.1markupsafe==1.1.1werkzeug==0.16.1進行下載，成功的話如下圖所示。Flask的安裝和配置python環(huán)境配置和pycharm環(huán)境配置好了后，就可以創(chuàng)建Flask項目，如下圖所示。創(chuàng)建Flask項目

運行項目，然后點擊運行的鏈接就可以在瀏覽器訪問了，如下圖所示。創(chuàng)建Flask項目簡單Web程序03一個簡單Web程序Flask項目創(chuàng)建之后會包含一個簡單的Web程序，本節(jié)講解這個簡單的項目都包含了什么內容，這些內容有哪些作用。1．應用初始化所有Flask程序在創(chuàng)建時都必須先創(chuàng)建一個應用實例，也就是進行應用初始化。對應的程序代碼如下。fromflaskimportFlask#應用的初始化app=Flask(__name__)應用實例創(chuàng)建之后，才可以對路由及視圖函數(shù)進行綁定。此處的“__name__”用于獲取當前代碼文件的文件名。一個簡單Web程序2.運行應用

程序最后的代碼用于啟動服務器，運行應用實例。對應代碼如下。#啟動服務器if__name__=='__main__':app.run(debug=True)此處的“__name__=='__main__'”用于判斷當前文件是否直接被運行。如果需要開啟調試模式，可以在app.run()方法中添加debug參數(shù)。一個簡單Web程序3．路由與視圖在用戶使用瀏覽器訪問網(wǎng)頁的過程中，瀏覽器首先會發(fā)送一個請求到服務器，服務器接收到請求之后，會將請求轉交給Flask進行處理。Flask會對用戶所訪問的URL進行解析，然后找到相應的響應內容，將其返回到瀏覽器。路由用于使Flask知道URL對應的內容在哪里?；氐竭\行應用之前的代碼，可以看到有一個函數(shù)被裝飾器app.route所裝飾，這個裝飾器用于定義路由，確定URL與Python函數(shù)之間的映射。對應代碼如下。@app.route('/')defhello_world():return'HelloWorld!'被路由裝飾器所裝飾的函數(shù)便是視圖函數(shù)，用于返回用戶請求URL相應的響應內容。此處返回的響應內容可以是簡單的字符串，也可以是復雜的HTML頁面。一個簡單Web程序我們平時訪問的Url鏈接會有很多地方時可變的，大家可以動手實現(xiàn)書上拿Github用戶url為例的路由綁定效果，更好的體會一下Flask路由的神奇。tips：Flask的路由不止可以返回字符串，還可以返回重定向，html頁面渲染，返回文件，返回json等這些內容，大家感興趣可以去嘗試一下。請求與響應04請求和響應瀏覽器向服務器發(fā)送了“請求”，服務器處理后給瀏覽器返回了“響應”。這樣一個簡單的流程，其實就是HTTP的核心。HTTP是一個簡單的“請求—響應”協(xié)議，其性質為無狀態(tài)協(xié)議，對事務處理沒有記憶能力?？蛻舳藶g覽器向服務器發(fā)出的一次請求，就是request請求。Q：瀏覽器提交的請求中包含了什么？A：包含URL，還包含其他數(shù)據(jù)，例如用戶使用的系統(tǒng)與瀏覽器版本、語言、瀏覽器所支持的編碼、格式等。課堂練習Requestrequest屬性的用法就是request.你要展示的屬性名稱，常用的屬性如下表所示參數(shù)數(shù)據(jù)類型解釋full_pathstrURL中的訪問路徑，包含數(shù)據(jù)remote_addrstr瀏覽器的IP地址urlstr請求的完整URLbase_urlstr請求的URL，不含數(shù)據(jù)url_rootstr請求的根URL，不含路徑user_agentstr瀏覽器及操作系統(tǒng)信息argsdict請求中提交表單的GET參數(shù)formdict請求中提交表單的POST參數(shù)filesdict請求提交所上傳的文件cookiesdict瀏覽器Cookie數(shù)據(jù)remote_addrstr瀏覽器的IP地址狀態(tài)響應狀態(tài)響應是指在每一次HTTP交互中，返回響應包中包含的狀態(tài)碼，是服務器發(fā)送給瀏覽器的內容里面包含的其中一個內容。Q：常見的狀態(tài)響應碼有哪些？A：在訪問用戶頁面時，找不到特定的用戶頁，返回404狀態(tài)碼；又或者在訪問應用服務時，后端服務出錯，返回500狀態(tài)碼。這些都是常見的狀態(tài)響應。即使正常訪問網(wǎng)頁，沒有產生錯誤，也會返回200狀態(tài)碼。課堂練習狀態(tài)響應常見的狀態(tài)響應碼如下表所示狀態(tài)碼信息解釋200OK一切正常301MovedPermanently重定向400BadRequest客戶端請求錯誤403Forbidden無權限訪問404NotFound找不到頁面405MethodNotAllowd客戶端使用了不支持的提交方法500InternalServerError服務器端代碼出錯502BadGateway代理與服務器之間訪問出錯狀態(tài)響應在訪問網(wǎng)頁過程中，每一次請求的響應狀態(tài)碼都可以在瀏覽器的開發(fā)者工具（在Chrome瀏覽器中可以按“F12”鍵打開）中觀測到，如下圖所示。CookieHTTP每一次的交互都是獨立的，無法存儲狀態(tài)數(shù)據(jù)。為了解決這個問題，Cookie出現(xiàn)了Cookie需要瀏覽器的支持，如果瀏覽器不支持Cookie存儲，那么便無法記錄狀態(tài)數(shù)據(jù)。而且，Cookie的存儲容量有限，不同的瀏覽器有不同的存儲大小，但一般不會超過4KB。因此，Cookie只能存儲少量數(shù)據(jù)，如用戶的一些偏好設置、臨時信息等。Q：Cookie存儲的數(shù)據(jù)會丟失嗎？A：會丟失，有多種可能1、過期時間，因為cookie可以設置過期時間，超過就自動刪除。2、瀏覽器設置了不保存cookie。3、清除了瀏覽痕跡課堂練習SessionSession與Cookie的作用相似，都用于存儲狀態(tài)數(shù)據(jù)。不同的是，Session只能在服務器端進行管理，用戶在本地無法對其進行修改，因而安全性較高。Session一般用于存儲用戶登錄狀態(tài)等對安全性要求較高的信息。小結05課堂小結1、本章主要講解了Flask開發(fā)環(huán)境的搭建，簡單的應用實例，以及請求與響應的基本操作。2、環(huán)境搭建主要是注意安裝Flask的版本，以及python環(huán)境，避免版本不同，無法按照書上的教材來學習。3、講述了請求與響應的一些基本內容，簡述了Http的一些概念，以及常見的請求，請求狀態(tài)碼，存儲數(shù)據(jù)的cookie和session。課后作業(yè)今日作業(yè)閱讀拓展資料課后習題1,2,3謝謝聆聽Flask課程——第二章Web前端基礎了解HTML、CSS、JavaScript的作用掌握構建HTML表單的方法掌握Bootstrap網(wǎng)格系統(tǒng)的使用方法學習目標Bootstrap前端框架Web前端概述Html基礎小結Web前端概述Scenarioimport泛指Web前端，也就是在Web應用中用戶可以看得見碰得著的東西01Web前端概述Web前端是什么？Web前端指的是構成網(wǎng)頁用戶界面的各種可見部分，即用戶在瀏覽器中直接與之交互的內容。前端開發(fā)涉及到使用HTML、CSS和JavaScript等技術來創(chuàng)建和呈現(xiàn)網(wǎng)頁的外觀、布局和交互效果。HTMLCSSJavaScriptHTML是一種標記語言，用于創(chuàng)建網(wǎng)頁的結構和內容。通過使用各種標簽（例如<p>、<h1>、<img>等），開發(fā)者可以定義標題、段落、圖像、鏈接等各種元素。HTML提供了文檔的語義結構，讓瀏覽器和搜索引擎能夠正確地解釋和顯示內容。CSS用于定義網(wǎng)頁的樣式、布局和外觀。通過選擇器和屬性，開發(fā)者可以控制元素的顏色、字體、間距、邊框等樣式。CSS的分離性允許開發(fā)者將樣式與內容分開，從而使樣式的修改和維護更加靈活。JavaScript是一種腳本語言，用于為網(wǎng)頁添加交互性和動態(tài)效果。開發(fā)者可以使用JavaScript處理用戶輸入、更改頁面內容、創(chuàng)建動畫、請求服務器數(shù)據(jù)等。JavaScript使得網(wǎng)頁可以根據(jù)用戶行為做出響應，從而實現(xiàn)更豐富的用戶體驗。概念解釋Html基礎02基本語法“<xxx></xxx>”為“標簽”語句?！?lt;xxxattr1='test'attr2='test'></xxx>”標簽語句中的“attr1”項目與“attr2”項目為其中的“屬性”。“<xxx>test</xxx>”標簽語句中的“test”是標簽對所包含的“內容”。后面從以下幾個方面去講述Html語法1、網(wǎng)頁標題2、文本、圖像、鏈接3、表格4、表單5、CSS6、JavaScript基本語法1、網(wǎng)頁標題每打開一個網(wǎng)頁，瀏覽器的標題欄文字都會發(fā)生變化，而定義這一項內容的標簽便是<title>標簽。<title>標簽用于設置網(wǎng)頁的標題。具體代碼和效果圖如下所示。基本語法2.1、文本每打開一個頁面，就有文字映入眼簾，這些文字通常是用文本標簽來顯示出來的。常用HTML文本標簽標簽有許多，如下表所示。標簽描述示例用法<p>定義段落<p>這是一個段落。</p><a>定義鏈接，用于跳轉到其他頁面<ahref="">示例鏈接</a><ul>定義無序列表<ul><li>條目1</li><li>條目2</li></ul><ol>定義有序列表<ol><li>第一步</li><li>第二步</li></ol><li>列表項，用于包裹每個條目<ul><li>蘋果</li><li>橙子</li></ul><br>換行標簽這是第一行<br>這是第二行<hr>水平分割線<p>段落內容</p><hr><p>分割線后的內容</p><span>行內元素容器，用于設置樣式或添加腳本<p>這是一個<spanstyle="color:blue;">藍色</span>文本。</p>基本語法代碼和展示的效果如下圖所示。<!--文本演示--><h1>這是一級標題文本</h1><h2>這是二級標題文本</h2><h3>這是三級標題文本</h3><h4>這是四級標題文本</h4><h5>這是五級標題文本</h5><p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p><!--<br/>為換行標簽--><p>這是一個段落。這是一個段落。這是一個段落。<br/>這是一個段落。這是一個段落。這是一個段落。<br/>這是一個段落。</p>基本語法2.2、圖像我們在瀏覽網(wǎng)頁的時候也會發(fā)現(xiàn)有許多圖片，以及視頻等，常用的圖像標簽及其屬性如下表所示。標簽描述示例用法<img>嵌入圖像<imgsrc="image.jpg"alt="描述性文本">src圖像文件的URL<imgsrc="image.jpg"...>alt圖像的替代文本，圖像無法加載或無法顯示時顯示<img...alt="替代文本">width和height圖像的顯示寬度和高度（像素為單位）<img...width="300"height="200"><video>嵌入視頻<videocontrols><sourcesrc="video.mp4"type="video/mp4">...</video>controls顯示視頻播放器控制條<videocontrols>...</video><source>指定不同格式的視頻源文件<sourcesrc="video.mp4"type="video/mp4">基本語法圖片和視頻的用法有使用網(wǎng)絡鏈接和本地靜態(tài)鏈接兩種用法，這里用本地的方式來給大家演示。首先先創(chuàng)建“static”目錄，用于存放靜態(tài)資源（如圖像、視頻等），如下圖所示?；菊Z法然后隨意取一幅圖像（常見的JPG、PNG格式文件）放入“static”目錄，如下圖所示。向<body>標簽對內添加以下代碼。<!--圖像演示--><!--alt為文字描述，在圖像加載失敗時顯示--><imgalt="這是一張圖像"src="static/img.png">基本語法效果如下圖所示?；菊Z法2.3、鏈接鏈接在互聯(lián)網(wǎng)世界中非常重要，它們構建了網(wǎng)頁和網(wǎng)站之間的關系，使用戶能夠輕松地瀏覽和訪問不同的內容。鏈接使得整個互聯(lián)網(wǎng)成為一個相互關聯(lián)的信息網(wǎng)絡，從而實現(xiàn)了信息的快速傳遞和共享。無論是在網(wǎng)頁上還是在應用程序中，鏈接都是連接不同資源的基本方式之一。鏈接標簽（<a>）與圖像標簽（<img>）類似，都需要添加屬性以指向相應的資源，而鏈接標簽使用“href”屬性來定義跳轉的鏈接?；菊Z法演示代碼如下，效果圖如右圖所示。<!--鏈接演示--><ahref="">百度</a><br/><ahref=""target="_blank">百度（新窗口打開）</a><br/><ahref="/"><!--圖像鏈接--><imgalt="github"src="static/img.png"></a>基本語法3、表格表格通常用于數(shù)據(jù)展示頁，如后臺用戶信息展示，相對前面的鏈接來說更為復雜。表格由多個標簽組成，最簡單的表格包含<table>（表格標簽）、<tr>（表格行標簽）、<th>（表格標題列標簽）、<td>（表格列標簽）基本語法演示代碼如下所示。效果圖如右圖所示。<!--表格演示--><table><tr><th>id</th><th>用戶名</th><th>郵箱</th><th>操作</th></tr><tr><td>1</td><td>John</td><td>john@</td><td><ahref="#">編輯</a><ahref="#">刪除</a></td></tr></table>基本語法4、表單表單（Form）是在計算機編程和互聯(lián)網(wǎng)領域中，用于收集和提交用戶輸入數(shù)據(jù)的一種交互式元素。通過表單，用戶可以向網(wǎng)站或應用程序提供各種類型的信息，如文本、數(shù)字、選擇、日期等，然后將這些數(shù)據(jù)發(fā)送給服務器進行處理或存儲。一個典型的表單通常由以下幾個主要組成部分構成：輸入字段（InputFields）：輸入字段用于接收用戶輸入的數(shù)據(jù)。這些字段可以包括文本框、密碼框、單選按鈕、復選框、下拉菜單、日期選擇器等。標簽（Labels）：標簽用于描述每個輸入字段的用途或要求。它們幫助用戶理解應該在每個字段中輸入什么類型的信息。按鈕（Buttons）：表單通常包含提交按鈕，用戶點擊該按鈕以將填寫好的數(shù)據(jù)提交給服務器。還可能包含重置按鈕，用于清除表單中的所有數(shù)據(jù)。動作（Action）：表單需要指定一個處理數(shù)據(jù)的目標，即數(shù)據(jù)提交到服務器的位置。這通常通過設置表單的action屬性來實現(xiàn)。方法（Method）：表單提交數(shù)據(jù)的方式，通常是使用HTTP協(xié)議的POST或GET方法。這由表單的method屬性來指定。基本語法下面是一個簡單的HTML表單代碼。<formaction="submit.js"method="post"><labelfor="username">用戶名：</label><inputtype="text"id="username"name="username"required><br><labelfor="password">密碼：</label><inputtype="password"id="password"name="password"required><br><inputtype="submit"value="提交"></form>在這個示例中，用戶可以輸入用戶名和密碼，然后點擊"提交"按鈕，表單將數(shù)據(jù)發(fā)送到服務器上的"submit.js"文件進行處理。交流探究在HTML表單中，method屬性有兩個常用的值：GET和POST。這兩種方法有什么區(qū)別？在設計表單時，如何選擇合適的方法？基本語法5、CSS是一門基于規(guī)則的語言——你能定義用于你的網(wǎng)頁中特定元素樣式的一組規(guī)則。比如“我希望頁面中的主標題是紅色的大字”下面這段代碼使用非常簡單的CSS規(guī)則實現(xiàn)了之前提到的效果：h1{color:red;font-size:5em;}語法由一個選擇器（selector）起頭。它選擇了我們將要用來添加樣式的HTML元素。在這個例子中我們?yōu)橐患墭祟}（主標題<h1>(en-US)）添加樣式。接著輸入一對大括號{}。在大括號內部定義一個或多個形式為屬性（property）—值（value）對的聲明。每個聲明都指定了我們所選擇元素的一個屬性，之后跟一個我們想賦給這個屬性的值。冒號之前是屬性，冒號之后是值。不同的CSS屬性對應不同的合法值。在這個例子中，我們指定了color屬性，它可以接受許多顏色值；還有font-size屬性，它可以接收許多sizeunit值。基本語法CSS通常有3種使用方式。（1）在標簽中添加“style”屬性，編寫CSS語句。<pstyle="color:blue;font-size:16px;">這是一個藍色的段落。</p>在這個例子中，<p>標簽的style屬性內嵌了CSS樣式，用于設置文本顏色為藍色并設置字體大小為16像素基本語法（2）在網(wǎng)頁頭部使用<style>標簽定義樣式。<!DOCTYPEhtml><html><head><style>p{color:green;font-size:18px;}</style></head><body><p>這是一個綠色的段落。</p></body></html>在這個例子中，<style>標簽被放置在網(wǎng)頁的頭部，里面定義了一組樣式規(guī)則，將所有<p>標簽的文本顏色設置為綠色，字體大小設置為18像素?；菊Z法（3）在網(wǎng)頁頭部使用<link>標簽，從其他位置引入CSS樣式文件。<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="styles.css"></head><body><p>這是一個從外部CSS文件應用的段落樣式。</p></body></html>在這個例子中，通過<link>標簽將一個名為"styles.css"的外部CSS樣式文件引入到網(wǎng)頁中。在"styles.css"文件中，可以定義各種樣式規(guī)則，例如：/*styles.css*/p{color:purple;font-size:20px;}基本語法6、JavaScriptHTML控件的應用實現(xiàn)了對網(wǎng)頁控件的描述；CSS的應用實現(xiàn)了網(wǎng)頁控件的布局、上色等；而JavaScript則可以實現(xiàn)網(wǎng)頁控件在瀏覽器端與用戶的交互。HTML表單在沒有JavaScript相關代碼的情況下，只能與服務器進行交互；在有了JavaScript相關代碼后，很多用戶操作都可以不經過服務器，直接根據(jù)事先設計好的前端邏輯，由瀏覽器實現(xiàn)與用戶的交互。JavaScript通常用于對用戶輸入進行本地校驗，對不符合規(guī)則的輸入進行提示；JavaScript還可用于實現(xiàn)控件之間的交互、播放控件動畫、加載表單數(shù)據(jù)、異步加載頁面等，其功能十分強大?；菊Z法JavaScript也有三種使用方式，和CSS大同小異在這個例子中，點擊按鈕時會觸發(fā)onclick屬性中嵌入的JavaScript代碼，彈出一個警示框顯示"Hello,World!"。(1)內聯(lián)方式：在HTML元素的屬性中直接嵌入JavaScript代碼。<!DOCTYPEhtml><html><head><title>內聯(lián)方式</title></head><body><buttononclick="alert('Hello,World!')">點擊我</button></body></html>基本語法在這個例子中，使用<script>標簽內嵌了一個JavaScript函數(shù)showMessage()，并在按鈕的onclick屬性中調用這個函數(shù)。(2)內部腳本：在HTML文件內使用<script>標簽嵌入JavaScript代碼。<!DOCTYPEhtml><html><head><title>內部腳本</title></head><body><script>functionshowMessage(){alert('Hello,World!');}</script><buttononclick="showMessage()">點擊我</button></body></html>基本語法在這個例子中，JavaScript代碼被保存在名為"script.js"的外部文件中，通過<script>標簽引入到HTML文件中(3)外部腳本：將JavaScript代碼保存在外部的.js文件中，然后使用<script>標簽引入外部腳本。<!--index.html--><!DOCTYPEhtml><html><head><title>外部腳本</title><scriptsrc="script.js"></script></head><body><buttononclick="showMessage()">點擊我</button></body></html>//script.jsfunctionshowMessage(){alert('Hello,World!');}Bootstrap前端框架03框架介紹Bootstrap是一個流行的開源前端框架，用于快速構建響應式、現(xiàn)代化的網(wǎng)頁和Web應用程序。由Twitter開發(fā)并開源，它提供了一系列預定義的HTML、CSS和JavaScript組件，幫助開發(fā)者快速搭建具有一致外觀和交互的界面。Bootstrap的目標是使網(wǎng)頁開發(fā)變得更加簡單、快速和一致。為什么使用BootstrapBootstrap框架的特性：1、移動設備優(yōu)先：自Bootstrap3起，框架包含了貫穿整個庫的移動設備優(yōu)先的樣式2、瀏覽器支持：Firefox，Google等主流瀏覽器都支持Bootstrap3、容易上手：只需要具備HTML和CSS的基礎知識即可4、響應式設計：Boostrap的響應式CSS能使網(wǎng)頁能夠適應不同的設備和屏幕尺寸，從而提供更好的用戶體驗。5、包含功能強大的內置組件，易于定制。6、Bootstrap引入了12欄柵格結構的布局理念，使設計質量高、風格統(tǒng)一的網(wǎng)頁變得十分容易。如何使用BootstrapBoostrap提供了幾種快速開發(fā)的方式用于生產環(huán)境的Bootstrap：編譯并壓縮后的CSS、JavaScript和字體文件。不包含文檔和源碼文件。Bootstrap源碼：Less、JavaScript和字體文件的源碼，并且?guī)в形臋n。需要Less編譯器和一些設置工作。Sass：這是Bootstrap從Less到Sass的源碼移植項目，用于快速地在Rails、Compass或只針對Sass的項目中引入。推薦參考網(wǎng)址如下：Bootstrap中文網(wǎng)：/Bootstrap官網(wǎng)：/下載Bootstrap我們教材使用的版本是3.3.7，我們可以去官網(wǎng)去直接下載/2016/07/25/bootstrap-3-3-7-released/#:~:text=Download%20the%20latest%20release%E2%80%94source%20code%2C%20compiled%20assets%2C%20and,options.%20Also%2C%20remember%20we%E2%80%99re%20available%20on%20npm%2C%20too.并將其放入“static”目錄，然后引入Bootstrap所依賴的靜態(tài)資源，代碼如下所示。在<head>標簽對中添加以下內容。<linkrel="stylesheet"href="static/bootstrap.min.css">在<body>標簽對尾部添加以下內容。<scriptsrc="static/jquery.min.js"></script><scriptsrc="static/bootstrap.min.js"></script>此時，Bootstrap就可以正常使用了。Bootstrap包含的內容1、預編譯版如果下了Bootstrap的已編譯版本，解壓ZIP文件，會看到下圖的文件內容。這是Bootstrap的最基本形式：預編譯文件，可在幾乎任何Web項目中快速使用。我們提供編譯的CSS和JS，以及編譯和縮小的CSS和JS。CSS源映射可用于某些瀏覽器的開發(fā)人員工具。包括來自Glyphicon的字體，以及可選的Bootstrap主題。bootstrap.*bootstrap.min.*bootstrap.*.mapBootstrap包含的內容2、源代碼版Bootstrap源代碼下載包括預編譯的CSS，JavaScript和字體資產，以及源代碼Less，JavaScript和文檔。如下圖所示簡單模板右圖是一個簡單的Bootstrap模板，有以下幾點要注意。語句<metaname="viewport"content="width=device-width,initial-scale=1">可以實現(xiàn)對不同手機屏幕分辨率的支持包含了Bootstrap.min.css文件，這個文件用于讓一個常規(guī)的Html頁面變成為使用了Bootstrap框架的頁面如果要用bootstrap這種js插件，bootstrap3版本還是依賴jquery的支持，所以在引入js文件的時候一定要先把jquery的依賴放在bootstrap的前面，但是在4和5版本，bootstrap才開始不依賴jquery，大家可以自行去搜索。柵格系統(tǒng)Bootstrap提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin用于生成更具語義的布局。柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下Bootstrap柵格系統(tǒng)的工作原理：“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。類似.row和.col-xs-4這種預定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來創(chuàng)建語義化的布局。通過為“列（column）”設置padding屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為.row元素設置負值margin從而抵消掉為.container元素設置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。負值的margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個.col-xs-4來創(chuàng)建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何.col-md-*柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何.col-lg-*不存在，也影響大屏幕設備。柵格系統(tǒng)通過下表可以詳細查看Bootstrap的柵格系統(tǒng)是如何在多種屏幕設備上工作的柵格系統(tǒng)/css/在網(wǎng)址里面的內容有實際的情況給大家來測試，內容如下圖所示。大家可以多去測試一下，對bootstrap有更好的了解Bootstrap表單我們前面有用表單，但是很簡陋，Boostrap也有內置表單，下面是個簡單的例子，效果如下Bootstrap表單代碼如下<form><divclass="form-group"><labelfor="exampleInputEmail1">Emailaddress</label><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email"></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group"><labelfor="exampleInputFile">Fileinput</label><inputtype="file"id="exampleInputFile"><pclass="help-block">Exampleblock-levelhelptexthere.</p></div><divclass="checkbox"><label><inputtype="checkbox">Checkmeout</label></div><buttontype="submit"class="btnbtn-default">Submit</button></form>單獨的表單控件會被自動賦予一些全局樣式。所有設置了.form-control類的<input>、<textarea>和<select>元素都將被默認設置寬度屬性為width:100%;。將label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列課后小結04小結1、本章主要講解了HTML、CSS、JavaScript的作用及其基本用法，以及Bootstrap前端框架的基本使用。Bootstrap的相關資料可以去之前給的網(wǎng)址去瀏覽了解。2、Bootstrap4、5的語法可能會和3有所不同，大家下載Bootstrap的時候不要下載錯版本了。課后作業(yè)今日作業(yè)課后習題2.5請在課余時間查找關于bootstrap、css、html、JavaScript的基礎資料。謝謝聆聽Flask課程——第三章模板了解靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)別掌握Jinja2模板引擎的使用方法掌握Flask-Bootstrap的使用方法學習目標Flask-Bootstrap模板簡介Jinja2模板引擎小結模板簡介01概念解釋什么是模板？模板是一種通用的布局或結構，用于創(chuàng)建多個具有相似風格和功能的內容。在計算機編程和設計領域，模板是一個預定義的框架，其中包含了一些固定的元素、樣式、格式或占位符，以便在特定場景中填充內容。使用模板可以幫助保持一致性、提高效率，并降低開發(fā)的重復性。簡單來說的話，模板的作用是內容注入、頁面繼承與包含。Jinja2模板引擎02概念解釋jinja2模板引擎是什么？Jinja2是一個流行的Python模板引擎，用于在Python應用程序中生成動態(tài)內容。模板引擎是一種將數(shù)據(jù)和模板結合，生成最終輸出的工具。Jinja2允許開發(fā)者將動態(tài)數(shù)據(jù)嵌入到靜態(tài)模板中，以生成HTML、XML、JSON等格式的輸出。安裝依賴我們在第一章的時候，已經把Jinja2模板一同下載了下來，如果有不清楚的話，可以打開cmd(命令提示符)，輸入代碼：pipinstalljinja2==2.11.3在使用模板時，所有靜態(tài)資源應放置在“static”資源目錄下，而模板頁面應放置在“templates”模板目錄下。我們要遵循一個思路，每當寫一個模板頁面，都要寫他對應的視圖函數(shù)，不然寫了的頁面就沒法被瀏覽到。Jinja2模板引擎我們來舉一個簡單的例子，首先在“templates”模板目錄下創(chuàng)建一個模板頁面文件，如下圖所示。Jinja2模板引擎然后在視圖函數(shù)里面的代碼如下所示。fromflaskimportFlask,render_template@app.route('/value')defvalue(username=None):returnrender_template('value.html')render_template用于渲染模板文件然后下面就是渲染名為'value.html'的模板文件，并將渲染后的內容返回給用戶的瀏覽器。效果如下圖所示?；菊Z法以下是3種基本語法，在接下來的代碼中將會經常出現(xiàn)。（1）“{%...%}”為“控制”語句，常用于編寫結構控制，定義模板、變量等。（2）“{{...}}”為“表達式”語句，常用于輸出變量，調用宏指令、對象函數(shù)等。（3）“{#...#}”為“注釋”語句，用于添加代碼注解?；菊Z法（1）“{{...}}”為“表達式”語句，常用于輸出變量，調用宏指令、對象函數(shù)等。代碼例子如下<!DOCTYPEhtml><html><head><title>測試</title></head><body><h1>Hello,{{user}}</h1><p>Yourageis{{age}}</p></body></html>在這個示例中，使用表達式語句輸出了user和age變量的值。基本語法（2）“{%...%}”為“控制”語句，常用于編寫結構控制，定義模板、變量等。代碼例子如下<!DOCTYPEhtml><html><head><title>測試</title></head><body>{%ifuser%}<h1>Hello,{{user}}!</h1>{%else%}<h1>Welcome,Guest!</h1>{%endif%}</body></html>在這個示例中，根據(jù)user變量的值，使用控制語句實現(xiàn)了一個簡單的條件語句。基本語法（3）“{#...#}”為“注釋”語句，用于添加代碼注解。代碼例子如下<!DOCTYPEhtml><html><head><title>測試</title></head><body><h1>Hello,{{user}}</h1>{#這是一個提示。下面會顯示你的年齡#}<p>Yourageis${{age}}</p></body></html>在這個示例中，使用注釋語句添加了一個代碼注解，不會在最終輸出中顯示語法使用注釋的使用方法和其他語言的注釋用法一樣，這里就略過注釋用法，舉例控制和表達式的使用方法。表達式的用法，拿注入變量舉例，首先得從視圖函數(shù)注入變量，再將需要顯示到頁面的變量在模板文件中使用“表達式”語句輸出變量。視圖函數(shù)代碼如下@app.route('/value')@app.route('/value/<string:username>')defvalue(username=None):returnrender_template('value.html',username=username)表達式語句輸入代碼如下<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>注入變量</title></head><body>{#在"表達式"語句中，可使用"or"為變量添加默認值#}<h1>{{usernameor'游客'}}</h1><h2>歡迎使用！??！</h2></body></html>語法使用效果如下圖所示無username的示例圖有username的示例圖語法使用控制用法，簡單來說就像其他語言的if判斷，舉個文章列表的簡單例子，也是先寫視圖函數(shù)，再寫模板內容，視圖函數(shù)代碼如下。@app.route('/control')@app.route('/control/<int:num>')defcontrol(num=0):#此處使用list模擬文章列表articles=[]foriinrange(1,num+1):articles.append({'title':'文章%d標題'%i,'content':('文章%d的內容'%i)*i,})returnrender_template('control.html',num=num,articles=articles)語法使用模板(control.html)的代碼如下，可以看到這些語句與Python的控制語句相似，同時又類似于HTML標簽，控制語句需要使用如“{%endxxx%}”的格式，對前面的語句進行閉合。<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>控制結構</title></head><body><h1>文章列表</h1>{%ifnum<=0%}<h2>文章數(shù)量為0，沒有內容可展示。</h2>{%else%}{%forarticleinarticles%}<h2>{{article.title}}</h2><p>{{article.content}}</p>{%endfor%}{%endif%}</body></html>語法使用效果圖如下圖所示。根據(jù)路徑后面的參數(shù)，來改變效果模板的包含與繼承前文提到，模板可以用于解決公共內容的冗余問題。例如，將公共部分的內容分離到一個單獨的文件，再將模板加載到需要使用的頁面中。如果按這種模式進行開發(fā)，在修改公共部分內容時，僅需要修改公共部分內容所處的文件，即可修改所有使用公共部分內容的頁面，大大縮短修改各個頁面的時間。模板的包含與繼承模板的包含：模板的包含允許您將一個模板嵌入到另一個模板中，從而實現(xiàn)模塊化和代碼重用。這對于在多個頁面中使用相同的組件或塊非常有用。假設我們有一個簡單的header.html模板，表示網(wǎng)站的頁頭部分，代碼如下。<!DOCTYPEhtml><html><head><title>{{title}}</title></head><body><header><h1>testTitle</h1></header></body>模板的包含與繼承demo.html的代碼如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body>{%include'header.html'%}<p>Welcometoourwebsite!</p></body></html>{%include'header.html'%}這句代碼就是代表著我們可以在不同的頁面中引用這個頁頭部分。模板的包含與繼承效果如下圖所示。這便是模板的包含。模板的包含與繼承模板的繼承：模板的繼承允許我們創(chuàng)建一個基礎模板（稱為父模板），定義其中的共同結構和占位符，然后創(chuàng)建子模板來填充實際內容。假設我們有一個簡單的base.html模板，表示父模板，代碼如下。<!DOCTYPEhtml><html><head><title>{%blocktitle%}DefaultTitle{%endblock%}</title></head><body><header><h1>{%blockheader%}DefaultHeader{%endblock%}</h1></header><main>{%blockcontent%}{%endblock%}</main></body></html>模板的包含與繼承然后創(chuàng)建一個子模版來填充具體內容，同時覆蓋掉父模板的內容，代碼如下{%extends'base.html'%}{%blocktitle%}PageTitle{%endblock%}{%blockheader%}WelcometoMySite{%endblock%}{%blockcontent%}<p>Thisisthemaincontentofthepage.</p><p>Additionalcontentgoeshere.</p>{%endblock%}{%extends'base.html'%}這個就是用來繼承我們的父模板在子模版使用，通過這種方式，我們可以將頁面的結構和內容分開，使代碼更加模塊化和易于維護。父模板定義了整體結構，而子模板填充了特定內容。模板的包含與繼承效果如下圖所示。宏指令我們前面碰到的基本都是需要多次修改的靜態(tài)內容，總不能想改動東西就天天去修改源碼，那么如果我們想動態(tài)實現(xiàn)添加，刪除，那該怎么辦呢，我們就迎來一個新的概念，宏指令。比方說，我們要做一個常見的任務，比如創(chuàng)建一個HTML按鈕，但稍后可能會用到不止一次。在這種情況下，我們可以使用Jinja2的宏來實現(xiàn)這一點。拿文章的增加和刪除舉例。我們按照視圖函數(shù)，然后再寫頁面的思路來寫，視圖函數(shù)的代碼如下。@app.route('/macro')@app.route('/macro/<int:num>')defmacro(num=0):#此處使用list模擬文章列表articles=[]foriinrange(1,num+1):articles.append({'title':'文章%d標題'%i,'content':('文章%d的內容'%i)*i,})returnrender_template('macro.html',num=num,num_prev=num-1,num_next=num+1,articles=articles)宏指令宏指令(macro_define.html)文件代碼如下。{%macroarticle_item(title,content)%}<h2>{{title}}</h2><p>{{content}}</p>{%endmacro%}{%macroarticle_list(articles,article_num)%}{%ifarticle_num<=0%}<h2>文章數(shù)量為0，沒有內容可展示。</h2>{%else%}{%forarticleinarticles%}{{article_item(article.title,article.content)}}{%endfor%}{%endif%}{%endmacro%}宏指令使用宏代碼(macro.html)網(wǎng)頁文件代碼如下。{#宏指令可以定義在單獨的文件，然后被其他文件所引入#}{%import'macro_define.html'asmacro%}{%blocktitle%}宏指令{%endblock%}{%blockinner_content%}{#宏指令的使用方法類似于函數(shù)#}{{macro.article_list(articles,num)}}{%ifnum>0%}<ahref="{{url_for('macro',num=num_prev)}}"class="btnbtn-primary">-1</a>{%endif%}<ahref="{{url_for('macro',num=num_next)}}"class="btnbtn-primary">+1</a>{%endblock%}宏指令效果如下圖所示。可以看到，寫好了宏，就只需要在網(wǎng)頁去點擊就能進行增加和刪除內容，只需調用宏，而不必重復編寫網(wǎng)頁代碼。注冊全局對象在Jinja2模板引擎中，有的時候可以通過函數(shù)調用來獲取數(shù)據(jù)，但是在繼承的模板里面，如果需要調用某個固定的函數(shù)，通常需要在每一個使用被繼承模板的視圖函數(shù)中注入相應的函數(shù)（變量），但這顯然不是推薦的操作方法。這時，需要注冊全局對象。用到的函數(shù)是:app.add_template_global(需要注冊的函數(shù)名，’別名’)。例子代碼如下圖所示。視圖代碼如下：#注冊全局對象的類型不限，可以是任何類型（函數(shù)亦可）defrange_list(x):#該函數(shù)生成了數(shù)量為x的intlist（從0開始）returnlist(range(x))#將函數(shù)注冊到全局對象中app.add_template_global(range_list,'global_test')@app.route('/global')defglobal_():returnrender_template('global.html')注冊全局對象模板文件代碼如下：{%blocktitle%}注冊全局對象{%endblock%}{%blockinner_content%}{#此處將數(shù)字列表輸出到頁面中#}{{global_test(10)}}{%endblock%}效果如下圖所示。變量過濾器變量過濾器是Jinja2中一種用于在模板中對變量進行修改或格式化的功能。您可以使用過濾器對變量進行操作，使其適應您的需求，如格式化日期、將文本轉換為大寫、截取字符串等。這個用到的函數(shù)：app.add_template_filterer(‘過濾器名稱’)，視圖函數(shù)代碼如下：importtimedefconvert_time(t):returntime.strftime('%Y-%m-%d%H:%M:%S',time.localtime(t))#注冊模板變量過濾器app.add_template_filter(convert_time)@app.route('/demo')defglobal_():returnrender_template('demo.html')變量過濾器頁面代碼(demo.html)如下：{#自定義變量過濾器，時間可通過time.time()獲取#}<p>{{1572497288.095447|convert_time}}</p>效果如下圖所示：Flask-Bootstrap03概念解釋Flask-Bootstrap是什么？前面的內容中提到了Bootstrap前端框架，同時也通過手動引用、構建模板的方式，使用了Bootstrap框架。而在快速開發(fā)場景中，這種從零開始配置的方式并不適用。Flask-Bootstrap提供了一系列的基本模板，包含對資源的引用、一些快捷宏指令等。Flask-Bootstrap安裝Flask-Bootstrap的方式和之前一樣，打開命令提示符輸入以下代碼pipinstallflask-bootstrap==3.3.7安裝成功如下圖所示使用方法首先需要引入Flask-Bootstrap包中的Bootstrap類，然后在應用初始化之后，對Bootstrap實例進行初始化。代碼如下fromflaskimportFlask,render_templatefromflask_bootstrapimportBootstrapapp=Flask(__name__)#flask_bootstrap初始化代碼bootstrap=Bootstrap()bootstrap.init_app(app)#使用本地資源，禁用cdnbootstrap_cdns=app.extensions['bootstrap']['cdns']bootstrap_cdns['bootstrap']=bootstrap_cdns['local']bootstrap_cdns['jquery']=bootstrap_cdns['local']使用方法視圖函數(shù)代碼如下@app.route('/bootstrap')defbootstrap_flask():returnrender_template('bootstrap_flask.html')使用方法由于我們的模板文件代碼繼承了bootstrap的模板，為方便使用（定制），我們在Python安裝目錄/site-packages/flask_bootstrap/templates”中找到需要用的模板文件復制到當前項目。如下圖所示。使用方法模板文件(bootstrap_flask.html)代碼如下{%extends'bootstrap/base.html'%}{%blocktitle%}FlaskBootstrap{%endblock%}{%blocknavbar%}{%include'include_nav.html'%}{%endblock%}{%blockcontent%}<divclass="container"><p>flask_bootstrap提供了一些基本的模板，可以省去從零編寫模板頁的過程。</p><p>flask_bootstrap同時還提供了flask_wtf表單生成的宏指令（后續(xù)講解）。</p></div>{%endblock%}使用方法效果就如下圖所示。使用方法Flask-Bootstrap提供了常用的基礎模板，在開發(fā)過程中使用這些模板，可節(jié)省編寫基礎模板的時間。Flask-Bootstrap提供的基準模板（base.html）定義了一些常用區(qū)塊，通常情況下，只要繼承基準模板，并重寫區(qū)塊，便可以滿足大部分的需求。基準模板中定義的一些常用區(qū)塊，如下表所示。區(qū)塊名稱解釋title網(wǎng)頁標題styles樣式表標簽區(qū)塊navbar導航欄區(qū)塊content網(wǎng)頁主體區(qū)塊scripts網(wǎng)頁主體尾部腳本區(qū)塊課后小結04小結1、Jinja2模板引擎提供了很簡潔、方便的模板語法，使模板編寫、維護變得簡單。使用模板進行開發(fā)，將所有公共部分分離，可減少大部分重復性的工作。2、Flask-Boostrap簡化了將Bootstrap整合到Flask應用中的過程，提供了一致的界面和響應式設計，同時還保留了定制性和靈活性，使我們能夠輕松構建Web界面。課后作業(yè)今日作業(yè)課后習題3.5創(chuàng)建一個Flask應用。使用模板繼承，創(chuàng)建一個基礎模板（父模板）和一個或多個子模板。父模板包含網(wǎng)頁的通用結構，子模板填充特定內容。在父模板中創(chuàng)建一個宏指令，用于顯示頁面的頁頭。在子模板中通過模板繼承和宏指令，創(chuàng)建一個具有不同內容的網(wǎng)頁。謝謝聆聽Flask課程——第四章如何與用戶進行交互了解消息反饋的基本操作掌握Flask-WTF表單模塊的使用方法掌握Flask-CKEditor模塊的使用方法學習目標消息反饋表單Flask-WTFFlask-CKEditor小結表單01概念解釋網(wǎng)頁的交互是什么？網(wǎng)頁的交互是指用戶通過與網(wǎng)頁上的元素（如按鈕、表單、鏈接等）進行互動，以觸發(fā)和響應網(wǎng)頁的動態(tài)行為或功能。這種互動性是現(xiàn)代網(wǎng)頁應用程序的關鍵組成部分，它使用戶能夠與網(wǎng)頁進行實時通信、提交表單、加載新內容、執(zhí)行操作等。表單在網(wǎng)頁中，如果需要與用戶進行交互，則需要為交互頁面設計一種特定的消息類型（表單），用于接收用戶輸入的信息。將用戶輸入的信息傳遞到服務器中進行處理，如需要返回消息給用戶，則需要將消息內容顯示到網(wǎng)頁內容中。一次完整的交互，不止是有前端的頁面顯示，還要有后端的程序參與進來。數(shù)據(jù)的交互會有GET請求和POST請求。這兩種請求方法在Web開發(fā)中廣泛使用，用于在客戶端（瀏覽器）和服務器之間傳遞數(shù)據(jù)。GET請求用途：GET請求用于從服務器獲取數(shù)據(jù)。它通常用于請求獲取頁面、圖像、文檔等靜態(tài)資源，或者從服務器獲取特定數(shù)據(jù)。數(shù)據(jù)傳遞：數(shù)據(jù)通過URL查詢字符串傳遞，附加在URL后面，以問號（?）分隔。例如：/page?param1=value1¶m2=value2安全性：GET請求在URL中明文傳遞數(shù)據(jù)，因此不適合傳遞敏感信息，因為信息可以在瀏覽器歷史記錄、服務器日志等地方可見。緩存：GET請求可以被瀏覽器緩存，因此可以加快頁面加載速度。冪等性：多次發(fā)送相同的GET請求不會對服務器產生副作用，即多次請求不會改變服務器狀態(tài)。POST請求用途：POST請求用于向服務器提交數(shù)據(jù)，通常用于提交表單、發(fā)送用戶輸入數(shù)據(jù)等。數(shù)據(jù)傳遞：數(shù)據(jù)通過HTTP請求的消息體傳遞，不會顯示在URL中。因此，POST請求適合傳遞敏感信息。安全性：POST請求對數(shù)據(jù)進行加密，相對更安全，適合傳遞敏感信息。緩存：POST請求不會被瀏覽器緩存。冪等性：一般情況下，多次發(fā)送相同的POST請求可能會對服務器產生副作用，即多次請求可能會改變服務器狀態(tài)。但在某些情況下，可以通過設計來使POST請求具有冪等性?；窘换ヅe一個從表單獲取信息的例子，用于用于接收GET、POST消息并顯示，視圖函數(shù)代碼如下。@app.route('/form',methods=['GET','POST'])defform():#args用于獲取GET方式提交的數(shù)據(jù)msg_get=request.args.get('msg_get')#form用于獲取POST方式提交的數(shù)據(jù)msg_post=request.form.get('msg_post')returnrender_template('form.html',msg_get=msg_get,msg_post=msg_post)視圖函數(shù)處理了/from的路由請求，讓它同時支持GET和POST請求方法，然后用兩種獲取指定參數(shù)的值方法，將從GET和POST請求中獲取的數(shù)據(jù)作為參數(shù)傳遞給模板進行渲染?；窘换orm.html的內容按照書上4.1.1的去寫就好，最后的效果如下圖所示。GET表單提交測試示例圖POST表單提交測試示例圖文件上傳表單除了可以提交消息以外，還可以上傳文件。在Flask中上傳文件只需要定義兩個視圖函數(shù)即可：一個用于上傳文件，另一個用于獲取上傳的文件。首先定義獲取上傳文件的視圖函數(shù)，代碼如下：importos#定義上傳文件所存放的位置，此處定義為項目目錄下的"uploads"目錄basedir=os.path.abspath(os.path.dirname(__file__))app.config['UPLOADED_PATH']=os.path.join(basedir,'uploads')os.makedirs(app.config['UPLOADED_PATH'],exist_ok=True)#用于獲取上傳的文件@app.route('/files/<filename>')defuploaded_files(filename):path=app.config['UPLOADED_PATH']returnsend_from_directory(path,filename)文件上傳定義上傳文件的視圖函數(shù)。代碼如下：#用于上傳文件@app.route('/upload',methods=['GET','POST'])defupload():ifrequest.method=='POST':f=request.files.get('upload')f.save(os.path.join(app.config['UPLOADED_PATH'],f.filename))#將上傳目錄下的文件展示到頁面中files=os.listdir(app.config['UPLOADED_PATH'])returnrender_template('upload.html',files=files)文件上傳以下是相應模板頁面（upload.html）的內容{%extends'bootstrap/base.html'%}{%blocktitle%}文件上傳{%endblock%}{%blockcontent%}<divclass="container"><formrole="form"method="post"enctype