创新实训(五)个人信息展示
个人信息的展示
设置简单的前端表单页面展示用户个人信息,并且对用户的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() ?>
生成页面的页脚部分。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!