《人工智能技術(shù)開發(fā)框架》課件-第2章 Flask WEB應(yīng)用開發(fā)

人工智能技術(shù)開發(fā)框架計算機(jī)與軟件學(xué)院第二章FlaskWEB應(yīng)用開發(fā)01AI應(yīng)用開發(fā)概述02人工智能發(fā)展歷史03數(shù)據(jù)處理與分析工具04機(jī)器學(xué)習(xí)框架Scikit-Learn05深度學(xué)習(xí)框架Tensorflow202FlaskWEB應(yīng)用開發(fā)WEB工作原理Web（WorldWideWeb）即全球廣域網(wǎng)，也稱為萬維網(wǎng)，工作原理是：當(dāng)你請求一個網(wǎng)絡(luò)資源的時候，應(yīng)該在瀏覽器上輸入所要訪問網(wǎng)頁的統(tǒng)一資源定位符（UniformResourceLocator，URL），當(dāng)然，也可以通過超鏈接方式鏈接定位到要請求的那個網(wǎng)頁或靜/動態(tài)資源。之后是對URL根據(jù)分布于全球的因特網(wǎng)域名解析系統(tǒng)的數(shù)據(jù)庫進(jìn)行查詢解析，并根據(jù)解析結(jié)果決定訪問哪一個IP地址對應(yīng)的服務(wù)器。接下來是向?qū)?yīng)的Web服務(wù)器發(fā)出一個HTTP請求，相應(yīng)的Web服務(wù)器接收HTTP請求后，調(diào)用相應(yīng)的Web應(yīng)用處理請求，然后Web服務(wù)器再將響應(yīng)結(jié)果（響應(yīng)結(jié)果指的是圖片、超文本標(biāo)記語言，即HTML、JavaScript和視頻等資源）返回給客戶端瀏覽器。URL簡介通常的URL一般由傳輸協(xié)議名、資源所在的主機(jī)名或IP地址、網(wǎng)絡(luò)服務(wù)程序的端口號和（目錄）文件名等幾個部分組成，即：URL=傳輸協(xié)議+主機(jī)名+端口號+（目錄）文件名傳輸協(xié)議一般是http（HyperTextTransferProtocol，超文本傳輸協(xié)議）或https（HyperTextTransferProtocoloverSecureSocketLayer，安全套接字層超文本傳輸協(xié)議）主機(jī)名這里主要指服務(wù)（www）+域名（如:）端口號是可選的，沒有給出的話，默認(rèn)端口一般是指80號端口（http協(xié)議使用的80端口，https協(xié)議使用的443端口）目錄的出現(xiàn)是在網(wǎng)站結(jié)構(gòu)復(fù)雜時，某些資源會放到某個目錄下或若干個目錄下，這樣就構(gòu)成了文件的路徑。文件名精確地指定了要訪問的Web頁面。未指定文件名時，處理請求的Web服務(wù)器會根據(jù)服務(wù)器本身的設(shè)置查找出默認(rèn)的文件，如index.html、default.jsp等:80:443CDN簡介騰訊-深圳（1萬部電影）用戶1（北京）網(wǎng)絡(luò)用戶2（北京）用戶1（南京）用戶2（南京）CDN（南京）CDN（北京）Flask安裝用pip安裝Flask：pipinstallflaskFlask默認(rèn)自帶了一個輕量級的WEBServer，無需用戶單獨(dú)安裝簡單Flask程序示例所有的Flask程序都必須創(chuàng)建一個程序?qū)嵗eb服務(wù)器使用一種名為Web服務(wù)器網(wǎng)關(guān)接口（WebServerGatewayInterface，WSGI）的協(xié)議，把接收自客戶端的所有請求都轉(zhuǎn)給這個對象進(jìn)行處理。程序?qū)嵗荈lask類的對象，經(jīng)常使用下述代碼創(chuàng)建：路由和視圖函數(shù)的綁定，使用@符號配置路由：@app.route('/')defhello_world():return'HelloWorld!‘這里的hello_world()函數(shù)叫做視圖函數(shù)，視圖函數(shù)必須要有返回值，返回價值為字符串或簡單的HTML頁面等內(nèi)容。#創(chuàng)建程序?qū)嵗齠romflaskimportFlaskapp=Flask(__name__)#啟動程序if__name__=='__main__':

