PHP 体重管理网页 - 记录你的体重变化趋势 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>PHP 体重管理网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        form {
            margin-bottom: 20px;
        }
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        #chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <h1>PHP 体重管理</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 = 'INSERT INTO tizhongrou (data, tizhong) VALUES ($timestamp, $weight)';
    if ($conn-&gt;query($sql) === TRUE) {
        echo '体重已上传成功！';
    } else {
        echo '错误：' . $sql . '&lt;br&gt;' . $conn-&gt;error;
    }
}

// 查询历史体重数据
$sql = 'SELECT data, tizhong FROM tizhongrou';
$result = $conn-&gt;query($sql);
$chartData = [];
if ($result-&gt;num_rows &gt; 0) {
    while($row = $result-&gt;fetch_assoc()) {
        $chartData[] = [$row['data'] * 1000, $row['tizhong']];
    }
}
$conn-&gt;close();
?&gt;

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

&lt;!-- 折线图 --&gt;
&lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/apexcharts@3.28.0&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    var options = {
        series: [{
            name: '体重',
            data: &lt;?php echo json_encode($chartData); ?&gt;
        }],
        chart: {
            height: 400,
            type: 'line',
            zoom: {
                enabled: false
            }
        },
        xaxis: {
            type: 'datetime'
        }
    };
    var chart = new ApexCharts(document.querySelector('#chart'), options);
    chart.render();
&lt;/script&gt;
</code></pre>
</body>
</html>