Flask网页开发学习指南

大数据学习路线图

Flask简介

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 。Flask使用 BSD 授权。
Flask也被称为 “microframework” ,因为它使用简单的核心,用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具。

1.Flask安装

在Linux中安装Flask框架(假设已经安装了Python3环境),可以使用如下命令:

pip3 install Flask

如果安装成功,可以看到类似如下的内容:

Successfully installed Flask-1.0.2 Werkzeug-0.15.2 click-7.0 itsdangerous-1.1.0

2.基本语法

(1)初始化

所有Flask程序都必须创建一个程序实例,Web服务器使用一种名为Web服务器网关接口的的协议(WSGI),把接收自客户端的所有请求转发给这个对象处理。程序实例是Flask类的对象,使用下面代码构建:

from flask import Flask
app = FLask(__name__)

Flask类的构造函数只有一个必须指定的参数,即程序主模块或则包的名称。。在大多数程序中,Python 的name 变量就是所需的值。

(2)路由和视图函数

客户端把请求转发给Web服务器,Web服务器再把请求发送给Flask程序实例。程序实例需要知道对于每个URL请求,运行哪些代码,所以保存一个URL请求到Python函数的映射关系。处理URL和函数映射关系的程序称为路由。

在Flask 程序中定义路由的最简便方式,是使用程序实例提供的app.route 修饰器,把修饰的函数注册为路由。下面的例子说明了如何使用这个修饰器声明路由:

@app.route("/")
def index():
    return "<h1>hello,Flask</h1>"

这里把index() 函数注册为程序根地址的处理程序。在浏览器中访问网站首页后,会触发服务器执行index() 函数。这个函数的返回值叫做响应,是客户端接收到的内容。像index这样的函数称为视图函数。视图函数的返回的响应可以是简单的html,也可以是复杂的表单。

(3)启动服务器

程序实例用run 方法启动Flask 集成的开发Web 服务器:

if __name == '___main_':
    app.run(debug=True)

name==’main’ 是Python 的惯常用法,在这里确保直接执行这个脚本时才启动开发Web 服务器。如果这个脚本由其他脚本引入,程序假定父级脚本会启动不同的服务器,因此不会执行app.run()。

服务器启动后,会进入轮询,等待并处理请求。轮询会一直运行,直到程序停止,比如按Ctrl-C 键

有一些选项参数可被app.run() 函数接受用于设置Web 服务器的操作模式。在开发过程中启用调试模式会带来一些便利,比如说激活调试器和重载程序。要想启用调试模式,我们可以把debug 参数设为True。

3.Hello World网页

建立一个代码文件testweb.py,内容如下:

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
    return '<h1>hello,flask</h1>'

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

然后,在Linux Shell环境中执行如下命令:

python3 testweb.py

然后,屏幕上会出现如下信息:

 * Serving Flask app "testweb" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 267-367-823

这时,可以在Linux系统中,打开一个浏览器,在地址栏中输入“http://localhost:5000” 就可以在网页中看到Hello World文字了。

使用网页模板

在网页目录下,创建一个templates目录,把模板文件存放在该目录下,比如,在这个模板目录下建立一个index.html,内容如下:

<html>
  <head>
    <title>Welcome</title>
    </head>
  <body>
      <h1>Database Lab of Xiamen University</h1> 
  </body>
</html>

然后,把testweb.py的内容修改为如下:

from flask import Flask
from flask import render_template
app = Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")

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

使用Ctrl+C组合键,把原来已经在运行的testweb.py结束掉,然后,在Linux Shell环境中执行如下命令:

python3 testweb.py

就可以看到网页了。

向网页模板传递值

把testweb.py修改为:

from flask import Flask
from flask import render_template
app = Flask(__name__)

@app.route('/')
def index():
    user = {'username': 'Xiaoming'}
    return render_template("index.html",
      title='Welcome',
      user=user)

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

