php读取数组数据，动态加载评论--2019年9月20日
程序员文章站
2022-03-11 14:15:49
...
0x01 前端动态加载数据
对于前端页面数据动态加载有多种方式，下面将展示的是利用html和php混编的方式，读取数组数据（或者通过读取数据库数据）进行前端数据渲染。
下面是评论区的主要数组数据以及代码：
数据：
// 评论数组 $comments = [ ['comment_id'=>1, 'mov_id'=>1, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'你喜欢河马吗？欸嘿'], ['comment_id'=>2, 'mov_id'=>1, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>3, 'mov_id'=>1, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'], ['comment_id'=>4, 'mov_id'=>2, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'事情变得有趣起来'], ['comment_id'=>5, 'mov_id'=>2, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>6, 'mov_id'=>2, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'], ['comment_id'=>7, 'mov_id'=>3, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'都听我的'], ['comment_id'=>8, 'mov_id'=>3, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>9, 'mov_id'=>3, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'], ['comment_id'=>10, 'mov_id'=>4, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'说好不哭'], ['comment_id'=>11, 'mov_id'=>4, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>12, 'mov_id'=>4, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'], ['comment_id'=>13, 'mov_id'=>5, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'也就这样了'], ['comment_id'=>14, 'mov_id'=>5, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>15, 'mov_id'=>5, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'], ['comment_id'=>16, 'mov_id'=>6, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'我给99分'], ['comment_id'=>17, 'mov_id'=>6, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>18, 'mov_id'=>6, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'], ['comment_id'=>19, 'mov_id'=>7, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'emmmm。。。'], ['comment_id'=>20, 'mov_id'=>7, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>21, 'mov_id'=>7, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'], ['comment_id'=>22, 'mov_id'=>8, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'发现宝藏！'], ['comment_id'=>23, 'mov_id'=>8, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>24, 'mov_id'=>8, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'], ['comment_id'=>25, 'mov_id'=>9, 'comment_date'=>'2019-9-22', 'comment_user'=>1 ,'desc'=>'一拳一个嘤嘤怪'], ['comment_id'=>26, 'mov_id'=>9, 'comment_date'=>'2019-9-22', 'comment_user'=>2 ,'desc'=>'感觉还行吧'], ['comment_id'=>27, 'mov_id'=>9, 'comment_date'=>'2019-9-22', 'comment_user'=>3 ,'desc'=>'差点意思嗷'] ]; // 用户数据数组 $users = [ ['user_id'=>1, 'name'=>'缘', 'image'=>'user1.jpg'], ['user_id'=>2, 'name'=>'耿鬼', 'image'=>'user2.jpg'], ['user_id'=>3, 'name'=>'菠萝赛东', 'image'=>'user3.jpg'] ];
主要的php代码：
echo '<h2>全部回复</h2>';
foreach ($comments as $comment) {
// 判断是否是相应电影的评价
if ($comment['mov_id'] === $mov_id) {
echo '<div class="comment_box">';
echo '<img src="static/images/';
// 判断当前取出的评论是属于哪个用户的，并将该用户的头像输出
foreach ($users as $user) {
if($user['user_id'] === $comment['comment_user']){
echo $user['image'];
}
}
echo '" alt="">';
echo '<div class="comment_desc">';
echo '<p>';
echo '<a href="">';
// 判断当前取出的评论是属于哪个用户的，并将该用户的用户名
foreach ($users as $user) {
if($user['user_id'] === $comment['comment_user']){
echo $user['name'];
}
}
echo ' </a>';
// 打印相关评论的评论日期
echo '<span> '.$comment['comment_date'].'</span>';
echo '</p>';
// 打印评论内容
echo '<p>'.$comment['desc'].'</p>';
echo '</div>';
echo '</div>';
}
}
相应添加的css样式：
h2 {
padding: 0 10px;
font-size: 18px;
font-weight: normal;
color: #009a61;
line-height: 40px;
border-bottom: 1px solid #ccc;
margin-bottom: 0;
}
.comment_box {
display: flex;
min-height: 60px;
border-bottom: 1px solid #ccc;
margin-top: 10px;
}
.comment_box>img {
width: 48px;
height: 48px;
border: 1px solid #eee;
border-radius: 50%;
margin-right: 10px;
}
.comment_box .comment_desc>p {
margin-top: 0;
margin-bottom: 12px;
}
.comment_box .comment_desc p:first-of-type>a {
text-decoration: none;
color: #333;
}
.comment_box .comment_desc p:first-of-type>span {
font-size: 12px;
color: #615d5d;
}
.comment_box .comment_desc p:last-of-type {
font-size: 14px;
}
效果展示：
0x02 总结
1. 在进行模块化开发时，有两种方式加载公共模块：
（1）include: 加载失败,不会终止当前脚本,只会发出警告
（2）require: 加载失败, 终止当前脚本的执行,是致命错误
上面两个方式可以让你对同一个资源进行多次加载，即多次引入某个资源文件，但这样做会浪费资源空间甚至导致程序出错。所以我们还可以使用：include_once / require_once，这两种仅允许加载一次
2. __DIR__：这是一个魔法常量（虽然是一个常量，但他的值可变），返回的是文件所在的绝对路径但是没有文件自身的名字在内，这样方便移动资源文件而不会导致错误。
3. 在遍历输出数组的时候一定要注意当前操作的是哪里的数组，它的下标是什么，以及它需要满足什么条件。