Flask Web开发笔记-02

Web表单，(easy_install.exe flask-wtf 安装该扩展包）

文件结构

hello.py

from flask import Flask, render_template, request
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from datetime import datetime
# -*- coding: UTF-8 -*-
from flask import Flask, render_template, redirect, session, url_for, flash
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from flask_wtf import Form
from wtforms import SubmitField, StringField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string' #设置秘钥
bootstrap = Bootstrap(app)
moment = Moment(app)

#定义表单类，一个文本字段和一个提交按钮
class NameForm(Form):
    name = StringField('What is your name?', validators=[DataRequired()])
    submit = SubmitField('Submit')


@app.route('/', methods=['GET', 'POST'])
def index():
    form = NameForm()
    if form.validate_on_submit():
        old_name = session.get('name') # 从会话中获取名字
        if old_name is not None and old_name != form.name.data:
            flash('Looks like you have changed your name!')
        session['name'] = form.name.data
        return redirect(url_for('index'))
    return render_template('index.html', form=form, name=session.get('name'))


if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
{% 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 %}
</html>

base.html

 <!-- extends指令从Flask-Bootstrap中导入base.html,实现继承 -->
 <!-- 三个块title navbar content都是基模板提供的，在该衍生模块中重新定义-->
{% extends "bootstrap/base.html "%}
{% block title %}Flasky{% 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 collappse">
			<ul class="nav navbar-nav">
				<li><a href="/">Home</a></li>
			</ul>
		</div>
	</div>
</div>
{% endblock %}

{% block content %}
<div class="container">
	{% for message in get_flashed_messages() %}
		{% if message %}
			<div class="alter alter-warining">
				<button type="button" class="close" data-dismiss="alter">×</button>
				{{ message }}
			</div>
		{% endif %}
	{% endfor %}
	{% block page_content %}{% endblock %}
</div>
{% endblock%}

效果

Flask Web开发笔记-02

猜你喜欢