实战到底：Flask 框架快速构建 Web 应用

2023-08-0112:04:13后端程序开发Comments1,649 views字数 6045阅读模式

实战到底：Flask 框架快速构建 Web 应用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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

技术栈

  • Python 3.6+
  • Flask 1.1.2
  • HTML、CSS、JavaScript
  • MySQL

1. 什么是 Flask？

Flask 是一款 Python 的轻量级 Web 框架，它的特点是简单易用、灵活性高。Flask 框架可以快速搭建 Web 应用程序，是一个很好的选择。Flask 框架的核心思想是 WSGI（Web Server Gateway Interface），它定义了 Web 服务器和 Web 应用程序之间的通信协议。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

1.1 Flask 的优势

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

1.2 Flask 的缺点

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

1.3 Flask 的基础组件

Flask 框架由以下几个基础组件组成：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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

2. 基础使用

2.1 安装 Flask

在开始使用 Flask 之前，需要先安装 Flask。可以使用 pip 命令进行安装：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

pip install Flask

2.2 Hello World

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

新建一个app.py文件，输入如下内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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 装饰器。下面是一个简单的示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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() 则是两个视图函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

2.4 模板

模板是 Flask 中生成 HTML 页面的一种方式。Flask 支持多种模板引擎，包括 Jinja2、Mako、Tenjin 等。在本文中，我们使用 Jinja2 作为模板引擎。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

下面是一个简单的示例，展示了如何使用模板生成 HTML 页面：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.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() 函数用于渲染模板，第一个参数指定模板名称，第二个参数则是模板中使用的变量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

2.5 静态文件

静态文件包括 CSS、JavaScript、图片等。在 Flask 中，可以使用 url_for() 函数生成静态文件的 URL。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

下面是一个简单的示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

<!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。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

2.6 表单

表单是 Web 应用程序中常用的一种交互方式。在 Flask 中，可以使用 request 对象获取用户提交的表单数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

下面是一个简单的示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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 请求提交的表单数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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

接下来，我们将通过一个实战案例来介绍如何使用 Flask 框架构建一个 Todo 应用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

3.1 数据库设计

首先，我们需要设计数据库。在本文中，我们使用 MySQL 作为数据库。下面是数据库的设计：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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 后端实现

接下来实现后端的功能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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'))

解析：建立数据库连接，并定义四个路由：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

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

3.3 前端实现

最后实现前端的功能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

<!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 等功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

4. 技术总结

今天介绍了如何使用 Flask 框架进行 Web 开发，并实战开发了一个轻量级的web应用。Flask 是一款 Python 的轻量级 Web 框架，具有简单易用、灵活性高等优点，初学者也能快速上手。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/52140.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/bc/52140.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定