![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：完成的不错，继续加油
Collection
Collection
一 style.css文件增加样式
/* 评论留言样式 */
.mov_list .mov_user {
display: flex;
margin-top: 5px;
}
.mov_list .mov_user h4 {
margin: 0;
padding: 0;
flex: 0.9;
}
.mov_list .mov_user .time {
font-size: 0.8rem;
}
.mov_list .content {
line-height: 30px;
height: 30px;
font-size: 18px;
padding-bottom: 10px;
border-bottom: 1px solid lightgray;
}点击 "运行实例" 按钮查看在线实例
二 hearder.php增加留言评论数据数据
// 留言数据信息 $message = [ [ 'msg_id' => 1, 'msg_user' => '张三', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 1 ], [ 'msg_id' => 2, 'msg_user' => '李四', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 1 ], [ 'msg_id' => 3, 'msg_user' => '王五', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 1 ], [ 'msg_id' => 4, 'msg_user' => '张三', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 2 ], [ 'msg_id' => 5, 'msg_user' => '李四', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 2 ], [ 'msg_id' => 6, 'msg_user' => '王五', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 2 ], [ 'msg_id' => 7, 'msg_user' => '张三', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 3 ], [ 'msg_id' => 8, 'msg_user' => '李四', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 3 ], [ 'msg_id' => 9, 'msg_user' => '王五', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 4 ], [ 'msg_id' => 10, 'msg_user' => '张三', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 4 ], [ 'msg_id' => 11, 'msg_user' => '李四', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 5 ], [ 'msg_id' => 12, 'msg_user' => '王五', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 5 ], [ 'msg_id' => 13, 'msg_user' => '张三', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 6 ], [ 'msg_id' => 14, 'msg_user' => '李四', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 7 ], [ 'msg_id' => 15, 'msg_user' => '王五', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 7 ], [ 'msg_id' => 16, 'msg_user' => '张三', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 8 ], [ 'msg_id' => 17, 'msg_user' => '李四', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 8 ], [ 'msg_id' => 18, 'msg_user' => '王五', 'msg_content' => '好***噢', 'msg_time' => '20190921 14:31:22', 'mov_id' => 9 ] ];
点击 "运行实例" 按钮查看在线实例
三 新增message.php留言评论页面
<?php
echo'
<div class=mov_pg>
<h2>评论专区</h2>
<from name="form1" method="POST" action="">
<table>
<tr>
<td><textarea name="content" maxlength="150" style="width:600px; height:150px; resize:none;"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="提交"></td>
</tr>
</table>
</from>
<h4>最新评论</h4>
<hr>
';
foreach($message as $msg){
echo '<div class="mov_list">';
if($msg['mov_id'] === $mov_id){
echo '<div class="mov_user"><h4 style="flex:0.9">用户名：' . $msg['msg_user'] . '</h4>';
echo '<span class="time">时间：' . $msg['msg_time'] . '</span></div>';
echo '<div class="content"><span>' . $msg['msg_content'] . '</span></div>';
echo '</div></div>';
}
}
?>点击 "运行实例" 按钮查看在线实例
四 detail.php详情页面导入message.php文件
<?php
// 加载公共头部
include __DIR__ . '/header.php';
$mov_id = intval($_GET['mov_id']);
// 复制list.php模板直接修改
foreach ($movies as $movie) {
if ($movie['mov_id'] === $mov_id) {
echo "<h3>{$movie['name']}</h3>";
echo '<img src="static/images/'.$movie['image'].'" alt="" width="300">';
echo "<p style='text-indent: 2em'>{$movie['detail']}</p>";
}
};
//加载留言专区
include __DIR__ . '/message.php';
// 加载公共底部
include __DIR__ . '/footer.php';点击 "运行实例" 按钮查看在线实例
五 完成效果图
