Flask Web开发(一)基于python的Web表单

做一个简单的web表单,当你输入用户名的时候会产生相应的欢迎信息,效果展示如下:
第一次启动服务器时的样子
输入用户名Handoking后的页面
空字符提交后的页面
其实空字符提交时会出现一行Resquired()函数产生的提醒文字,截图时点击屏幕就消失了。。。。
看到导航栏里有两个选项,在head中有标签图标,这些都是在下文中base.html中定义的,如果了解html的基本语法就很容易看明白。

定义表单

from flask.ext.wtf import Form
from wtforms import StringField, SubmitField
from wtforms.validators import Required
class NameForm(Form):
    name = StringField('What is your name?', validators=[Required()])
    submit = SubmitField('Submit')

使用扩展Flask-WTF,处理web表单会变的相对简单,对于小白的我来说感觉功能十分强大。在这个扩展中,每一个web表单都由一个form类表示,StringField和Submitfield分别是‘text’和‘submit’类型的输入元素,Required()函数是确保表单中输入不为空,这三个函数其实和在HTML中作用一模一样的,也正是为了下一步渲染成HTML格式,其实这个扩展就是把部分HTML的功能打包了,还有其他类似的HTML标准字段这个扩展也支持。

渲染表单
以上的代码中我们还定义了类NameForm以及其参数form,渲染这个简单表单时,可以通过form来导入模板,会渲染生成一个简单的表单。

<form method="POST">
{{ form.hidden_tag() }}
{{ form.name.label }} {{ form.name() }}
{{ form.submit() }}
</form>

可以用CSS修饰一下:

<form method="POST">
{{ form.hidden_tag() }}
{{ form.name.label }} {{ form.name(id='my-text-field') }}
{{ form.submit() }}
</form>

这是一个表单,如果一个页面很多表单的话,工作量会很大。扩展Flask-Bootstrap可以按照已经定义的格式来渲染表单,渲染整个页面的表单,使用方式如下

{ % import "bootstrap/wtf.html" as wtf % }
{{ wtf.quick_form(form) }}

wtf.quick_form() 函数的参数为 Flask-WTF 表单对象。使用 Flask-WTF 和 Flask-Bootstrap 渲染表单,暂且命名index.html 。

{ % extends "base.html" % }
{ % import "bootstrap/wtf.html" as wtf % }
{ % block title % }Flasky{ % endblock % }
{ % block page_content % }
<div class="page-header">
  <h1>Hello, { % if name % }{{ name }}{ % else % }Stranger{ % endif % }!</h1>
</div>
{{ wtf.quick_form(form) }}
{ % endblock % }

添加标题Flasky,在类代码块中用了条件结构,如果为true,那么执行if和else中的代码,如果为flase则执行else和endif之间的代码。第一句可以看出这里用了Flask-Bootstrap的包含导航条的基模板base.html,这里附上。

{ % extends "bootstrap/base.html" % }
{ % block title % }Flasky{ % endblock % }

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}

{ % block navbar % }
<div class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle"
      data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Flasky</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Home</a></li>
        </ul>
    </div>
  </div>
</div>
{ % endblock % }

{ % block content % }
<div class="container">
   { % block page_content % }{ % endblock % }
</div>
{ % endblock % }

路由和试图函数

@app.route('/', methods=['GET', 'POST'])
def index():
  name = None
  form = NameForm()
  if form.validate_on_submit():
     name = form.name.data
     form.name.data = ''
  return render_template('index.html', form=form, name=name)

在这里定义局部变量name的默认值为None,创建类实例NameForm来表示表单,若输入空字符即条件判断为false,if条件跳过执行,返回index.html重新渲染表单。如果不为空字符则执行if语句,服务器收到POST的命令请求,输入的‘name’由data获取赋值给name,然后data类似清空作用被赋值空字节,以便接受下一个输入的name。获取name后template利用模板处理表单数据,渲染包含数据的表单。
完整python代码

from flask import Flask, render_template
from flask_script import Manager
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import Required

manager = Manager(app)
bootstrap = Bootstrap(app)
moment = Moment(app)


class NameForm(FlaskForm):
    name = StringField('What is your name?', validators=[Required()])
    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    name = None
    form = NameForm()
    if form.validate_on_submit():
        name = form.name.data
        form.name.data = ''
    return render_template('index.html', form=form, name=name)


if __name__ == '__main__':
    manager.run()
发布了131 篇原创文章 · 获赞 74 · 访问量 15万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览