把index.html文件修改为:

<html>
  <head>
        <title>{{title}}</title>
        </head>
  <body>
      <h1>Hello {{user.username}}</h1>
      <h1>Database Lab of Xiamen University</h1>
  </body>
</html>

使用Ctrl+C组合键,把原来已经在运行的testweb.py结束掉,然后,在Linux Shell环境中执行如下命令:

python3 testweb.py

就可以看到网页了。

使用pyecharts实现网页绘图

在网页目录下新建draw.py文件,内容如下:

# -*- coding: utf-8 -*-
from pyecharts import Bar

def draw_bar():
    print("开始绘图")
    attr = ["海沧", "湖里", "集美", "思明", "翔安", "同安"]
    v0 = [10,30,20,15,22,23]
    v1 = [10,30,20,15,22,23]
    v2 = [10,30,20,15,22,23]
    v3 = [10,30,20,15,22,23]

    bar = Bar("厦门市租房租金概况")
    bar.add("最小值", attr, v0, is_stack=True)
    bar.add("最大值", attr, v1, is_stack=True)
    bar.add("平均值", attr, v2, is_stack=True)
    bar.add("中位数", attr, v3, is_stack=True)
    bar.render('./templates/result.html')
    print("结束绘图")

把testweb.py修改为:

from flask import Flask
from flask import render_template
import draw
app = Flask(__name__)

@app.route('/')
def index():
    draw.draw_bar()
    return render_template("result.html")

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

使用Ctrl+C组合键,把原来已经在运行的testweb.py结束掉,然后,在Linux Shell环境中执行如下命令:

python3 testweb.py

就可以看到网页中的彩色柱状图了。

绘制多个值对比的柱状图

把draw.py文件的内容修改为如下:

# -*- coding: utf-8 -*-
from pyecharts import Bar

def draw_bar():
  w=[[0.5,0.4,0.3],[0.4,0.5,0.3],[0.3,0.4,0.5],[0.5,0.3,0.4]]
  attr = ["决策树", "随机森林", "logistic回归"]
  bar = Bar("tf-idf分类结果图")# 创建条形图对象
  bar.add("accuracy",attr,w[0])
  bar.add("precision",attr,w[1])
  bar.add("recall",attr,w[2])
  bar.add("f1",attr,w[3])
  bar.render('./templates/result.html')

testweb.py不变,还是如下:

from flask import Flask
from flask import render_template
import draw
app = Flask(__name__)

@app.route('/')
def index():
    draw.draw_bar()
    return render_template("result.html")

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

使用Ctrl+C组合键,把原来已经在运行的testweb.py结束掉,然后,在Linux Shell环境中执行如下命令:

python3 testweb.py

就可以看到网页中的彩色柱状图了。

使用网页表单

把index.html内容修改为如下:

<html>
  <head>
        <title>Welcome</title>
        </head>
  <body>
      <h1>Database Lab of Xiamen University</h1>

        <form method="POST" action="login">

        <input type="text" name="username" placeholder="username">
        <br>
        <input type="password" name="password" placeholder="password">
        <br>
        <input type="submit" value="Submit">
        <input type="reset" value="reset">
    </form>
  </body>
</html>

把testweb.py的内容修改为如下:

from flask import Flask
from flask import request
from flask import render_template
import draw
app = Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")


