3. Flask 基础与路由设计：构建大屏后端 API

本章将带领你从零搭建 Flask 最小应用，深入理解路由与视图函数的核心机制，并设计出支撑大屏看板的两大核心 API 端点：/api/kpi 与 /api/chart_data。掌握这些基础，你就能为前端看板提供稳定、高效的 JSON 数据源。

3.1 Flask 最小应用：Hello, Dashboard!

Flask 是一个轻量级 Python Web 框架，非常适合快速构建 API 服务。一个最小应用只需几行代码即可启动。

# app.py - Flask 最小应用
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, Dashboard!'

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

运行上述代码，访问 http://127.0.0.1:5000/，浏览器将显示 Hello, Dashboard!。这就是 Flask 应用的“最小闭环”。

3.2 路由与视图函数：URL 到 Python 函数的映射

路由（Route） 是 URL 与 Python 函数之间的绑定关系。视图函数（View Function） 则是处理该 URL 请求并返回响应的函数。

3.3 设计大屏后端 API：返回 JSON 数据

大屏看板需要两个核心数据接口：KPI 指标总览 和 图表数据。我们将使用 Flask 的 jsonify 函数返回 JSON 格式数据。

3.3.1 接口一：/api/kpi — KPI 指标总览

该接口返回当前关键业务指标的实时快照，包括：今日订单量、成交额、活跃用户数、转化率等。

# 路由：/api/kpi
@app.route('/api/kpi')
def get_kpi_data():
    """返回 KPI 指标总览数据"""
    kpi_data = {
        'today_orders': 15823,
        'total_revenue': 9823456.78,
        'active_users': 45231,
        'conversion_rate': 3.87,
        'avg_order_value': 621.35,
        'update_time': '2025-03-21 14:30:00'
    }
    return jsonify(kpi_data)

3.3.2 接口二：/api/chart_data — 图表数据

该接口为 ECharts 图表提供结构化数据，支持按时间范围、指标类型等参数查询。

# 路由：/api/chart_data
@app.route('/api/chart_data')
def get_chart_data():
    """返回 ECharts 图表所需数据"""
    chart_data = {
        'title': '近7日销售额趋势',
        'xAxis': ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20', '03-21'],
        'series': [
            {
                'name': '销售额',
                'type': 'line',
                'data': [120.5, 135.2, 110.8, 148.9, 162.3, 155.7, 172.1]
            },
            {
                'name': '订单量',
                'type': 'bar',
                'data': [320, 410, 380, 520, 490, 560, 610]
            }
        ]
    }
    return jsonify(chart_data)

3.4 完整示例：整合两个 API 端点

将上述两个接口整合到一个 Flask 应用中，并添加必要的导入和启动代码。

# dashboard_api.py - 大屏后端 API 完整示例
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/kpi')
def get_kpi_data():
    """KPI 指标总览接口"""
    kpi_data = {
        'today_orders': 15823,
        'total_revenue': 9823456.78,
        'active_users': 45231,
        'conversion_rate': 3.87,
        'avg_order_value': 621.35,
        'update_time': '2025-03-21 14:30:00'
    }
    return jsonify(kpi_data)

@app.route('/api/chart_data')
def get_chart_data():
    """图表数据接口"""
    chart_data = {
        'title': '近7日销售额趋势',
        'xAxis': ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20', '03-21'],
        'series': [
            {
                'name': '销售额',
                'type': 'line',
                'data': [120.5, 135.2, 110.8, 148.9, 162.3, 155.7, 172.1]
            },
            {
                'name': '订单量',
                'type': 'bar',
                'data': [320, 410, 380, 520, 490, 560, 610]
            }
        ]
    }
    return jsonify(chart_data)

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

3.5 测试 API 接口

启动服务后，可以使用浏览器、cURL 或 Postman 测试接口。