【Flask】前后端交互示例

html页面动态加载Modbus与数据库的连接状态。

html部分：

复制代码

<div class="status-item">
    <div class="status-label">Modbus:</div>
    <div class="status-value">
        <span class="connection-dot connected" id="modbus-dot"></span>
        <span id="modbus-text">已连接</span>
    </div>
</div>
<div class="status-item">
    <div class="status-label">数据库:</div>
    <div class="status-value">
        <span class="connection-dot connected" id="database-dot"></span>
        <span id="database-text">已连接</span>      
    </div>
</div>

JavaScript部分:

复制代码

const STATUS = {
    CONNECTED:'connected',
    DISCONNECTED:'disconnected'
};

let modbusStatus = STATUS.DISCONNECTED;
let databaseStatus = STATUS.DISCONNECTED;

// 连接状态检查
function checkConnectionStatus() {
    fetch('/api/connection-status')
        .then(response => response.json())
        .then(data => {
            // 更新连接状态指示器
            updateStatusIndicator('modbus', data.modbus);
            updateStatusIndicator('database', data.database);
            //updateStatusIndicator('video', data.video);
            
            // 控制视频显示
            const showImageRadio = document.getElementById('show-image');
            const videoStream = document.getElementById('video-stream');
            if (showImageRadio.checked && data.video) {
                videoStream.style.display = 'block';
            } else {
                videoStream.style.display = 'none';
            }
        })
        .catch(error => console.error('Error checking connection status:', error));
}

function updateStatusIndicator(type, isConnected) {
    // 这里需要根据实际元素更新连接状态
    if(type == 'modbus'){
        modbusStatus = isConnected ? STATUS.CONNECTED : STATUS.DISCONNECTED;
    } else if (type === 'database') {
        databaseStatus = isConnected ? STATUS.CONNECTED : STATUS.DISCONNECTED;
    }
    updateStatusDisplay();
}


// 更新状态显示
function updateStatusDisplay() {
    //更新Modbus状态显示
    const mosbusDot = document.getElementById('modbus-dot');
    const modbusText = document.getElementById('modbus-text');

    mosbusDot.className = `connection-dot ${modbusStatus}`;
    modbusText.textContent = modbusStatus === STATUS.CONNECTED ? '已连接' : '未连接';


    // 更新数据库状态显示
    const databaseDot = document.getElementById('database-dot');
    const databaseText = document.getElementById('database-text');
    databaseDot.className = `connection-dot ${databaseStatus}`;
    databaseText.textContent = databaseStatus === STATUS.CONNECTED ? '已连接' : '未连接';
    
}

// 页面加载后立即检查一次
document.addEventListener('DOMContentLoaded', function() {
    checkConnectionStatus();
});

// 然后每隔一定时间检查一次（例如每5秒）
setInterval(checkConnectionStatus, 5000);

python Flask后端：

复制代码

@app.route('/api/connection-status')
def connection_status():
    """获取连接状态"""
    status = {
        'modbus': modbus_client.is_connected(),
        'database': db_manager.is_connected(),
        'video': video_capture.isOpened() if video_capture else False
    }
    return jsonify(status)