@app.route('/login', methods=['post'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')
    return render_template('loginsuccess.html', username=username,password=password)

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

在templates目录下再新建一个loginsuccess.html,内容如下:

<html>
  <head>
    <title>Welcome</title>
    </head>
  <body>
      <h1>Login Success. Name is:{{username}},Password is :{{password}}</h1>
  </body>
</html>

使用Ctrl+C组合键,把原来已经在运行的testweb.py结束掉,然后,在Linux Shell环境中执行如下命令:

python3 testweb.py

如下图所示,会出现一个网页表单,可以在里面输入用户名和密码,点击提交,就可以在网页中显示刚才输入的用户名和密码。

制作下拉列表

把index.html的内容修改为如下:

<html>
  <head>
        <title>Welcome</title>
        </head>
  <body>
      <h1>Database Lab of Xiamen University</h1>

        <form method="POST" action="login">

        <select name="wordvector">
          <option selected="selected">--please select word vector--</option>
          <option value=1 >TF-IDF</option>
          <option value=2>Word2Vec</option>
        </select>
        <select name="classifier">
          <option selected="selected">--please select classifier--</option>
          <option value=1 >逻辑斯蒂回归</option>
          <option value=2>决策树</option>
          <option value=3>随机森林</option>
        </select>

        <input type="submit" value="Submit">
        <input type="reset" value="reset">
    </form>
  </body>
</html>

把testweb.py的内容修改为如下:

from flask import Flask
from flask import request
from flask import render_template
import draw
app = Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")


@app.route('/login', methods=['post'])
def login():
    wordvector = request.form.get('wordvector')
    classifier = request.form.get('classifier')
    return render_template('submitsuccess.html', wordvector=wordvector,classifier=classifier)

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

在templates目录下表再新建一个submitsuccess.html,内容如下:

<html>
  <head>
    <title>Submit Success</title>
    </head>
  <body>
      <h1>Form Submit Success. Word Vector is:{{wordvector}},Classfifier is :{{classifier}}</h1>
  </body>
</html>

使用Ctrl+C组合键,把原来已经在运行的testweb.py结束掉,然后,在Linux Shell环境中执行如下命令:

python3 testweb.py

如下图所示,会出现一个网页表单,包含两个下拉列表框,可以选择以后点击提交按钮,就会在新网页中看到你选择的内容(整数值)。

增加if语句判断

index.html的内容不变,还是如下:

<html>
  <head>
        <title>Welcome</title>
        </head>
  <body>
      <h1>Database Lab of Xiamen University</h1>

        <form method="POST" action="login">

        <select name="wordvector">
          <option selected="selected">--please select word vector--</option>
          <option value=1 >TF-IDF</option>
          <option value=2>Word2Vec</option>
        </select>
        <select name="classifier">
          <option selected="selected">--please select classifier--</option>
          <option value=1 >逻辑斯蒂回归</option>
          <option value=2>决策树</option>
          <option value=3>随机森林</option>
        </select>

        <input type="submit" value="Submit">
        <input type="reset" value="reset">
    </form>
  </body>
</html>

把testweb.py的内容修改为如下:

from flask import Flask
from flask import request
from flask import render_template
import draw
app = Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")


@app.route('/login', methods=['post'])
def login():
    wordvector = request.form.get('wordvector')
    classifier = request.form.get('classifier')
    if wordvector=="1":
      if classifier=="1":
        print("TF-IDF+logisticregression")
      elif classifier=="2":
        print("TF_IDF+decisiontree")
      elif classifier=="3":
        print("TF-IDF+randomforest")

    elif wordvector=='2':

      if classifier=="1":
        print("Word2Vec+logisticregression")
      elif classifier=="2":
        print("Word2Vec+decisiontree")
      elif classifier=="3":
        print("Word2Vec+randomforest")

    return render_template('submitsuccess.html', wordvector=wordvector,classifier=classifier)

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

submitsuccess.html内容不变,如下:

<html>
  <head>
    <title>Submit Success</title>
    </head>
  <body>
      <h1>Form Submit Success. Word Vector is:{{wordvector}},Classfifier is :{{classifier}}</h1>
  </body>
</html>

使用Ctrl+C组合键,把原来已经在运行的testweb.py结束掉,然后,在Linux Shell环境中执行如下命令:

python3 testweb.py

然后,就可以在网页中依次选择不同的下拉列表选项,点击提交,然后,可以在运行testweb.py的终端内查看控制台输出的日志信息。