Flask学习笔记(一)----一个带有表单的页面

Flask学习笔记(一)----第一个Flask项目

写在前面

系统环境:Deepin15.11
编译环境和编译器:Python3.6 , pycharm2019.03

Flask作为一款优秀的轻量级Python Web框架，对于初学者来说十分的友好，在此整理一下阅读《Flask Web开发：基于python的Web应用开发实战》前四章的demo笔记。

第一步：通过Pycharm自动构建Flask项目

Pycharm能够帮助我们自动的构建一个Python的虚拟环境，并同时导入有关的依赖包同时创建好项目。在Pycharm中选择新建一个Flask项目，同时并创建虚拟环境，这样我们的这个项目在以后继续添加其他依赖包的时候也不会影响到系统的Python环境，避免出现不同版本包的冲突等问题。

在此，以reflask作为项目名构建项目，构建完成后，项目目录如下：

此时项目已经是可以运行的状态，通过右上角的run图标(shift+F10)可以运行项目，默认运行在本地的5000端口，通过默认路由返回“Hello World”字符串。
在此处由装饰器修饰的函数很好理解，就是用于处理默认地址下的GET请求，在下面仿写一个：

#此处通过显示声明，这是一个处理GET请求的函数，返回的结果是一个字符串
@app.route('/mydef', methods=['GET'])
def mydef():
    #字符串中间存单引号，所以串外层需要使用双引号
    return "It's my def"

通过在浏览器地址栏输入“127.0.0.1:5000/mydef”便能够触发调用此函数，查看到返回的字符串

第二步：通过Jinjia2构建模板

Jinjia2是一个语法类似Python的，用于描述页面元素，进行数据渲染加工的工具，类似于J2EE中的JSP。
首先我们先导入bootsrap模块，方便调用一些好用好看的组件，然后使用WTF表单组件，处理表单数据，防止被攻击。获取用户输入的用户名，同时现实对应的欢迎信息。界面如下：

通过表单中不同的信息输入，相应的修改欢迎信息。例如输入：Tom

模板页面的代码如下：

	{% 继承bootstrap的基础页面 %}
    {% extends "bootstrap/base.html" %}
    {% 导入wtf组件 %}
    {% import "bootstrap/wtf.html" as wtf %}

    {% 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 collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
    {% endblock %}

	{% 定义内容 %}
    {% block content %}
    <div class="container">
        <div class="page-header">
        	{% 根据name传入的串进行渲染 %}
            <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>
        </div>
    </div>
	
	{% 调用wtf表单模块 %}
    {{ wtf.quick_form(form) }}
    {% endblock %}

模板文件完成之后，需要编写好对应的处理逻辑，在app.py文件中，添加导入对应模块，添加好对应路由函数。

from flask import Flask
from flask import render_template
from flask_bootstrap import Bootstrap
from flask_wtf import Form
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
#在wtf的模块中防止表单的跨站点攻击，设置一个验证加密串
app.config['SECRET_KEY'] = 'hardtoguess'
#调用bootstrap模块
bootstrap = Bootstrap(app)

#自定义表单的数据格式和预设内容
class NameForm(Form):
    name = StringField('What is your name?', validators=[DataRequired()])
    submit = SubmitField('Submit')

#路由函数
@app.route('/')
def hello_world():
    return render_template('index.html')

#路由函数
@app.route('/hello', methods=['GET', 'POST'])
def hello2():
    # return 'hello my def %s' % name
    name = None
    form = NameForm()
    if form.validate_on_submit():
        name = form.name.data
        form.name.data = ''
    return render_template('user.html', form=form, name=name)

#资源错误处理函数
@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404

#服务器异常处理函数
@app.errorhandler(500)
def page_not_found(e):
    return render_template('500.html'), 500


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

在这里最后自定义了两个错误状态处理函数，同时也是使用了自定义的错误处理页面。可在template文件夹下查看到404.html和500.html以及它们的父页面error.html

一个无需连接数据库的Web服务搭建完成，项目代码详见github.
地址：https://github.com/DivingCats/reflask.git