创新实训（五）个人信息展示

个人信息的展示

设置简单的前端表单页面展示用户个人信息，并且对用户的rating变化率有一个可视化展示效果

1. 获取用户名并加载所需库

$username = $_GET['username'];
requireLib('flot');

从 GET 请求中获取用户名，并加载 flot 库以用于绘制图表。

2. 验证用户名并查询用户信息

if (validateUsername($username) && ($user = queryUser($username))):

验证用户名是否合法并查询用户信息。如果用户名合法且用户存在，则显示用户信息页面。

3. 显示用户信息页面标题

<?php echoUOJPageHeader($user['username'] . ' - ' . UOJLocale::get('user profile')) ?>

根据用户的用户名和本地化的“用户资料”标签生成页面标题。

4. 转义用户信息并设置性别显示样式

$esc_email = HTML::escape($user['email']);
$esc_qq = HTML::escape($user['qq'] != 0 ? $user['qq'] : 'Unfilled');
$esc_sex = HTML::escape($user['sex']);
$col_sex = "color:blue";
if($esc_sex == "M") {
    $esc_sex = "♂";
    $col_sex = "color:blue";
} else if($esc_sex == "F") {
    $esc_sex = "♀";
    $col_sex = "color:red";
} else {
    $esc_sex = "";
    $col_sex = "color:black";
}
$esc_motto = HTML::escape($user['motto']);

转义用户的电子邮件、QQ 号码、性别和座右铭，确保 HTML 安全。根据性别设置显示样式：男性用蓝色，女性用红色，其他用黑色。

5. 显示用户信息卡片

<div class="card border-info">
    <h5 class="card-header bg-info"><?= UOJLocale::get('user profile') ?></h5>
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-md-4 order-md-9">
                <img class="media-object img-thumbnail d-block mx-auto" alt="<?= $user['username'] ?> Avatar" src="<?= HTML::avatar_addr($user, 256) ?>" />
            </div>
            <div class="col-md-8 order-md-1">
                <h2><span class="uoj-honor" data-rating="<?= $user['rating'] ?>"><?= $user['username'] ?></span> <span><strong style="<?= $col_sex ?>"><?= $esc_sex ?></strong></span></h2>
                <div class="list-group">
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading"><?= UOJLocale::get('rating') ?></h4>
                        <p class="list-group-item-text"><strong style="color:red"><?= $user['rating'] ?></strong></p>
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading"><?= UOJLocale::get('email') ?></h4>
                        <p class="list-group-item-text"><?= $esc_email ?></p>
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading"><?= UOJLocale::get('QQ') ?></h4>
                        <p class="list-group-item-text"><?= $esc_qq ?></p>
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading"><?= UOJLocale::get('motto') ?></h4>
                        <p class="list-group-item-text"><?= $esc_motto ?></p>
                    </div>
                    <!-- ...其他信息项... -->
                </div>
            </div>
        </div>
        <!-- ...其他按钮和内容... -->
    </div>
</div>

使用 Bootstrap 卡片组件显示用户信息。包括头像、用户名、评分、电子邮件、QQ、性别和座右铭等。

6. 显示用户评分变化图表

<div class="list-group-item">
    <h4 class="list-group-item-heading"><?= UOJLocale::get('rating changes') ?></h4>
    <div class="list-group-item-text" id="rating-plot" style="height:500px;"></div>
</div>

创建一个用于显示用户评分变化图表的容器 div。

7. 生成用户评分数据并绘制图表

<script type="text/javascript">
var rating_data = [[
// ...生成的用户评分数据...
]];
var rating_plot = $.plot($("#rating-plot"), [{
    color: "#3850eb",
    label: "<?= $user['username'] ?>",
    data: rating_data[0]
}], {
    series: {
        lines: {
            show: true
        },
        points: {
            show: true
        }
    },
    xaxis: {
        mode: "time"
    },
    yaxis: {
        min: <?= $user_rating_min ?>,
        max: <?= $user_rating_max ?>
    },
    legend: {
        labelFormatter: function(username) {
            return getUserLink(username, <?= $user['rating'] ?>, false);
        }
    },
    grid: {
        clickable: true,
        hoverable: true
    },
    hooks: {
        drawBackground: [
            function(plot, ctx) {
                var plotOffset = plot.getPlotOffset();
                for (var y = 0; y < plot.height(); y++) {
                    var rating = <?= $user_rating_max ?> - <?= $user_rating_max - $user_rating_min ?> * y / plot.height();
                    ctx.fillStyle = getColOfRating(rating);
                    ctx.fillRect(plotOffset.left, plotOffset.top + y, plot.width(), Math.min(5, plot.height() - y));
                }
            }
        ]
    }
});

function showTooltip(x, y, contents) {
    $('<div id="rating-tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 20,
        left: x + 10,
        border: '1px solid #fdd',
        padding: '2px',
        'font-size' : '11px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

var prev = -1;
function onHoverRating(event, pos, item) {
    if (prev != item.dataIndex) {
        $("#rating-tooltip").remove();
        var params = rating_data[item.seriesIndex][item.dataIndex];

        var total = params[1];
        var contestId = params[2];
        if (contestId != 0) {
            var change = params[5] > 0 ? "+" + params[5] : params[5];
            var contestName = params[3];
            var rank = params[4];
            var html = "= " + total + " (" + change + "), <br/>"
            + "Rank: " + rank + "<br/>"
            + '<a href="' + '/contest/' + contestId + '">' + contestName + '</a>';
        } else {
            var html = "= " + total + "<br/>"
            + "Unrated";
        }
        showTooltip(item.pageX, item.pageY, html);
        prev = item.dataIndex;
    }
}
$("#rating-plot").bind("plothover", function (event, pos, item) {
    if (item) {
        onHoverRating(event, pos, item);
    }
});
$("#rating-plot").bind("plotclick", function (event, pos, item) {
    if (item && prev == -1) {
        onHoverRating(event, pos, item);
    } else {
        $("#rating-tooltip").fadeOut(200);
        prev = -1;
    }
});
</script>

使用 Flot 库生成并绘制用户评分变化图表，支持悬停和点击显示详细信息的工具提示。

8. 显示用户通过的题目

<div class="list-group-item">
    <?php
        $ac_problems = DB::selectAll("select problem_id from best_ac_submissions where submitter = '{$user['username']}'");
    ?>
    <h4 class="list-group-item-heading"><?= UOJLocale::get('accepted problems').'：'.UOJLocale::get('n problems in total', count($ac_problems))?> </h4>
    <p class="list-group-item-text">
    <?php
        foreach ($ac_problems as $problem) {
            echo '<a href="/problem/', $problem['problem_id'], '" style="display:inline-block; width:4em;">', $problem['problem_id'], '</a>';
        }
        if (empty($ac_problems)) {
            echo UOJLocale::get('none');
        }
    ?>
    </p>
</div>

查询并显示用户通过的题目列表。如果用户没有通过任何题目，则显示“无”信息。

9. 处理用户不存在的情况

<?php

 else: ?>
    <?php echoUOJPageHeader('不存在该用户' . ' - 用户信息') ?>
    <div class="card border-danger">
        <div class="card-header bg-danger">用户信息</div>
        <div class="card-body">
        <h4>不存在该用户</h4>
        </div>
    </div>
<?php endif ?>

如果用户名无效或用户不存在，显示“用户不存在”的页面。

10. 显示页面页脚

<?php echoUOJPageFooter() ?>

生成页面的页脚部分。