PHP+HTML 网站状态实时监控页面 - 30天访问数据报表 - 常规

以下是一个用 PHP 和 HTML 编写的网站状态实时监控页面，可以监控 30 天内网站是否可以正常访问，并生成数据报表。

<?php
// 数据库连接配置
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'website_monitor';

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查数据库连接是否成功
if ($conn->connect_error) {
    die('数据库连接失败: ' . $conn->connect_error);
}

// 创建数据表
$sql = 'CREATE TABLE IF NOT EXISTS website_status (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    status INT(1) NOT NULL,
    date_added TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)';

if ($conn->query($sql) === FALSE) {
    echo '创建数据表失败: ' . $conn->error;
}

// 获取 30 天内的网站状态数据
$sql = 'SELECT * FROM website_status WHERE date_added >= NOW() - INTERVAL 30 DAY ORDER BY date_added DESC';
$result = $conn->query($sql);

// 生成数据报表
$dataPoints = array();
while($row = $result->fetch_assoc()) {
    $dataPoints[] = array('x' => strtotime($row['date_added']) * 1000, 'y' => $row['status']);
}

$conn->close();
?>

<!DOCTYPE html>
<html>
<head>
    <script src='https://cdn.jsdelivr.net/npm/apexcharts@latest'></script>
</head>
<body>
    <div id='chart'></div>

    <script>
        var options = {
            series: [{
                name: '网站状态',
                data: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
            }],
            chart: {
                type: 'line',
                height: 350
            },
            xaxis: {
                type: 'datetime'
            },
            yaxis: {
                min: 0,
                max: 1,
                labels: {
                    formatter: function (value) {
                        return value === 1 ? '正常' : '异常';
                    }
                }
            }
        };

        var chart = new ApexCharts(document.querySelector('#chart'), options);
        chart.render();
    </script>
</body>
</html>

请确保已经创建了一个名为website_monitor的 MySQL 数据库，并替换代码中的数据库连接配置。此代码将创建一个名为website_status的数据表，用于存储网站状态数据。数据表中的status字段表示网站的状态，0 表示异常，1 表示正常。代码将在页面上绘制一个折线图，显示网站状态在过去 30 天内的变化情况。

注意：为了使代码能够正常运行，你必须引入 ApexCharts 库，可以通过在<head>标签中添加<script src='https://cdn.jsdelivr.net/npm/apexcharts@latest'></script>来实现。