前后端交互流程可视化

湖南工商大学 计网新青年系列活动

前端 (Frontend)

Client Side

用户界面

📊 响应数据
等待数据...
Network 日志
等待用户操作...

后端 (Backend)

Server Side
📄 app.py
# Flask API 接口
@app.route('/api/user', methods=['GET'])
def get_user():
    db = mysql.connector.connect(
        host="localhost",
        user="root",
        database="demo_db"
    )
    cursor = db.cursor()
    cursor.execute("SELECT * FROM users")
    result = cursor.fetchall()
    return jsonify(result)

@app.route('/api/order', methods=['GET'])
def get_order():
    db = mysql.connector.connect(
        host="localhost",
        user="root",
        database="demo_db"
    )
    cursor = db.cursor()
    cursor.execute("SELECT * FROM orders")
    result = cursor.fetchall()
    return jsonify(result)
Server 日志
服务器运行中...

数据库 (Database)

MySQL
📊 users 表
ID 姓名 邮箱 状态
1 张三 zhangsan@example.com 活跃
2 李四 lisi@example.com 活跃
3 王五 wangwu@example.com 离线
📊 orders 表
订单ID 用户ID 金额 状态
1001 1 ¥299.00 已完成
1002 2 ¥499.00 已完成
1003 1 ¥199.00 处理中