flask页面如何显示json数据

Flask页面如何优雅地显示JSON数据

在Web开发中，将JSON数据在Flask页面中展示是一个常见需求，无论是构建API接口还是前后端分离的应用，如何在Flask中处理和显示JSON数据都是一项重要技能，本文将详细介绍几种在Flask页面中显示JSON数据的方法,从简单的直接输出到更复杂的前端交互展示。

直接返回JSON响应

最基础的方式是使用Flask的jsonify函数将Python字典转换为JSON响应并返回给前端,这种方法适用于构建API接口。

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data')
def get_json_data():
    data = {
        'name': 'Flask',
        'version': '2.0.1',
        'features': ['microframework', 'jinja2', 'routing']
    }
    return jsonify(data)

当访问/api/data端点时,浏览器会收到如下JSON响应：

{
  "name": "Flask",
  "version": "2.0.1",
  "features": [
    "microframework",
    "jinja2",
    "routing"
  ]
}

在HTML页面中嵌入JSON数据

如果需要在HTML页面中直接显示JSON数据,可以将其作为变量传递给模板。

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def display_json():
    data = {
        'title': 'JSON数据展示',
        'items': [
            {'id': 1, 'name': '苹果'},
            {'id': 2, 'name': '香蕉'},
            {'id': 3, 'name': '橙子'}
        ]
    }
    return render_template('display.html', data=data)

然后在HTML模板中（display.html）：

<!DOCTYPE html>
<html>
<head>{{ data.title }}</title>
</head>
<body>
    <h1>水果列表</h1>
    <pre>{{ data | tojson(indent=2) }}</pre>
</body>
</html>

这里使用了Jinja2的tojson过滤器，它会自动将Python对象转换为JSON字符串，并通过indent参数格式化输出。

使用JavaScript动态加载和显示JSON数据

对于更复杂的交互场景,可以通过JavaScript从Flask后端获取JSON数据并在前端动态显示。

Flask端点返回JSON数据：

@app.route('/api/items')
def get_items():
    items = [
        {'id': 1, 'name': 'Python', 'type': '语言'},
        {'id': 2, 'name': 'Flask', 'type': '框架'},
        {'id': 3, 'name': 'SQLAlchemy', 'type': 'ORM'}
    ]
    return jsonify(items)

然后在前端页面中使用JavaScript获取并显示数据：

<!DOCTYPE html>
<html>
<head>动态JSON展示</title>
</head>
<body>
    <h1>技术栈列表</h1>
    <div id="items-container"></div>
    <script>
        fetch('/api/items')
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('items-container');
                data.forEach(item => {
                    const itemElement = document.createElement('div');
                    itemElement.innerHTML = `
                        <h3>${item.name}</h3>
                        <p>类型: ${item.type}</p>
                    `;
                    container.appendChild(itemElement);
                });
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

使用前端库美化JSON展示

为了更美观地展示JSON数据，可以使用专门的前端库如jsoneditor或prism.js。

使用jsoneditor的示例：

<!DOCTYPE html>
<html>
<head>JSON编辑器展示</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.6/jsoneditor.min.css" rel="stylesheet">
    <style>
        #jsoneditor { height: 500px; }
    </style>
</head>
<body>
    <h1>JSON数据编辑器</h1>
    <div id="jsoneditor"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.6/jsoneditor.min.js"></script>
    <script>
        const container = document.getElementById('jsoneditor');
        const options = {
            mode: 'view',
            modes: ['view', 'form', 'code', 'text', 'tree', 'preview'],
            onError: function(err) {
                alert(err.toString());
            }
        };
        const editor = new JSONEditor(container, options);
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                editor.set(data);
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

处理复杂数据结构

当处理嵌套或复杂的JSON数据结构时,可以创建递归模板来展示：

@app.route('/api/nested')
def get_nested_data():
    data = {
        'name': '项目结构',
        'children': [
            {
                'name': '前端',
                'children': [
                    {'name': 'HTML'},
                    {'name': 'CSS'},
                    {'name': 'JavaScript'}
                ]
            },
            {
                'name': '后端',
                'children': [
                    {'name': 'Flask'},
                    {'name': 'SQLAlchemy'}
                ]
            }
        ]
    }
    return jsonify(data)

递归模板示例：

{% macro render_tree(node) %}
    <li>
        {{ node.name }}
        {% if node.children %}
            <ul>
                {% for child in node.children %}
                    {{ render_tree(child) }}
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}
<!DOCTYPE html>
<html>
<head>嵌套JSON展示</title>
</head>
<body>
    <h1>项目结构</h1>
    <ul>
        {{ render_tree(data) }}
    </ul>
</body>
</html>