PHP 体重管理网页 - 录入和历史趋势可视化 - 常规

PHP 体重管理网页 - 轻松记录并可视化你的体重变化

本页面提供一个简单的体重管理系统，使用 PHP 和 Chart.js 库实现。你可以轻松地记录你的体重数据，并以直观的折线图形式查看历史趋势。

主要功能

录入体重： 输入你的体重，时间戳会自动记录。
上传体重： 点击提交按钮后，当前时间戳和体重会被上传到数据库。
体重趋势可视化： 使用折线图从数据库中获取历史体重数据，并展示在页面上。

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>体重管理网页</title>
    <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
    <style>
        canvas {
            max-width: 500px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1>体重管理</h1>

    <h2>录入体重</h2>
    <form method='POST' action=''>
        <label for='weight'>体重（kg）：</label>
        <input type='text' name='weight' id='weight' required>
        <input type='submit' value='提交'>
    </form>

    <?php
    // 连接数据库
    $servername = '103.214.173.233';
    $username = 'water';
    $password = 'xX300400';
    $dbname = 'water';

    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
        die('数据库连接失败: ' . $conn->connect_error);
    }

    // 处理表单提交
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $weight = $_POST['weight'];
        $timestamp = time();

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

    // 查询历史体重数据
    $sql = 'SELECT data, tizhong FROM tizhongrou';
    $result = $conn->query($sql);
    $weights = [];

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $weights[] = $row['tizhong'];
        }
    }

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

    <h2>历史体重趋势</h2>
    <canvas id='weightChart'></canvas>

    <script>
        var ctx = document.getElementById('weightChart').getContext('2d');

        // 使用PHP变量创建折线图数据
        var weights = <?php echo json_encode($weights); ?>;

        // 创建折线图对象
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: Array.from({length: weights.length}, (_, i) => i + 1),
                datasets: [{
                    label: '体重',
                    data: weights,
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: '次数'
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: '体重（kg）'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

说明

该代码使用 MySQL 数据库存储体重数据，你可以根据自己的情况修改数据库配置。
Chart.js 用于创建折线图，你可以在 https://www.chartjs.org/ 上找到更多关于 Chart.js 的信息。
代码中使用了 PHP 的 json_encode() 函数将 weights 数组转换为 JSON 格式，方便 JavaScript 使用。

注意

请确保你的服务器环境已安装 PHP 和 MySQL。
在使用代码之前，请根据自己的情况修改数据库配置信息。
代码仅供参考，你可以根据自己的需求进行修改和扩展。

希望这个简单的体重管理网页能够帮助你记录和管理你的体重数据，并更好地了解你的体重变化趋势！