php读取数组数据，动态加载评论--2019年9月20日

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 '&nbsp;&nbsp;</a>';
            //  打印相关评论的评论日期
            echo '<span>&nbsp;&nbsp;'.$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.    在遍历输出数组的时候一定要注意当前操作的是哪里的数组，它的下标是什么，以及它需要满足什么条件。