#指定默認(rèn)主機(jī)為是，port為8888

app.run(debug=True,host='',port=8888)URL參數(shù)傳遞Flask中如果要傳遞一個變量或者一個參數(shù)，可以通過表單和地址欄兩種方式來傳遞。其中，通過瀏覽器地址欄URL方式傳遞/獲取某個變量或參數(shù)使用得比較多。這樣可以使用相同的URL指定不同的參數(shù)來訪問不同的內(nèi)容Flask通過URL傳遞參數(shù)，傳遞參數(shù)的語法是：'/<參數(shù)名>/'。需要注意兩點(diǎn)：參數(shù)需要放在一對<>（尖括號）內(nèi)；視圖函數(shù)中需要設(shè)置同URL中相同的參數(shù)名示例代碼：@app.route("/user/<name>")defvisitByName(name):return"接收到的名稱為：%s"%nameURL反轉(zhuǎn)有時候在作網(wǎng)頁重定向或是模板文件時需要使用在視圖函數(shù)中定義的URL，我們必須根據(jù)視圖函數(shù)名稱得到當(dāng)前所指向的URL，這就是URL反轉(zhuǎn)。使用URL反轉(zhuǎn)，用到了url_for()函數(shù)，需要使用fromflaskimporturl_for導(dǎo)入，url_for()函數(shù)最簡單的用法是以視圖函數(shù)名作為參數(shù)，返回對應(yīng)的URL頁面跳轉(zhuǎn)和重定向用戶在訪問某個頁面的時候，我們希望他登錄后才能訪問該頁面，如果此時他沒有登錄，系統(tǒng)就讓瀏覽器由當(dāng)前頁面跳轉(zhuǎn)到登錄頁面，這里就涉及頁面重定向問題。所謂頁面重定向，就是用戶在打開某個頁面的時候，我們期望頁面跳轉(zhuǎn)到另一個指定的頁面，讓用戶完成某種操作或執(zhí)行某個動作。Flask中提供了重定向函數(shù)redirect()，該函數(shù)的功能就是跳轉(zhuǎn)到指定的URL重定向是將原本的URL重新定向成為一個新的URL，可以實(shí)現(xiàn)頁面的跳轉(zhuǎn)。Flask中使用到了redirect()函數(shù)，需要使用fromflaskimportredirect將其導(dǎo)入才能使用頁面跳轉(zhuǎn)和重定向?yàn)g覽器服務(wù)器:5000/Index()/user_login:5000/user_loginUser_login()這是用戶登錄頁面Jinja2模板引擎在Flask中通常使用Jinja2模板引擎來實(shí)現(xiàn)復(fù)雜的頁面渲染。Jinja2被認(rèn)為是靈活、快速和安全的模板引擎技術(shù)，被廣泛使用隨著不同終端（個人PC、平板電腦，手機(jī)、移動穿戴設(shè)備等）的興起，開發(fā)人員在越來越多地思考：如何寫一份功能代碼（業(yè)務(wù)邏輯代碼），這份業(yè)務(wù)邏輯代碼能夠在響應(yīng)式或非響應(yīng)式設(shè)備上都能使用。為了提升開發(fā)效率，開發(fā)人員開始高度重視前后端的分離，后端負(fù)責(zé)業(yè)務(wù)邏輯/數(shù)據(jù)訪問，前端負(fù)責(zé)表現(xiàn)、交互邏輯，同一份業(yè)務(wù)邏輯代碼可應(yīng)用于多個不同終端的視圖渲染后端實(shí)際上實(shí)現(xiàn)的功能一般叫做業(yè)務(wù)邏輯，前端完成的功能一般叫做表現(xiàn)邏輯。如果把業(yè)務(wù)邏輯和表現(xiàn)邏輯混在一起，勢必造成系統(tǒng)耦合度高、代碼維護(hù)困難的現(xiàn)象，因此分離業(yè)務(wù)邏輯和表現(xiàn)邏輯，把表現(xiàn)邏輯交給視圖引擎，即網(wǎng)頁模板模板實(shí)質(zhì)上是一個靜態(tài)的包含HTML語法的全部或片段的文本文件，也可包含由變量表示的動態(tài)部分。使用真實(shí)值替換網(wǎng)頁模板中的變量，生成對應(yīng)數(shù)據(jù)的HTML片段，這一過程稱為渲染。Flask提供了Jinja2模板引擎來渲染模板，模板文件保存在templates目錄中渲染模板Flask通過render_template()函數(shù)來實(shí)現(xiàn)模板的渲染。要使用Jinja2模板引擎，需要使用fromflaskimportrender_template命令導(dǎo)入render_template函數(shù)。在視圖函數(shù)的return方法中，render_template()函數(shù)的首個參數(shù)聲明使用哪一個模板文件。向模板中傳遞參數(shù)（1）Flask提供Jinja2模板引擎來渲染模板的同時，還可以將程序中的參數(shù)或變量值傳遞給指定的模板進(jìn)行渲染render_template()函數(shù)第一個參數(shù)是指定模板文件的名稱，比如這里的index.html和user.html，第二個參數(shù)為可選項，可以為空。第二個參數(shù)不為空時，一般用于向模板中傳遞變量同時在模板中接收變量值，需要把變量放在{{}}，比如{{var1}}等向模板中傳遞參數(shù)（2）如果視圖函數(shù)中有多個變量值都需要傳遞給模板，可以使用**locals()方法在模塊中可以直接使用變量名來獲取參數(shù)值，如：{{title}}和{{author}}來直接使用變量if語句（1）在Jinja2模板引擎中可以使用if和for循環(huán)控制語句，控制模板渲染的方向。模板引擎中，if和for語句中應(yīng)該放到{%%}中在前端的Jinja2語法中，if可以進(jìn)行判斷：是否存在參數(shù)，存在的參數(shù)是否滿足條件基本語法如下：{%ifcondition%}<!--condition指的是條件-->{%else%}<!--條件不滿足時-->{%endif%}<!--結(jié)束if語句-->if語句（2）if…elif…else…endif語法結(jié)構(gòu)：{%ifcondition1%}<!–condition1指的是條件1-->{%elifconditio2%}<!–condition2指的是條件2-->{%else%}<!--條件不滿足時-->{%endif%}<!--結(jié)束if語句-->for語句（1）模板中的for語句定義如下：{%for目標(biāo)in對象%}<p>目標(biāo)</p>{%endfor%}注意：不可以使用continue和break表達(dá)式來控制循環(huán)的執(zhí)行。for語句（2）使用**locals()傳遞參數(shù)的例子過濾器與字符串操作相關(guān)的過濾器對列表進(jìn)行操作相關(guān)的過濾器對數(shù)值進(jìn)行操作相關(guān)的過濾器

