0. 概述

一心只为能用,只总结要点
主要目的是一些简单的展示功能,更深的内容以后用到了再看(反正到时候也差不多都忘了)
细致的笔记可以直接看第一个参考资料

参考资料:
Flask 入门笔记
Flask 快速入门
Flask 教程

1. 项目结构

假设我们编辑完了代码,在项目里执行flask run即可运行调试服务器
flask 默认app.py为代码入口,默认为普通模式,这两个设置与两个环境变量有关:FLASK_APP和FLASK_ENV

1.1 管理环境变量

可以通过一个小工具管理环境变量:python-dotenv

1
pip install python-dotenv

python-dotenv 会自动读取两个文件中的设置

  • .env:存放系统相关的敏感数据,一般写进.gitignore文件
  • .flaskenv:存放与 flask 相关的环境变量
1
2
3
# .flaskenv 文件
# FLASK_APP = app.py
FLASK_ENV=development

1.2 基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 导入 flask 并程序对象
from flask import Flask
app = Flask(__name__)

# 声明一个视图函数(view funciton)
# 然后对其进行注册(可以绑定多个)
@app.route('/')
@app.route('/hello')
def hello():
    return 'Welcome to My Watchlist!'

# 特殊的错误处理视图函数
@app.errorhandler(404)  # 传入要处理的错误代码
def page_not_found(e):  # 接受异常对象作为参数
    user = User.query.first()
    return render_template('404.html', user=user), 404  # 返回模板和状态码

2. 模板

可以通过渲染模板获得最终的 HTML 文件,模板文件通常放在项目根目录中的templates文件夹中

2.1 模板语法

