Flask应用中网站路径层级点击动态生成子层级的实现方案

完全可以实现，你可以通过Flask异步接口+前端AJAX动态渲染的方案完成需求，无需手动配置所有层级，也不会影响已接入的Google Analytics统计功能。

1. 后端Flask接口实现 #

首先你需要将所有层级数据存储在数据库（推荐用邻接表结构，每个节点存自身id和父节点parent_id）或其他结构化存储中，不需要提前渲染所有层级，只需要提供一个查询子层级的接口即可：

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

# 模拟层级数据源，实际使用时可替换为数据库查询逻辑
level_data = [
    {"id": 1, "parent_id": 0, "name": "一级层级1"},
    {"id": 2, "parent_id": 0, "name": "一级层级2"},
    {"id": 3, "parent_id": 1, "name": "二级层级1-1"},
    {"id": 4, "parent_id": 1, "name": "二级层级1-2"},
    # 所有层级数据统一存储即可，无需手动配置渲染逻辑
]

@app.route('/get-children', methods=['POST'])
def get_children():
    parent_id = request.json.get('parent_id', 0)
    # 筛选对应父层级下的所有子层级
    children = [item for item in level_data if item['parent_id'] == parent_id]
    return jsonify({"code": 200, "data": children})

@app.route('/')
def index():
    # 首次渲染只返回一级层级，减少首屏加载压力
    first_level = [item for item in level_data if item['parent_id'] == 0]
    return render_template('index.html', first_level=first_level)

2. 前端动态渲染实现 #

前端页面中通过事件委托绑定点击事件，点击层级时请求后端接口拿到子层级，动态插入到当前层级下方即可，同时兼容Google Analytics的事件统计：

<!-- 放在templates/index.html文件中 -->
<!DOCTYPE html>
<html>
<head>
    <title>动态层级Demo</title>
    <!-- 原有Google Analytics接入代码直接保留即可 -->
</head>
<body>
    <ul id="level-container">
        {% for item in first_level %}
        <li class="level-item" data-id="{{ item.id }}">{{ item.name }}</li>
        {% endfor %}
    </ul>

    <script>
        // 事件委托绑定点击，动态生成的层级元素也可以触发事件
        document.querySelector('#level-container').addEventListener('click', function(e) {
            if (e.target.classList.contains('level-item')) {
                const parentId = e.target.dataset.id;
                // GA事件上报，可自定义上报参数，不影响原有统计逻辑
                gtag('event', 'level_click', {
                    'level_id': parentId,
                    'level_name': e.target.innerText
                });

                // 已加载过的子层级直接切换显示，避免重复请求
                if (e.target.nextElementSibling && e.target.nextElementSibling.classList.contains('children-container')) {
                    e.target.nextElementSibling.hidden = !e.target.nextElementSibling.hidden;
                    return;
                }

                // 请求后端获取子层级数据
                fetch('/get-children', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({parent_id: parentId})
                })
                .then(res => res.json())
                .then(res => {
                    if (res.code === 200 && res.data.length > 0) {
                        // 生成子层级容器并插入DOM
                        const childrenUl = document.createElement('ul');
                        childrenUl.classList.add('children-container');
                        res.data.forEach(child => {
                            const li = document.createElement('li');
                            li.classList.add('level-item');
                            li.dataset.id = child.id;
                            li.innerText = child.name;
                            childrenUl.appendChild(li);
                        });
                        e.target.after(childrenUl);
                    }
                })
            }
        })
    </script>
</body>
</html>

3. 效果参考 #

注意事项 #

• 层级数据量大的情况下，可以给/get-children接口加Redis缓存，减少数据库查询压力
• 如果需要实现折叠/展开动画，可以给.children-container加CSS过渡效果
• 原有Google Analytics的统计逻辑完全不受影响，可根据业务需求自定义上报参数

内容的提问来源于stack exchange，提问作者Shravya Mutyapu