過濾器本質(zhì)上是一個轉(zhuǎn)換函數(shù)，有時候不僅需要輸出變量的值，還需要把某個變量的值修改后再顯示出來，而在模板中不能直接調(diào)用Python中的某些方法，這時就用到了過濾器。與字符串操作相關(guān)的過濾器<p>{{name|default('None',true)}</p> name為變量名，如果name為空，則用None替換name<p>{{'hello'|capitalize}}</p> 將字符串hello轉(zhuǎn)化成Hello，實(shí)現(xiàn)首字母大寫的目的<p>{{'HELLO'|lowere}}</p> 將字符HELLO全部轉(zhuǎn)為小寫<p>{{'hello'|replace('h','x')}}</p> 將hello中的字母h替換成x對列表進(jìn)行操作相關(guān)的過濾器<p>{{[01,80,42,44,77]|first}}</p> 取得列表中的首個元素01<p>{{[01,80,42,44,77]|last}}</p> 取得列表中的最后一個元素77<p>{{[01,80,42,44,77]|count}}</p> 取得列表中的元素個素，個數(shù)為5，count也可以使用length替換<p>{{[01,80,42,44,77]|sort}}</p> 列表中的元素重新排序，默認(rèn)按照升序進(jìn)行排序<p>{{[01,80,42,44,77]|join(','}}</p> 將列表中的元素合并為字符串，返回1,80,42,44,77對數(shù)值進(jìn)行操作相關(guān)的過濾器<p>{{18.8888|round}}</p>四舍五入取得整數(shù)，返回19.0<p>{{18.8888|round(2,’floor’)}}</p>保留小數(shù)點(diǎn)后2位，返回結(jié)果為18.88<p>{{-2|abs}}</p>求絕對值運(yùn)算，返回結(jié)果為2宏的使用宏的定義宏的導(dǎo)入include的使用宏的定義jinja2中的宏功能類似于傳統(tǒng)程序語言中的函數(shù)，它跟Python中的函數(shù)類似，可以傳遞參數(shù)，但是不能有返回值，可以將一些經(jīng)常用到的代碼片段放到宏中，然后把一些不固定的值抽取出來作為一個變量宏(Macro)有聲明和調(diào)用兩個部分：<!--定義宏-->{%macroinput(name,type='text',value='')-%} <inputtype="{{type}}"name="{{name}}"value="{{value|e}}">{%-endmacro%}上面的代碼定義了一個宏，定義宏要加macro，宏定義結(jié)束要加endmacro標(biāo)志。上面宏定義的名稱是input，它有3個參數(shù)，分別是name、type和value，value參數(shù)有默認(rèn)值。<!--調(diào)用宏-->{{input('username')}}{{input('password',type='password')}}宏的使用：舉例{#宏的定義#}{%macroinput(name,type='text',value='')-%}<inputtype="{{type}}"name="{{name}}"value="{{value|e}}">{%-endmacro%}{#宏的使用#}<p>用戶名：{{input('username')}}</p><p>密碼：{{input('password',type='password')}}</p><p>登錄：{{input('submit',type='submit',value='登錄')}}</p>執(zhí)行網(wǎng)頁后，生成對應(yīng)的代碼如下：<p>用戶名：<inputtype="text"name="username"value=""></p><p>密碼：<inputtype="password"name="password"value=""></p><p>登錄：<inputtype="submit"name="submit"value="登錄"></p>宏的導(dǎo)入一個宏可以被不同的模板使用，建議將其聲明在一個單獨(dú)的模板文件中。需要使用時導(dǎo)入即可，而導(dǎo)入的方法類似于Python中的importinclude的使用在宏文件中引用其他宏，可以使用include語句。include語句可以把一個模板引入到另外一個模板中，類似于把一個模板的代碼復(fù)制到另外一個模板的指定位置注意：使用include標(biāo)簽時是在templates目錄中尋找相應(yīng)的文件，不能使用相對路徑set語句和with語句set與with語句都可以在Jinja2中定義變量并賦予值。set定義的變量在整個模板范圍內(nèi)都有效，with關(guān)鍵字在定義變量并賦值的同時，限制了with定義變量的作用范圍。set關(guān)鍵字的使用方法：（1）給變量賦值：{%settelephone='1388888888'%}（2）給列表或數(shù)組賦值：{%setnav=[('index.html','index'),('product.html','product)]%}可以在模板中使用{{telephone}}和{{nav}}來引用這些定義的變量。with關(guān)鍵字的使用方法：{%withpass=60%}{{pass}}{%endwith%}with定義的變量的作用范圍在{%with%}和{%endwith%}代碼塊內(nèi)，在模板的其他地方，引用此變量值無效。靜態(tài)文件加載靜態(tài)文件的加載一般需要先新建文件夾static，在文件夾下再新建css、js和images文件夾，在這些文件夾中存放css、js、images文件，同時要需要使用‘url_for’函數(shù)。這里僅以加載圖片文件為例說明靜態(tài)文件的加載模板的繼承一個系統(tǒng)網(wǎng)站往往需要統(tǒng)一的結(jié)構(gòu)，這樣看起來比較“整潔”。比如，一個頁面中都有標(biāo)題、內(nèi)容顯示、底部等幾個部分。如果在每一個網(wǎng)頁中都進(jìn)行這幾部分的編寫，那么整個網(wǎng)站將會有很多冗余部分，而且編寫的網(wǎng)頁程序也不美觀。這時可以采用模板繼承，即將相同的部分提取出來，形成一個base.html，具有這些相同部分的網(wǎng)頁通過繼承base.html來得到對應(yīng)的模塊。模板的繼承語法： {%extends“模板名稱”%}塊的概念：模板繼承包含基本模板和子模板。其中，基本模板里包含了網(wǎng)站里基本元素的基本骨架，但是里面有一些空的或不完善的塊（block）需要用子模板來填充。使用方法如下：

在父模板中：…{%blockblock的名稱%}{%endblock%}…

在子模板中：…{%blockblock的名稱%}子模板中代碼{%endblock%}…視圖高級技術(shù)：路由路由的概念：在Flask應(yīng)用中，路由是指用戶請求的URL與視圖函數(shù)之間的映射，處理URL和函數(shù)之間關(guān)系的程序稱為路由。Flask框架根據(jù)HTTP請求的URL在路由表中匹配預(yù)定義的URL規(guī)則，找到對應(yīng)的視圖函數(shù)，并將視圖函數(shù)的執(zhí)行結(jié)果返回給服務(wù)器路由視圖函數(shù)的綁定在Flask框架中，默認(rèn)是使用@app.route裝飾器將視圖函數(shù)和URL綁定，例如：@app.route('/')defhello_world():retrun‘helloworld’上述代碼中，視圖函數(shù)為hello_world()，使用app.route裝飾器將URL和執(zhí)行的視圖函數(shù)的關(guān)系保存到app.url_map屬性上。上述代碼實(shí)現(xiàn)了將URL'/'與視圖函數(shù)hello_world()的綁定，可以通過url_for('hello_world')反轉(zhuǎn)得到URL'/'，實(shí)際上可以給這個裝飾器再加上endpoint參數(shù)（給這個URL命名）。@app.route('/',endpoint='index')defhello_world():return‘helloworld’注意：一旦使用了endpoint參數(shù)，在使用url_for()反轉(zhuǎn)時就不能使用視圖函數(shù)名了，而是要用自定義的URL名，如：url_for(‘index’)，而不是url_for('hello_world')除了使用@app.route裝飾器，我們還可以使用add_url_rule來綁定視圖函數(shù)和URL數(shù)據(jù)交互表單處理文件上傳表單處理：簡單的表單處理表單是搜集用戶數(shù)據(jù)信息的各種表單元素的集合區(qū)域，它的作用是實(shí)現(xiàn)用戶和服務(wù)器的數(shù)據(jù)交互。通過表單搜集客戶端輸入的數(shù)據(jù)信息，然后提交到網(wǎng)站服務(wù)器端進(jìn)行處理。Form表單是Web應(yīng)用中最基礎(chǔ)的一部分，為了能處理Form表單，F(xiàn)lask-WTF擴(kuò)展提供了良好的支持在上面的案例中，對表單沒有進(jìn)行必要的保護(hù)措施，很容易被人利用，控制用戶在當(dāng)前已登錄的Web應(yīng)用程序上執(zhí)行非本意的操作，如跨站請求偽造（CSRF，Cross-siterequestforgery）。因此，在實(shí)際部署服務(wù)器上的代碼時，不建議使用這個方式處理表單，推薦使用Flask-WTF方式進(jìn)行表單處理（請同學(xué)們自學(xué)）文件上傳Flask文件上傳有3點(diǎn)要求：一個<form>標(biāo)簽被標(biāo)記有enctype=multipart/form-data，并且在里面包含一個<inputtype=file>標(biāo)簽服務(wù)端應(yīng)用通過請求對象上的files字典訪問文件使用文件的save()方法將文件永久地保存在文件系統(tǒng)上的某處注意：表單中必須要有enctype=“multipart/form-data”，否則上傳文件無效。一般可以寫成：<formaction="“method="post“enctype="multipart/form-data">實(shí)現(xiàn)一個上傳和保存文件的WEB應(yīng)用實(shí)戰(zhàn)案例第二章課后作業(yè)（1）習(xí)題1：請參考如下代碼，實(shí)現(xiàn)URL反轉(zhuǎn)功能