如何在图标卡片中输出不同MySQL查询结果？现有方案失效求助

首先，咱们先梳理下你当前遇到的问题，然后一步步调整到左侧卡片的展示效果：

1. 先开启PHP错误提示，排查隐藏问题 #

你现在控制台没报错，但卡片空内容，大概率是PHP连接或查询出错了，但错误被系统屏蔽了。在页面最顶部加上这段代码，就能看到具体的错误信息：

error_reporting(E_ALL);
ini_set('display_errors', 1);

2. 修复数据库连接与查询逻辑 #

你的代码每个卡片都重新建立一次数据库连接，既浪费资源又容易出问题，而且查询结果的处理也不够完善。咱们把连接抽出来统一管理，同时处理空结果的情况：

// 页面顶部统一建立数据库连接
$connect = mysqli_connect("localhost", "user", "password!", "test");
// 检查连接是否成功
if (!$connect) {
    die("数据库连接失败: " . mysqli_connect_error());
}

另外要注意：如果你的date字段是datetime类型，得用DATE(date) = CURDATE()来匹配日期，避免时间部分干扰查询结果。

3. 调整卡片内的输出格式，匹配左侧样式 #

你之前输出的['时间']格式不符合卡片的展示逻辑，左侧卡片应该是显眼的数值+下方的描述文本，咱们修改输出部分：

<div class="mr-5">
    <?php
    $query = "SELECT SUBSTRING(AVG(TIME_FORMAT(`time`, '%i:%s')), 2, 5) AS `time` FROM test.time WHERE DATE(`date`) = CURDATE()";
    $result = mysqli_query($connect, $query);
    $row = mysqli_fetch_assoc($result);
    // 如果没有查询到数据，显示默认值--
    $avgTime = $row['time'] ?? '--';
    ?>
    <div class="h5 mb-0 font-weight-bold"><?php echo $avgTime; ?></div>
    <div class="text-white-50">今日平均处理时长</div>
</div>

4. 多卡片的复用方案（如果需要多个不同查询的卡片） #

如果要做多个卡片，每个对应不同的查询，咱们可以把卡片配置和查询封装成数组，循环生成卡片，这样代码更整洁易维护：

// 定义所有卡片的配置：图标、背景色、标题、查询语句
$cards = [
    [
        'icon' => 'fas fa-fw fa-clock',
        'bgClass' => 'bg-primary',
        'title' => '今日平均处理时长',
        'query' => "SELECT SUBSTRING(AVG(TIME_FORMAT(`time`, '%i:%s')), 2, 5) AS `time` FROM test.time WHERE DATE(`date`) = CURDATE()"
    ],
    [
        'icon' => 'fas fa-fw fa-users',
        'bgClass' => 'bg-success',
        'title' => '今日访问用户数',
        'query' => "SELECT COUNT(DISTINCT user_id) AS count FROM test.logs WHERE DATE(created_at) = CURDATE()"
    ],
    // 可以继续添加更多卡片
];
?>

<!-- Icon Cards-->
<div class="row">
    <?php foreach ($cards as $card): ?>
        <div class="col-xl-3 col-sm-6 mb-3">
            <div class="card text-white <?php echo $card['bgClass']; ?> o-hidden h-100">
                <div class="card-body">
                    <div class="card-body-icon">
                        <i class="<?php echo $card['icon']; ?>"></i>
                    </div>
                    <div class="mr-5">
                        <?php
                        $result = mysqli_query($connect, $card['query']);
                        $row = mysqli_fetch_assoc($result);
                        // 自动获取查询结果的第一个字段值，无数据则显示--
                        $value = $row ? reset($row) : '--';
                        ?>
                        <div class="h5 mb-0 font-weight-bold"><?php echo $value; ?></div>
                        <div class="text-white-50"><?php echo $card['title']; ?></div>
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<?php
// 页面末尾关闭数据库连接
mysqli_close($connect);
?>

为什么之前的代码没显示内容？ #

• 可能是查询没有返回数据（比如今天还没有相关记录），但你的代码没有处理空结果的情况，所以输出为空；
• 也可能是数据库连接失败，但因为没开错误提示，看不到报错信息；
• 你之前输出的['时间']格式不符合卡片的CSS样式，可能被隐藏或者视觉上看起来是空的。

另外，之前Ajax导致页面崩溃，大概率是因为请求逻辑有问题（比如循环请求、没有正确处理回调），用PHP直接渲染的方式更适合这种后台统计卡片的场景，性能更稳定。

内容的提问来源于stack exchange，提问作者a.parkes