# Flask實作_ext_04_Flask-WTF_表單建立_進階 ###### tags: `flask` `flask_ext` `python` `wtform` ## 說明 上一篇[Flask實作_ext_03_Flask-WTF_表單建立](https://hackmd.io/s/ByofdR1XG)實作中，我們很輕鬆的透過`flask-wtf`來創建了表單類，但是在寫`errors`的訊息呈現的時候應該發現到了，如果你表單有十個欄位的話那不是要整死人了嗎?即使不管`errors`的設置，光十個欄位要弄十個`{{ field.label }}`、`{{ field }}`，工作量也是夠嚇人的了。 這時候有兩種作法可以減化工作，不管那一種都是可以依自己的需求來採用，如下兩種範例說明。 ## 範例 ### flask-bootstrap `bootstrap`可以說是目前網頁`RWD`的主流，這部份Flask也沒有放過，也被整併進來，後續有機會再另篇專文討論，這邊只談怎麼應用它。 首先是啟動Flask的Python文件調整，如下： ```python= from flask import Flask, render_template from view_form import UserForm from flask_bootstrap import Bootstrap app = Flask(__name__) Bootstrap(app) ...下略 ``` 第3行：加入`import flask_bootstrap` 第6行：初始化`flask_bootstrap` 然後調整Html文件`user.html`，如下： ```htmlmixed= {% import "bootstrap/wtf.html" as wtf %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <div class="container"> <h1> WTF表單測試 </h1> <div class="container"> {{ wtf.quick_form(form) }} </div> </div> </body> </html> ``` 第1行：利用`jinja2`的表達式來`import`需求的套件，並且命名為`wtf` 第22行：利用`flask-bootstrap`內的`wtf.html`(即我們命名為`wtf`)內寫好的`macro: quick_form`來快速渲染表單。 在Html中只需要把後端傳來的參數`form`提供給`wtf.quick_form()`就行了，非常快速便利，這應用於對排版不是那麼要求的情況下來使用! ### macro `macro`是`jinja2`中一個像`function`的功能，可以透過引入`macro`來減少重覆性的程式碼，這在`jinja2`中非常的實用，務必花時間瞭解，相關作法如下說明： 1. 新增一個Html文件，命名為`_userform.html`，這是一個約定俗成的命名方式，不需要過於介意。<sub>(以底線開頭)(基本上，第一個作法也是利用`macro`來處理)</sub> 透過`{% macro functionName(parameter) %}{% endmacro %}` 來定義`macro`的區塊，然後將重覆性的Html先貼上，上例是產生欄位、欄位名稱以及驗證失敗的錯誤訊息。 ```htmlmixed= {% macro render_field(field) %} <p> {{ form.username.label }} {{ form.username }} {% if form.username.errors %} {% for error in form.username.errors %} {{ error }} {% endfor %} {% endif %} </p> {% endmacro %} ``` 2. 將重覆性的部份利用參數做調整，如下： ```htmlmixed= {% macro render_field(field) %} <p> {{ field.label }} {{ field(**kwargs) }} {% if field.errors %} {% for error in field.errors %} {{ error }} {% endfor %} {% endif %} </p> {% endmacro %} ``` 第1行：渲染的標的是欄位，因此傳入參數為欄位 第3~6行：將原本以`form`的部份調整為以傳入的欄位`field` 3. 調整`user.html` ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% from "_userform.html" import render_field %} <form method="POST" action="{{ url_for('user') }}" > {{ form.hidden_tag() }} {{ render_field(form.username) }} {{ render_field(form.email) }} {{ render_field(form.submit) }} </form> </body> </html> ``` 第8行：引入我們所定義的`macro` 第10行：務必設置，否則會拋出異常 第11~13行：利用`macro`來渲染欄位 ## 總結 我們實作了`macro`，這跟`function`很類似，就連`import`的方式都是一樣的，我們還利用`flask-bootstrap`自帶的`macro: quick_form`來快速產生表單，相信產生的表單已經能夠應付80%以上的應用場景，即使兩種方式都不適合，也可以利用`jinja2`的表達式來硬刻產生我們需要的Html版面。 **Flask-WTF_表單建立：**[Flask實作_ext_03_Flask-WTF_表單建立](https://hackmd.io/s/ByofdR1XG)