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

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

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

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

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

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