概要

Python web 开发已经有了相当长的历史，从最早的 CGI 脚本到现在的全栈 Web 框架，现在已经成为了一种非常流行的方式。

Python 最早被用于 Web 开发是在 1995 年（90年代早期），当时使用 CGI 脚本编写动态 Web 页面。2004 年 Django 框架发布，它是一个高度模块化的框架，提供了许多开箱即用的功能，使得 Web 开发更加容易和快速。Flask 框架于 2010 年发布，是一个轻量级的框架，它提供了更少的默认功能，但也更灵活，允许开发者根据需要添加或删除功能。

1. 什么是 Flask？

Flask 是一款 Python 的轻量级 Web 框架，它的特点是简单易用、灵活性高。Flask 框架可以快速搭建 Web 应用程序，是一个很好的选择。Flask 框架的核心思想是 WSGI（Web Server Gateway Interface），它定义了 Web 服务器和 Web 应用程序之间的通信协议。

1.1 Flask 的优势

简单易用：Flask 框架的 API 简单易用，开发者能够快速上手。MVC设计模式。
灵活性高：Flask 框架的扩展性高，可以根据实际需求进行扩展。
轻量级：Flask 框架的代码量小，运行速度快。
文档丰富：Flask 框架的文档非常详细，开发者能够轻松查找所需信息。

1.2 Flask 的缺点

轻量级：Flask 框架的轻量级也是它的缺点之一，它的功能相对有限，需要自己进行扩展。
不适合大型应用程序：Flask 框架适合小型应用程序，对于大型应用程序来说，可能会出现性能瓶颈。这时可以考虑Django。

1.3 Flask 的基础组件

Flask 框架由以下几个基础组件组成：

路由：定义 URL 和视图函数之间的映射关系。
视图函数：处理请求并返回响应。
模板：生成 HTML 页面。
表单：处理用户提交的数据。
扩展：实现 Flask 框架的扩展功能。

2. 基础使用

2.1 安装 Flask

在开始使用 Flask 之前，需要先安装 Flask。可以使用 pip 命令进行安装：

pip install Flask

2.2 Hello World

下面是一个简单的示例，展示了如何使用 Flask 框架输出 "Hello World"。

新建一个app.py文件，输入如下内容。

Linux下执行：

export FLASK_APP=app.py

flask run

打开浏览器访问 http://127.0.0.1:5000/ 即可。

如果是 windows 执行：

set FLASK_APP=app.py

flask run

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

2.3 路由和视图函数

在 Flask 中，路由和视图函数是紧密相关的。路由用于将 URL 映射到视图函数上，视图函数则处理请求并返回响应。为了实现路由和视图函数，我们可以使用 Flask 中的 @app.route 装饰器。下面是一个简单的示例：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'This is the index page.'

@app.route('/hello')
def hello():
    return 'Hello, World!'

@app.route('/') 和 @app.route('/hello') 分别定义了两个路由，index() 和 hello() 则是两个视图函数。

2.4 模板

模板是 Flask 中生成 HTML 页面的一种方式。Flask 支持多种模板引擎，包括 Jinja2、Mako、Tenjin 等。在本文中，我们使用 Jinja2 作为模板引擎。

下面是一个简单的示例，展示了如何使用模板生成 HTML 页面：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', title='Home')

@app.route('/hello')
def hello():
    return render_template('hello.html', name='Flask')

render_template() 函数用于渲染模板，第一个参数指定模板名称，第二个参数则是模板中使用的变量。

2.5 静态文件

静态文件包括 CSS、JavaScript、图片等。在 Flask 中，可以使用 url_for() 函数生成静态文件的 URL。

下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>{{ title }}</h1>
    <p>Hello, Flask!</p>
</body>
</html>

url_for('static', filename='style.css') 生成了静态文件 style.css 的 URL。

2.6 表单

表单是 Web 应用程序中常用的一种交互方式。在 Flask 中，可以使用 request 对象获取用户提交的表单数据。

下面是一个简单的示例：

from flask import Flask, request

app = Flask(__name__)

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        if username == 'admin' and password == 'password':
            return 'Login success!'
        else:
            return 'Invalid username or password.'
    else:
        return '''
            <form method="post">
                <label>Username:</label>
                <input type="text" name="username">
                <label>Password:</label>
                <input type="password" name="password">
                <input type="submit" value="Login">
            </form>
        '''

request.form 可以获取 POST 请求提交的表单数据。

3. 实战案例：构建一个 Todo （待办）应用

接下来，我们将通过一个实战案例来介绍如何使用 Flask 框架构建一个 Todo 应用。

3.1 数据库设计

首先，我们需要设计数据库。在本文中，我们使用 MySQL 作为数据库。下面是数据库的设计：

CREATE TABLE `todos` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `completed` tinyint(1) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 后端实现

接下来实现后端的功能：

from flask import Flask, render_template, request, redirect, url_for
import pymysql.cursors

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

connection = pymysql.connect(
    host='localhost',
    user='root',
    password='password',
    db='todo',
    charset='utf8mb4',
    cursorclass=pymysql.cursors.DictCursor
)

@app.route('/')
def index():
    with connection.cursor() as cursor:
        cursor.execute('SELECT * FROM `todos`')
        todos = cursor.fetchall()
    return render_template('index.html', todos=todos)

@app.route('/add', methods=['POST'])
def add():
    title = request.form['title']
    with connection.cursor() as cursor:
        cursor.execute('INSERT INTO `todos` (`title`) VALUES (%s)', title)
        connection.commit()
    return redirect(url_for('index'))

@app.route('/toggle/<int:todo_id>', methods=['POST'])
def toggle(todo_id):
    with connection.cursor() as cursor:
        cursor.execute('SELECT `completed` FROM `todos` WHERE `id` = %s', todo_id)
        completed = cursor.fetchone()['completed']
        cursor.execute('UPDATE `todos` SET `completed` = %s WHERE `id` = %s', (not completed, todo_id))
        connection.commit()
    return redirect(url_for('index'))

@app.route('/delete/<int:todo_id>', methods=['POST'])
def delete(todo_id):
    with connection.cursor() as cursor:
        cursor.execute('DELETE FROM `todos` WHERE `id` = %s', todo_id)
        connection.commit()
    return redirect(url_for('index'))

解析：建立数据库连接，并定义四个路由：

/：显示所有的 Todo。
/add：添加一个 Todo。
/toggle/：标记一个 Todo 是否已完成。
/delete/：删除一个 Todo。

3.3 前端实现

最后实现前端的功能：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Todo</title>
    <style>
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>Todo</h1>
    <form method="post" action="{{ url_for('add') }}">
        <label>Title:</label>
        <input type="text" name="title">
        <input type="submit" value="Add">
    </form>
    <ul>
        {% for todo in todos %}
            <li{% if todo.completed %} class="completed"{% endif %}>
                <form method="post" action="{{ url_for('toggle', todo_id=todo.id) }}">
                    <input type="checkbox" name="completed" {% if todo.completed %}checked{% endif %}>
                    {{ todo.title }}
                </form>
                <form method="post" action="{{ url_for('delete', todo_id=todo.id) }}">
                    <input type="submit" value="Delete">
                </form>
            </li>
        {% else %}
            <p>No todos.</p>
        {% endfor %}
    </ul>
</body>
</html>

我们使用了 Jinja2 模板引擎，展示了 Todo 列表、添加 Todo、标记 Todo 是否已完成、删除 Todo 等功能。