PHP 体重管理网页 - 录入、上传和历史体重趋势 - 常规

使用 PHP 创建体重管理网页

本示例演示如何使用 PHP 创建一个简单的体重管理网页，允许用户录入体重、上传数据到数据库，并以折线图形式展示历史体重趋势。

功能:

录入体重:
- 时间使用自动时间戳。
- 体重使用输入框输入。
上传体重:
- 点击提交按钮后，将当前时间戳和体重上传到数据库。
- 数据库配置:
  - IP: 103.214.173.233
  - 端口: 3306
  - 用户名: water
  - 密码: xX300400
  - 数据库名: water
  - 表名: tizhongrou
  - 时间戳字段: data
  - 体重字段: tizhong
历史体重趋势:
- 从数据库获取历史体重数据。
- 使用折线图展示历史体重趋势。

代码示例:

<!DOCTYPE html>
<html>
<head>
    <title>体重管理</title>
    <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
</head>
<body>
    <h1>体重管理</h1>

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

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

    <?php
    // 连接数据库
    $conn = new mysqli('103.214.173.233', 'water', 'xX300400', 'water', 3306);
    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) === FALSE) {
            echo '数据插入失败：' . $conn->error;
        }
    }

    // 从数据库中获取历史体重数据
    $sql = 'SELECT data, tizhong FROM tizhongrou';
    $result = $conn->query($sql);
    $dataPoints = array();
    while ($row = $result->fetch_assoc()) {
        $dataPoints[] = array('x' => intval($row['data']), 'y' => floatval($row['tizhong']));
    }
    ?>

    <script>
        // 使用Chart.js绘制折线图
        var ctx = document.getElementById('chart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: '体重趋势',
                    data: ' . json_encode($dataPoints) . ',
                    borderColor: 'blue',
                    fill: false
                }]
            },
            options: {
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'day',
                            displayFormats: {
                                day: 'YYYY-MM-DD'
                            }
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: '体重（kg）'
                        }
                    }
                }
            }
        });
    </script>

</body>
</html>

注意:

上述代码仅提供了基本功能实现，您可以根据自身需求进行定制和改进。
为确保安全，建议将数据库连接信息存储在安全位置，并使用更安全的方式处理数据库查询和插入。
将数据库配置信息直接硬编码到代码中是不安全的，建议使用环境变量或配置文件来存储这些敏感信息。
数据库连接信息和密码应保密，不要将它们直接暴露在代码中。
为了提高代码安全性，建议使用预处理语句来执行 SQL 查询，并对用户输入进行过滤和验证。
可以使用更强大的图表库来创建更复杂的图表，例如 Highcharts 或 D3.js。
为了提高网站性能，可以优化代码和数据库查询，并使用缓存机制。

希望这个示例能够帮助您创建自己的 PHP 体重管理网页。