（十）表单的渲染

服务端代码:

<code>#学会了写表单类，如何将表单类渲染成HTML呢，此处可以结合前面学过的模板标签来进行渲染。</code>

<code>#一、服务端代码</code>

<code>#1、test_corms.py 文件</code>

<code>#coding:utf-8</code>

<code>from</code> <code>flask </code><code>import</code> <code>Flask, render_template</code>

<code>from</code> <code>forms </code><code>import</code> <code>LoginForm</code>

<code>app </code><code>=</code> <code>Flask(__name__)</code>

<code>@app</code><code>.route(</code><code>'/'</code><code>)</code>

<code>def</code> <code>login():</code>

<code>    </code><code>'''访问首页'''</code>

<code>    </code><code>form </code><code>=</code> <code>LoginForm()</code>

<code>    </code><code>return</code> <code>render_template(</code><code>"from1.html"</code><code>,form</code><code>=</code><code>form)</code>

<code>#预防重复提交</code>

<code>app.config[</code><code>'SECRET_KEY'</code><code>] </code><code>=</code> <code>'ddu384783274*%%Hgdiwre@#$%^&amp;*de'</code>

<code>if</code> <code>__name__ </code><code>=</code><code>=</code> <code>'__main__'</code><code>:</code>

<code>    </code><code>app.run(debug</code><code>=</code><code>True</code><code>)</code>

<code>#2、forms.py文件</code>

<code>from</code> <code>flask_wtf </code><code>import</code> <code>FlaskForm</code>

<code>from</code> <code>wtforms </code><code>import</code> <code>StringField, SubmitField, SelectField, RadioField,TextAreaField, \</code>

<code>    </code><code>DateField, BooleanField</code>

<code>from</code> <code>wtforms.validators </code><code>import</code> <code>DataRequired</code>

<code>from</code> <code>wtforms.widgets </code><code>import</code> <code>CheckboxInput, PasswordInput</code>

<code>class</code> <code>LoginForm(FlaskForm):</code>

<code>    </code><code>'''定义登录表单'''</code>

<code>    </code><code>username </code><code>=</code> <code>StringField(</code><code>'用户名'</code><code>,validators</code><code>=</code><code>[DataRequired()],</code>

<code>                           </code><code>render_kw</code><code>=</code><code>{</code><code>"required"</code><code>:</code><code>"required"</code><code>,</code><code>"class"</code><code>:</code><code>"form-controal"</code><code>})</code>

<code>    </code><code>password </code><code>=</code> <code>StringField(</code><code>'密码'</code><code>, validators</code><code>=</code><code>[DataRequired()], widget</code><code>=</code><code>PasswordInput())</code>

<code>    </code><code>language </code><code>=</code> <code>SelectField(</code><code>'编程语言'</code><code>,</code>

<code>        </code><code>choices </code><code>=</code> <code>[(</code><code>'cpp'</code><code>,</code><code>'c++'</code><code>),(</code><code>'py'</code><code>,</code><code>'python'</code><code>),(</code><code>'java'</code><code>,</code><code>'Java'</code><code>)])</code>

<code>    </code><code>code </code><code>=</code> <code>TextAreaField(</code><code>'代码'</code><code>)</code>

<code>    </code><code>date </code><code>=</code> <code>DateField(</code><code>'日期'</code><code>)</code>

<code>    </code><code>is_checked </code><code>=</code> <code>BooleanField(</code><code>'是否已经通过验证'</code><code>)</code>

<code>    </code><code>submit </code><code>=</code> <code>SubmitField(</code><code>'登录'</code><code>)</code>

前端代码：

<code>&lt;!DOCTYPE HTML&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>head</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>title</code><code>&gt;</code>

<code>            </code><code>flask-wtf 表单渲染</code>

<code>        </code><code>&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>body</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>form</code> <code>action</code><code>=</code><code>""</code><code>, </code><code>method</code><code>=</code><code>"get"</code><code>, </code><code>accept-charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>div</code><code>&gt;</code>

<code>                </code><code>{{ form.username.label }} : {{ form.username(id="id-username") }}</code>

<code>                </code><code>&lt;</code><code>small</code><code>&gt;{{ form.username.description }}&lt;/</code><code>small</code><code>&gt;</code>

<code>            </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>                </code><code>{{ form.password.label}} : {{ form.password }}</code>

<code>                </code><code>{{ form.language.label }} : {{ form.language }}</code>

<code>                </code><code>{{ form.code.label }} : {{ form.code }}</code>

<code>                </code><code>{{ form.date.label }} : {{ form.date }}</code>

<code>                </code><code>{{ form.is_checked.label}} : {{ form.is_checked}} </code>

<code>                </code><code>{{ form.submit.label }} : {{ form.submit }}</code>

<code>                </code><code>{{ form.csrf_token }}</code>

<code>        </code><code>&lt;/</code><code>form</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

<code></code>

本文转自 TtrToby 51CTO博客，原文链接:http://blog.51cto.com/freshair/1927432