Flask入門系列教程

1、在WEB應(yīng)用當(dāng)中，表單是和用戶交互的最常見的方式之一，學(xué)習(xí)好表單， 是非常重要的，用戶登錄注冊(cè)、撰寫文章等等操作都離不開表單的功能。表單 的處理并不簡單，除了要?jiǎng)?chuàng)建表單，還需要做相關(guān)的驗(yàn)證，還有錯(cuò)誤提示等等。 這些操作如果都從頭開始編寫，那么就太復(fù)朵了，不過幸運(yùn)的是，我們有強(qiáng)大 的WTForms幫助我們解決。HTML表單在HTML表單中，可以通過標(biāo)簽來創(chuàng)建,適過來定義字段。 用戶名 手機(jī)號(hào) !文本輸入框 編寫表單的HTML代碼有下面兒點(diǎn)需要注這：在form標(biāo)簽里使用method屬性將提交表單數(shù)據(jù)的HTTP請(qǐng)求方法指定為POST。 如果不指定，則會(huì)默認(rèn)使用GET方法，這會(huì)將表單數(shù)據(jù)通過URL提交

2、，容易 導(dǎo)致數(shù)據(jù)泄露，而且不適用于包含大量數(shù)據(jù)的請(qǐng)況。對(duì)于input元素必須要指定name屬性，否則無法提交數(shù)據(jù)，在服務(wù)器端，我們 也需要通過這個(gè)name屬性值來獲取對(duì)應(yīng)字段的數(shù)據(jù)。當(dāng)然，編寫HTML代碼并不是我們的主要工作，所以我們可以通過Flask 的相關(guān)插件來自動(dòng)生成這部分HTML代碼。VVTFormsWTFonns支持在Python中使用類定義表單，然后直接通過類定義生成對(duì) 應(yīng)的HTML代碼，這種方式更加方便，而且也更易于重用。因此，在一般的悄 況下，我們都不會(huì)直接使用HTML編寫表單，使用WTFonns是我們的第一選 擇。使用Flask-WTF處理表單擴(kuò)展Flask-WT丁集成了 W

3、TForms,使用它可以在Fbsk中方便的使用 WTFonnsO Flask-WTF將幫助我們更加方便的處理表單，包括表單的生成、解 析、CSRF等等。安裝Rask-WTF還是一樣的，直接通過pip安裝pip install flask-wtf因?yàn)镕lask-WTF默認(rèn)會(huì)為每一個(gè)表單啟用CSRF保護(hù)，Rask-WTF默認(rèn)悄 況下使用程序密鑰來對(duì)CSRF令牌進(jìn)行簽名，所以我們需要進(jìn)行如下設(shè)置 app-secret = my hard secret* 定義WTForms表單類一個(gè)表單山若干個(gè)輸入字段組成，這些字段分別用表單的類屬性來表示。下面 我們來編寫一個(gè)登錄類from flask_wtf im

4、port FlaskFormfrom wtforms import StringField, PasswordField, BooleanField, SubinitField, Select MultipleField, SelectFieldfrom wtforms.validators import DataRequired, EqualTo, ValidationError class LoginForm(FIaskFonn):在web頁面上會(huì)看到的表單字段。 如下是一些常用的WTFonns類字段字段類說明文本字段對(duì)應(yīng)的HTML vinput lype=”textStrineField

5、SubmitField提交按鈕PasswordField密碼文本字段vinput type=passwordusername = StringFieldCUsername, validators=DataRequired() password = PasswordField(Password vaIidators=|DataRequired() submit = SubmitField(Login)我們定義了一個(gè)LoginFonn類，該類中乂定義了三個(gè)字段，就是后面我們FileField文件上傳字段SelectField下拉列表在WTForms中，驗(yàn)證器(vjlidcUor)是一系列用于驗(yàn)證字

6、段數(shù)據(jù)的類，我 們?cè)趯?shí)例化字段類時(shí)使用validators關(guān)鍵字來指定附加驗(yàn)證器列表。如下是常用的驗(yàn)證器說明驗(yàn)證兩個(gè)字段是否一致驗(yàn)證器DataRequired驗(yàn)證數(shù)據(jù)是否存在Email驗(yàn)證email地址EqiialTo在模板中渲染表單為了能夠在模板中渲染表我們需要把表M實(shí)例傳入模板。首先實(shí)例化 表單類LoginForm,然后在render_teinplate()函數(shù)中傳入模板，于是我們修改 login試圖函數(shù)如下 dpp .route(yiogin/) def loginO：form = LoginFormOreturn render_template3ogin.html form=form)

