使用 Flask 构建 Web 应用：静态页面与动态 API 访问

介绍

Flask 是一个轻量级的 Python Web 框架，适合快速构建 Web 应用。它的设计简洁、易于扩展，因此被广泛应用于小型项目和原型开发。在本文中，我们将学习如何使用 Flask 构建一个包含静态页面访问和动态 API 访问的 Web 应用。

Flask 简介

Flask 是一个 Python 微框架，能够帮助你构建 Web 应用。Flask 提供了简单的工具集来实现 Web 请求和响应、路由、模板渲染等功能。它非常适合用于小型 Web 项目以及需要高度灵活性和可扩展性的应用。

安装 Flask

首先，确保你的开发环境已经安装了 Flask。你可以使用 pip 安装：

bash 复制代码

pip install Flask

构建静态页面

静态页面是指那些不需要服务器端处理的页面。常见的静态资源包括 HTML、CSS、JavaScript 文件和图片。在 Flask 中，静态文件通常放在项目的 static 文件夹中。

项目结构

我们首先建立一个简单的 Flask 项目结构：

xml 复制代码

/flask_demo
    /static
        /css
            style.css
    /templates
        index.html
    app.py

templates/ 是 HTML 模板的默认目录

Flask 使用 render_template("xxx.html") 渲染 HTML 页面时，默认会在项目根目录下的 templates/ 文件夹中查找。
不需要手动配置路径，Flask 会自动读取这个目录里的模板文件。

static/ 是静态资源（CSS/JS/图片）的默认目录

Flask 会自动把 static/ 文件夹作为默认静态文件目录。
HTML 模板中可以使用 url_for('static', filename='...') 自动生成静态文件 URL。

创建静态文件和模板

style.css ：放在 static/css 文件夹中，控制页面的样式。

css 复制代码

/* static/css/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 20px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

index.html：一个简单的 HTML 页面，展示了一个按钮，点击后将触发 API 请求。

html 复制代码

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Demo</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>欢迎来到 Flask Demo</h1>
    <button id="getApiData">获取动态数据</button>
    <p id="apiResult"></p>

    <script>
        document.getElementById("getApiData").onclick = function() {
            fetch('/api/data')
                .then(response => response.json())
                .then(data => {
                    document.getElementById("apiResult").textContent = data.message;
                });
        };
    </script>
</body>
</html>

Flask 路由

接下来，我们在 Flask 中定义两个路由：

一个用于渲染静态的 HTML 页面。
另一个用于处理动态的 API 请求，返回 JSON 数据。

创建 app.py

python 复制代码

from flask import Flask, render_template, jsonify

app = Flask(__name__)

# 路由：返回静态页面
@app.route('/')
def home():
    return render_template('index.html')

# 路由：动态 API 返回数据
@app.route('/api/data')
def api_data():
    response = {
        "message": "这是从 Flask 后端返回的动态数据！"
    }
    return jsonify(response)

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

解释代码：

@app.route('/')：定义访问主页时返回静态的 HTML 页面 index.html。
@app.route('/api/data')：定义一个 API 路由，返回一个 JSON 格式的数据。当用户点击按钮时，通过 JavaScript 的 fetch 请求这个 API，返回的数据会显示在页面上。

构建动态 API

Flask 非常适合构建 RESTful API。在上述代码中，我们已经构建了一个简单的动态 API (/api/data)。你可以通过这种方式构建任何需要动态数据的接口。

动态数据的来源

假设我们希望从数据库获取数据，或者从外部 API 获取数据。你可以在 api_data 函数中加入任何的数据处理逻辑：

python 复制代码

@app.route('/api/data')
def api_data():
    # 假设从数据库或外部 API 获取的数据
    data_from_db = {"name": "Flask", "version": "2.0"}
    
    response = {
        "message": f"Flask 当前版本：{data_from_db['version']}"
    }
    return jsonify(response)

这样，当用户访问 /api/data 路由时，Flask 将返回最新的动态数据。

运行和测试

启动 Flask 应用

确保你已经将 Flask 应用代码保存在 app.py 文件中，接着在命令行中启动 Flask 应用：

bash 复制代码

python app.py

Flask 会启动一个开发服务器，通常会显示如下消息：

bash 复制代码

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

你可以通过访问浏览器，打开 http://127.0.0.1:5000/ 来查看静态页面。

点击页面上的按钮，会触发一个 JavaScript 请求，该请求会访问 /api/data 路由并将返回的数据展示在页面上。

测试动态 API

你可以直接访问 http://127.0.0.1:5000/api/data，查看 API 返回的数据，通常会是这样的 JSON 响应：

json 复制代码

{
  "message": "这是从 Flask 后端返回的动态数据！"
}

总结

在本篇博客中，我们使用 Flask 构建了一个简单的 Web 应用，包含静态页面的访问以及一个动态 API 的接口。通过这个例子，你可以更好地理解如何使用 Flask 来处理静态文件（HTML、CSS 等）以及如何构建和提供动态数据（通过 API）。

Flask 由于其简单、灵活的特性，非常适合用于快速原型开发和小型 Web 应用的构建。如果你希望将该应用扩展到更复杂的项目，可以考虑集成数据库、用户认证、表单处理等功能。