Python web实战 | 用 Flask 框架快速构建 Web 应用【实战】

Rocky0062023-07-31 10:54

概要

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 等功能。

4. 技术总结

今天介绍了如何使用 Flask 框架进行 Web 开发，并实战开发了一个轻量级的web应用。Flask 是一款 Python 的轻量级 Web 框架，具有简单易用、灵活性高等优点，初学者也能快速上手。

相关推荐
喵手7 小时前
Python爬虫实战：采集菜谱网站的“分类/列表页”（例如“家常菜”或“烘焙”频道）数据，构建高可用的美食菜谱数据采集流水线（附CSV导出）！
爬虫·python·爬虫实战·零基础python爬虫教学·采集菜谱网站数据·家常菜或烘焙频道·构建高可用食谱数据采集系统
念念不忘 必有回响7 小时前
viepress:vue组件展示和源码功能
前端·javascript·vue.js
喵手7 小时前
Python爬虫实战：硬核解析 Google Chrome 官方更新日志（正则+文本清洗篇）（附 CSV 导出）！
爬虫·python·爬虫实战·零基础python爬虫教学·csv导出·监控谷歌版本发布历史·获取稳定版更新日志
小邓睡不饱耶7 小时前
实战｜W餐饮平台智能化菜品推荐方案（含Spark实操+算法选型+完整流程）
python·ai·ai编程·ai写作
草莓熊Lotso7 小时前
Qt 主窗口核心组件实战：菜单栏、工具栏、状态栏、浮动窗口全攻略
运维·开发语言·人工智能·python·qt·ui
C澒7 小时前
多场景多角色前端架构方案：基于页面协议化与模块标准化的通用能力沉淀
前端·架构·系统架构·前端框架
崔庆才丨静觅7 小时前
稳定好用的 ADSL 拨号代理，就这家了！
前端
江湖有缘7 小时前
Docker部署music-tag-web音乐标签编辑器
前端·docker·编辑器
aiguangyuan7 小时前
基于BiLSTM-CRF的命名实体识别模型：原理剖析与实现详解
人工智能·python·nlp
禹凕7 小时前
Python编程——进阶知识（MYSQL引导入门）
开发语言·python·mysql
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08OpenClaw Chrome扩展使用教程 - 浏览器中继控制09openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决10Vue-skills的中文文档