7、接著我們?cè)賱?chuàng)建一個(gè)login.html文件，寫入如下(% extends bnse.html %(% import bootstrap/wtf.html as wtf % block title % My Web - Login % endblock %(% block page_content %) wtfquick_form(form) % for message in get_flashed_messages() %×( message % endfor %(% endblock %這樣，我們?cè)偎⑿挛覀兊捻?xiàng)u頁面，可以看到如下效果S B姑mWA UAfU；Uwnim*Logn

8、處理表單數(shù)據(jù)二般來說從獲取表單數(shù)據(jù)到保存表單數(shù)據(jù)大致需要以下兒步:解析請(qǐng)求，獲取表單數(shù)據(jù)對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換，驗(yàn)證表單數(shù)據(jù)是否符合要求如果驗(yàn)證錯(cuò)誤，那么提示相關(guān)的錯(cuò)誤信息如果驗(yàn)證通過，則保存數(shù)據(jù)提交表單在HTML中，當(dāng)表單類型為submit的字段被點(diǎn)擊時(shí)，就會(huì)創(chuàng)建一個(gè)提交表 單的HTTP請(qǐng)求，請(qǐng)求中會(huì)包含表單中的各個(gè)字段。山于Flask為路山默認(rèn)設(shè)置的監(jiān)聽的HTTP請(qǐng)求為GET,而表單往往都是 POST請(qǐng)求，所以我們需要手動(dòng)給試圖函數(shù)綁定POST請(qǐng)求 app.route(yiogin/ methods=GET POST)def loginO：form = LoginFormOreturn rende

9、r_templateIogin.html form=form)在試圖函數(shù)中處理表單對(duì)于數(shù)據(jù)的驗(yàn)證，我們可以使用函數(shù)va!idate_on_subnut(),如果返回True, 則代表驗(yàn)證通過。app.route(yiogin/ methods=GET POST)def loginO：form = LoginFormOif form,validate_on_subniit():username = fonn.username.datasessionusernaine = user nameflashU 登錄成功，%s! % username)return redirecl(uH_for(inde

10、x)return render_templateIogin.htmr, form=form)在這里，我們form.username.data來取表單中的用戶名，并通過 session來保存，然后再重定向到index視圖函數(shù) 下面我們?cè)賮砜纯磇ndex視視圖函數(shù)app.route(7*)def indexO：user = session.get(*usernaine)return render_template*index.htnil user=user)這個(gè)就相對(duì)簡單了，從session中拿到用戶名，然后傳遞給index.htinl模板, 而index.hum模板則與前面我們做的類似，就不再贅

11、述了。進(jìn)階應(yīng)用在模板中渲染錯(cuò)誤如果函數(shù)validate_on_submit()返回false,那么說明表單提交的數(shù)據(jù)驗(yàn)證不 通過，WTForins會(huì)把錯(cuò)誤消息添加到表單類的error屬性中，我們可以在模板 中輕松的取出。在loging.htinl中添加如下代碼(% for message in form.username.errors %)×( message % endfor %(% for message in forni.password.errors %×( message % endfor %效果如下:tfoMonattRUawmtg文件上傳對(duì)于文件上傳，其實(shí)

12、我們有許多安全的問題需要考慮: 驗(yàn)證文件大小過濾文件名稱驗(yàn)證文件類型下面我們來看一看WTFonns能幫助我們做些什么 首先定義一個(gè)文件上傳的表單類，一個(gè)圖片上傳的表單class UploadForm(冋askForm):pholo = FileFieldCUpIoad Image, validators=file_required(), file_allowed(upload_ set= Jpg)submit = SubmitFieId(*U plond)在這里，我們定義了用于上傳文件的表單，并且限制了只能上傳jpg格式 的文件類型下面我們編寫上傳圖片的視圖函數(shù)upload app,route

13、(yupload methods=GET POST) def uplo ad():form = UploadFormOreturn render_template*uploaci.html fonn=form)這里其實(shí)與登錄的視圖函數(shù)是類似的寫法 接下來就是upload.html文件的編寫 (% extends bnse.html %(% import bootstrap/wtfhtnir* as wtf %)% block title % My Web - Upload (% endblock % block page_content %( wtfquick_form(form) % for

14、 message in get_flashed_messages() %× ( message (% endfor %(% endblock %我們車新刷新頁面，得到如下效果HRak upload Inwf.處理上傳文件對(duì)于上傳的文件，我們?cè)诜?wù)器端需要做一定的處理，例如保存、校驗(yàn)等 等。下面我們繼續(xù)編寫upload視圖函數(shù)appconfigUPLOAD_PATH = os.pathjoin(app.root_path, uploadsJ app.route(yupload methods=GET POST)def upIoadO：form = UploadFormOif form

15、.validate_on_subinit():f = form.photo.datafilename = f filenamef save(os.pathjoin(app.configULOAD_PATH*, filename) flashed傳圖片文件成功?。縮essionfilename = filenamereturn redirect(url_for(*show_iinages)return render_templateupload.html； fonn=form)我們通過ffilenaine來獲取文件的名稱，并保存上傳的文件到指定tl錄 下面就是編寫展示圖片的視圖函數(shù)了ap p.r

16、outeC/u ploads/v path:fileruune:Jdef get_filefilenanie):return send_from_directory(app.configUPLOAD_PATH, filename)dp p.routeC/uploaded-images) def show_images():return render_template*uploacied.htmr)在上傳好圖片后，我們的程序會(huì)跳轉(zhuǎn)至另外的頁面，用于展示當(dāng)前的圖片(% extends bnse.html %(% import bootstrap/wif.html as wtf %(% block title % My Web - Upload (% endblock % block page