PHP 体重管理网页 - 录入和图表展示 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>体重管理</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        canvas {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>体重管理</h1>
<pre><code>&lt;?php
// 数据库连接信息
$servername = '103.214.173.233';
$username = 'water';
$password = 'xX300400';
$dbname = 'water';

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

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

// 处理体重录入
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $weight = $_POST['weight'];
    $timestamp = time();

    // 插入数据到数据库
    $sql = &quot;INSERT INTO tizhongrou (data, tizhong) VALUES ('$timestamp', '$weight')&quot;;
    if ($conn-&gt;query($sql) === TRUE) {
        echo '体重录入成功';
    } else {
        echo '错误： ' . $sql . '&lt;br&gt;' . $conn-&gt;error;
    }
}

// 获取历史体重数据
$sql = &quot;SELECT data, tizhong FROM tizhongrou&quot;;
$result = $conn-&gt;query($sql);
$dataPoints = array();

if ($result-&gt;num_rows &gt; 0) {
    while ($row = $result-&gt;fetch_assoc()) {
        $dataPoints[] = array('x' =&gt; $row['data'], 'y' =&gt; $row['tizhong']);
    }
}

// 关闭数据库连接
$conn-&gt;close();
?&gt;

&lt;!-- 体重录入表单 --&gt;
&lt;h2&gt;录入体重&lt;/h2&gt;
&lt;form method=&quot;post&quot; action=&quot;&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;&quot;&gt;
    &lt;label for=&quot;weight&quot;&gt;体重（kg）：&lt;/label&gt;
    &lt;input type=&quot;number&quot; step=&quot;0.01&quot; name=&quot;weight&quot; id=&quot;weight&quot; required&gt;
    &lt;input type=&quot;submit&quot; value=&quot;提交&quot;&gt;
&lt;/form&gt;

&lt;!-- 折线图 --&gt;
&lt;h2&gt;历史体重趋势&lt;/h2&gt;
&lt;canvas id=&quot;weightChart&quot;&gt;&lt;/canvas&gt;

&lt;script&gt;
    // 初始化折线图
    var ctx = document.getElementById('weightChart').getContext('2d');
    var weightChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: '体重（kg）',
                data: &lt;?php echo json_encode($dataPoints); ?&gt;,
                borderColor: 'blue',
                fill: false
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'YYYY-MM-DD'
                        }
                    },
                    title: {
                        display: true,
                        text: '时间'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: '体重（kg）'
                    }
                }
            }
        }
    });
&lt;/script&gt;
</code></pre>
</body>
</html>