语法 作用
{{变量}} 标记变量
{%语句%} 标记语句,如 if,for
{#注释#} 注释
{{var | filter}} 过滤器

各种内置过滤器

.操作符可以读取元素的子属性,过滤器则相当于一个函数

主页模板例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{{ name }}'s Watchlist</title>
  </head>
  <body>
    <h2>{{ name }}'s Watchlist</h2>
    {# 使用 length 过滤器获取 movies 变量的长度 #}
    <p>{{ movies|length }} Titles</p>
    <ul>
      {% for movie in movies %} {# 迭代 movies 变量 #}
      <li>{{ movie.title }} - {{ movie.year }}</li>
      {# 等同于 movie['title'] #} {% endfor %} {# 使用 endfor 标签结束 for 语句
      #}
    </ul>
    <footer>
      <small
        >&copy; 2018
        <a href="http://helloflask.com/tutori al">HelloFlask</a></small
      >
    </footer>
  </body>
</html>

2.2 渲染模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
from flask import Flask, render_template
app = Flask(__name__)

# 用来渲染的数据
name = 'Grey Li'
movies = [
    {'title': 'My Neighbor Totoro', 'year': '1988'},
    {'title': 'Dead Poets Society', 'year': '1989'},
    {'title': 'A Perfect World', 'year': '1993'},
    {'title': 'Leon', 'year': '1994'},
    {'title': 'Mahjong', 'year': '1996'},
    {'title': 'Swallowtail Butterfly', 'year': '1996'},
    {'title': 'King of Comedy', 'year': '1999'},
    {'title': 'Devils on the Doorstep', 'year': '1999'},
    {'title': 'WALL-E', 'year': '2008'},
    {'title': 'The Pork of Music', 'year': '2012'},
]


@app.route('/')
def index():
    # 渲染模板
    return render_template('index.html', name=name, movies=movies)


# 也可以使用上下文管理器给渲染注入变量
# 写明这个后再渲染模板就不用传入user变量了
@app.context_processor
def inject_user():  # 函数名可以随意修改
    user = User.query.first()
    return dict(user=user)  # 需要返回字典，等同于 return {'user': user}

2.3 模板继承机制

父模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
  <head>
    {% block head %}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ user.name }}'s Watchlist</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
      type="text/css"
    />
    {% endblock %}
  </head>
  <body>
    <h2>
      <img
        alt="Avatar"
        class="avatar"
        src="{{ url_for('static', filename='images/avatar.png') }}"
      />
      {{ user.name }}'s Watchlist
    </h2>
    <nav>
      <ul>
        <li><a href="{{ url_for('index') }}">Home</a></li>
      </ul>
    </nav>
    <!-- 父类中留出的带填充位置 -->
    {% block content %}{% endblock %}
    <footer>
      <small
        >&copy; 2018
        <a href="http://helloflask.com/tutorial">HelloFlask</a></small
      >
    </footer>
  </body>
</html>

子模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- 继承父类模板  -->
{% extends 'base.html' %}
<!-- 填充父类模板留出的位置 -->
<!-- 默认行为为覆盖 -->
<!-- 可以使用特殊变量把父类的内容填充进去:{{ super() }} -->
{% block content %}
<p>{{ movies|length }} Titles</p>
<ul class="movie-list">
  {% for movie in movies %}
  <li>
    {{ movie.title }} - {{ movie.year }}
    <span class="float-right">
      <a
        class="imdb"
        href="https://www.imdb.com/find?q={{ movie.title }}"
        target="_blank"
        title="Find this movie on IMDb"
        >IMDb</a
      >
    </span>
  </li>
  {% endfor %}
</ul>
<img
  alt="Walking Totoro"
  class="totoro"
  src="{{ url_for('static', filename='images/totoro.gif') }}"
  title="to~to~ro~"
/>
{% endblock %}

3. 静态文件

在模板文件中可以通过 url_for 函数生成静态文件的 url:

1
2
<!-- 相当于<img src="/static/foo.jpg" /> -->
<img src="{{ url_for('static', filename='foo.jpg') }}" />

静态文件主要是 css 文件,图片文件,js 文件之类的
可以通过一些前端框架搞这些东西:
bootstrap
Semantic-UI
Foundation

Bootstrap-Flask可以简化 Bootstrap 的使用

4. 数据库

参考资料:
Flask 入门教程:数据库
Flask-SQLAlchemy 用户指南

4.1 sqlalchemy

首先安装 flask-sqlalchemy 包以在 flask 中使用 sqlalchemy

1
pip install flask-sqlalchemy

然后在程序入口根据程序实例初始化数据库

1
2
3
4
5
6
from flask_sqlalchemy import SQLAlchemy  # 导入扩展类

app = Flask(__name__)

# 初始化扩展，传入程序实例 app
db = SQLAlchemy(app)

然后对数据库进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import os
import sys

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

WIN = sys.platform.startswith('win')
if WIN:  # 如果是 Windows 系统，使用三个斜线
    prefix = 'sqlite:///'
else:  # 否则使用四个斜线
    prefix = 'sqlite:////'

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = prefix + os.path.join(app.root_path, 'data.db')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False  # 关闭对模型修改的监控
# 在扩展类实例化前加载配置
db = SQLAlchemy(app)

4.2 数据模型

1
2
3
4
5
6
7
8
class User(db.Model):  # 表名将会是 user（自动生成，小写处理）
    id = db.Column(db.Integer, primary_key=True)  # 主键
    name = db.Column(db.String(20))  # 名字

class Movie(db.Model):  # 表名将会是 movie
    id = db.Column(db.Integer, primary_key=True)  # 主键
    title = db.Column(db.String(60))  # 电影标题
    year = db.Column(db.String(4))  # 电影年份

4.3 命令行操作

可以使用如下方式创建和删除数据库

1
2
3
4
(env) $ flask shell
>>> from app import db
>>> db.create_all()
>>> db.drop_all()

也可以自己创建一些命令

1
2
3
4
5
6
7
8
9
10
import click

@app.cli.command()  # 注册为命令
@click.option('--drop', is_flag=True, help='Create after drop.')  # 设置选项
def initdb(drop):
    """Initialize the database."""
    if drop:  # 判断是否输入了选项
        db.drop_all()
    db.create_all()
    click.echo('Initialized database.')  # 输出提示信息
1
2
flask initdb
flask initdb --drop

4.4 数据库操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
from app import User, Movie

# ===============================
# ---------- 增加数据 ------------
# ===============================
user = User(name='Grey Li')
db.session.add(user)
db.session.commit()

# ===============================
# ---------- 查询数据 ------------
# ===============================
# 通用格式:<模型类>.query.<过滤方法（可选）>.<查询方法>
movie = Movie.query.first()
Movie.query.filter_by(title='Mahjong').first()

# ===============================
# ---------- 更新数据 ------------
# ===============================
movie = Movie.query.get(2)
movie.title = 'WALL-E'
db.session.commit()

# ===============================
# ---------- 删除数据 ------------
# ===============================
movie = Movie.query.get(1)
db.session.delete(movie)
db.session.commit()

5. 表单

首先需要在模板中定义表单

1
2
3
4
5
6
7
8
9
10
11
<form method="post">
  <!-- 指定提交方法为 POST -->
  <label for="name">名字</label>
  <input type="text" name="name" id="name" /><br />
  <!-- 文本输入框 -->
  <label for="occupation">职业</label>
  <input type="text" name="occupation" id="occupation" /><br />
  <!-- 文本输入框 -->
  <input type="submit" name="submit" value="登录" />
  <!-- 提交按钮 -->
</form>

然后写处理表单的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
from flask import request, url_for, redirect, flash

# 注册视图函数的时候,添加非默认的POST请求方式
@app.route('/', methods=['GET', 'POST'])
def index():
    # 在内部根据请求方法的不同进行不同的处理
    if request.method == 'POST':
        # 根据表单内的name属性获取表单数据
        title = request.form.get('title')
        year = request.form.get('year')
        # 验证数据
        if not title or not year or len(year) > 4 or len(title) > 60:
            flash('Invalid input.')  # 显示错误提示
            return redirect(url_for('index'))  # 重定向回主页
        # 数据库操作
        movie = Movie(title=title, year=year)  # 创建记录
        db.session.add(movie)  # 添加到数据库会话
        db.session.commit()  # 提交数据库会话
        flash('Item created.')  # 显示成功创建的提示
        return redirect(url_for('index'))  # 重定向回主页

    movies = Movie.query.all()
    return render_template('index.html', movies=movies)

接受视图函数中传来的 flash 信息

1
2
3
4
5
6
<!-- 插入到页面标题上方 -->
<!-- flash('Invalid input.')  # 显示错误提示 -->
{% for message in get_flashed_messages() %}
<div class="alert">{{ message }}</div>
{% endfor %}
<h2>...</h2>

6. 测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import unittest

from module_foo import sayhello


class SayHelloTestCase(unittest.TestCase):

    # 测试初始化
    def setUp(self):
        pass

    # 测试完的清理工作
    def tearDown(self):
        pass

    # 测试用例以 test_ 开头
    # 测试函数 1
    def test_sayhello(self):
        # 对目标的调用
        rv = sayhello()
        # 对结果的判断
        self.assertEqual(rv, 'Hello!')

    # 测试函数 2
    def test_sayhello_to_somebody(self):
        rv = sayhello(to='Grey')
        self.assertEqual(rv, 'Hello, Grey!')


if __name__ == '__main__':
    unittest.main()

常用来判断结果的断言

  • assertEqual(a, b)
  • assertNotEqual(a, b)
  • assertTrue(x)
  • assertFalse(x)
  • assertIs(a, b)
  • assertIsNot(a, b)
  • assertIsNone(x)
  • assertIsNotNone(x)
  • assertIn(a, b)
  • assertNotIn(a, b)

常用的测试方法可以参考:测试方法

7. 组织代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
├── .flaskenv                   # Flask 环境变量
├── test_watchlist.py           # 单元测试(也可以做成一个包)
└── watchlist                   # 主程序包(需要在flaskenv中修改环境变量)
    ├── __init__.py             # 入口程序
    ├── commands.py             # 命令行操作
    ├── errors.py               # 错误处理(404)
    ├── models.py               # 数据库模型
    ├── views.py                # 视图函数
    ├── static                  # 静态资源
    │   ├── favicon.ico
    │   ├── images
    │   │   ├── avatar.png
    │   │   └── totoro.gif
    │   └── style.css
    └── templates               # 模板文件
        ├── base.html
        ├── edit.html
        ├── errors
        │   ├── 400.html
        │   ├── 404.html
        │   └── 500.html
        ├── index.html
        ├── login.html
        └── settings.html

8. 部署上线

创建虚拟环境
部署上线