![[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
加载static/css/style.css
.header {
background-color: brown;
height: 30px;
}
.nav li {
list-style: none;
min-width: 80px;
line-height: 30px;
float: left;
}
.nav li a {
text-decoration: none;
color: white;
}
.nav {
overflow: hidden;
}
.footer {
height: 30px;
background-color: #636363;
color: white;
text-align: center;
line-height: 30px;
}
.huifu {
width: 100%;
height: 25px;
background-color: #e9e7e7;
margin-bottom: 20px;
padding-left: 10px;
font-size: 14px;
box-sizing: border-box
}
.box {
width: 98%;
margin: 0 auto;
height: 100px;
border: 1px solid #666;
box-sizing: border-box;
margin-bottom: 20px
}
.tj {
width: 98%;
height: 20px;
margin: 0 auto
}
.pl_k {
width: 98%;
height: auto;
margin: 40px auto
}
.h3 {
font-size: 14px;
color: red;
font-weight: bold
}点击 "运行实例" 按钮查看在线实例
加载图片static/image 图片都是老师之前的
加载头部header.php
<?php //影评 $yingp = [ [ 'yp_id' =>1, 'name' =>'王晶:', 'yp_nr' =>'剧情满分' ], [ 'yp_id' =>1, 'name' =>'王家卫:', 'yp_nr' =>'导演的肯定' ], [ 'yp_id' =>1, 'name' =>'李安:', 'yp_nr' =>'除了老戏新唱带来的新鲜感，更可喜的是透过大银幕，我们可以看到一批年轻演员 正在以扎实的演技和专业态度，在迅速的成长。' ], [ 'yp_id' =>2, 'name' =>'知我心理学:', 'yp_nr' =>'解读《都挺好》：妈宝男、施虐者、假性亲密，这一家为何这么乱？' ], [ 'yp_id' =>2, 'name' =>'每天读文史:', 'yp_nr' =>'从论语到电视剧《都挺好》看父母教育，原来一切恶果皆有因' ], [ 'yp_id' =>3, 'name' =>'电影头条:', 'yp_nr' =>'一集弃！刘诗诗佟大为禁忌恋刷新狗血国产剧新高度' ], [ 'yp_id' =>3, 'name' =>'同相:', 'yp_nr' =>'《如果可以这样爱》淡化长沙，影视剧地名为何难以实名制？' ], [ 'yp_id' =>3, 'name' =>'电影头条:', 'yp_nr' =>'一集弃！刘诗诗佟大为禁忌恋刷新狗血国产剧新高度' ], [ 'yp_id' =>3, 'name' =>'同相:', 'yp_nr' =>'《如果可以这样爱》淡化长沙，影视剧地名为何难以实名制？' ], [ 'yp_id' =>3, 'name' =>'电影头条:', 'yp_nr' =>'一集弃！刘诗诗佟大为禁忌恋刷新狗血国产剧新高度' ], [ 'yp_id' =>3, 'name' =>'同相:', 'yp_nr' =>'《如果可以这样爱》淡化长沙，影视剧地名为何难以实名制？' ], [ 'yp_id' =>4, 'name' =>'哈哈哈哈:', 'yp_nr' =>'精彩' ], [ 'yp_id' =>4, 'name' =>'呵呵呵:', 'yp_nr' =>'十年布局' ], [ 'yp_id' =>5, 'name' =>'波西米亚狂想曲:', 'yp_nr' =>'波西米亚狂想曲' ], [ 'yp_id' =>5, 'name' =>'波西米亚狂想曲:', 'yp_nr' =>'波西米亚狂想曲' ], [ 'yp_id' =>6, 'name' =>'阿丽塔:', 'yp_nr' =>'战斗天使' ], [ 'yp_id' =>6, 'name' =>'战斗天使:', 'yp_nr' =>'阿丽塔' ], [ 'yp_id' =>7, 'name' =>'情书:', 'yp_nr' =>'他看着窗外的风景' ], [ 'yp_id' =>7, 'name' =>'情书:', 'yp_nr' =>'十月的天空很干净' ], [ 'yp_id' =>8, 'name' =>'天空之城:', 'yp_nr' =>'一集弃！刘诗诗佟大为禁忌恋刷新狗血国产剧新高度' ], [ 'yp_id' =>8, 'name' =>'天空之城:', 'yp_nr' =>'《如果可以这样爱》淡化长沙，影视剧地名为何难以实名制？' ], [ 'yp_id' =>9, 'name' =>'龙猫:', 'yp_nr' =>'一集弃！刘诗诗佟大为禁忌恋刷新狗血国产剧新高度' ], [ 'yp_id' =>9, 'name' =>'龙猫:', 'yp_nr' =>'《如果可以这样爱》淡化长沙，影视剧地名为何难以实名制？' ], ]; //copyright $copyright ="私人影院 "; // 影视剧数组 $movies = [ [ 'mov_id'=>1, 'name'=>'倚天屠龙记', 'image'=>'1.jpg', 'detail'=>'元朝末年，群雄纷起，武林动荡。江湖传闻，得到屠龙刀倚天剑者，可以成为武林至尊，号令天下，莫敢不从。一时间风云四起，引发了武林中对屠龙刀倚天剑的争夺，几段姻缘和孽缘也由此产生。武当派张翠山与天鹰教殷素素… ', 'cate_id'=>1 ], [ 'mov_id'=>2, 'name'=>'都挺好', 'image'=>'2.jpg', 'detail'=>' 苏母的的突然离世打破了这个家庭外表的平静，意想不到的隐患层层显露，对毫无主见却又自私、小气的苏父的安置和后续生活问题，引发了远在国外的大哥与本城的二哥、小妹三家规律生活的不再。一直被苏母压制的苏父翻… ', 'cate_id'=>1 ], [ 'mov_id'=>3, 'name'=>'如果可以这样爱', 'image'=>'3.jpg', 'detail'=>'一对已婚男女突然徇情自杀，以为可以结束这一切，却不料悲剧才刚刚开始——他们的爱人，耿墨池和白考儿，同时在葬礼上邂逅。面对同样的背叛他们同时选择报复但又同时爱上彼此，注定饱受打击和折磨。然而他们想真心拥… ', 'cate_id'=>1 ], [ 'mov_id'=>4, 'name'=>'复仇者联盟4', 'image'=>'4.jpg', 'detail'=>'《复仇者联盟4：终局之战》将是漫威宇宙“无限传奇”（The Infinity Saga)的终结篇，是漫威电影宇宙十年的一个重要节点，结束部分英雄电影的故事，但也将展开新的剧情，呈现新的更为广阔宏大的宇…', 'cate_id'=>2 ], [ 'mov_id'=>5, 'name'=>'波西米亚狂想曲', 'image'=>'5.jpg', 'detail'=>'弗雷迪·默丘里成名前在机场做行李搬运工。有一天，默丘里毛遂自荐加入杰·泰勒与布莱恩·梅的乐团，恰巧当天原本的主唱辞职，默丘里用自己横跨四个八度的超广音域说服两人，从此开启皇后乐团的摇滚传奇!', 'cate_id'=>2 ], [ 'mov_id'=>6, 'name'=>'阿丽塔:战斗天使', 'image'=>'6.jpg', 'detail'=>'弗雷迪·默丘里成名前在机场做行李搬运工。有一天，默丘里毛遂自荐加入杰·泰勒与布莱恩·梅的乐团，恰巧当天原本的主唱辞职，默丘里用自己横跨四个八度的超广音域说服两人，从此开启皇后乐团的摇滚传奇!', 'cate_id'=>2 ], [ 'mov_id'=>7, 'name'=>'情书', 'image'=>'7.jpg', 'detail'=>'***神户某个飘雪的冬日，渡边博子（中山美穗）在前未婚夫藤井树的三周年祭日上又一次悲痛到不能自已。正因为无法抑制住对已逝恋人的思念，渡边博子在其中学同学录里发现“藤井树” 在小樽市读书时的地址时，依循着…', 'cate_id'=> 3 ], [ 'mov_id'=>8, 'name'=>'天空之城', 'image'=>'8.jpg', 'detail'=>'韩书珍将两个女儿的教育问题和对丈夫的贤内助工作都做得井井有条，在天空之城之中也是备受瞩目的女王，但其实书珍一直隐藏着不为人所知的秘密。李秀林是个充满了关怀和情感丰沛的童话作家，在书珍的引导之下成为了天…', 'cate_id'=>3 ], [ 'mov_id'=>9, 'name'=>'龙猫', 'image'=>'9.jpg', 'detail'=>'为了方便妻子草壁靖子养病，草壁达郎决定带着两个女儿草壁皋月和草壁米搬到草壁靖子所在疗养院附近的乡下，父女三人入住了一间年久失修的老房子。小姐妹俩很快发现看似平凡无奇的乡下有很多神奇的事物，无人居住的房…', 'cate_id'=>3 ], ]; // 栏目数组 $cates = [ ['cate_id'=>1, 'name'=>'gc', 'alias'=>'国产好剧'], ['cate_id'=>2, 'name'=>'om', 'alias'=>'欧美猛片'], ['cate_id'=>3, 'name'=>'rh', 'alias'=>'日韩新片'], ]; // 网站的系统设置 $system = [ 'sys_id'=>1, 'title'=>'私人影院', 'desc'=>'收集全网最新最全的影视资源', 'key'=>'国产,欧美,日韩', 'copy'=>'php中文网' ] ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../static/css/style.css"> <meta name="description" content="<?php echo $system['desc'] ?>"> <meta name="keywords" content="<?php echo $system['key'] ?>"> <title><?php echo $system['title'] ?></title> </head> <body> <!--头部导航--> <div class="header"> <ul class="nav"> <li><a href="index.php">首页</a></li> <?php foreach ($cates as $cate) : ?> <li><a href="list.php?cate_id=<?php echo $cate['cate_id']; ?>"><?php echo $cate['alias'] ?></a></li> <?php endforeach; ?> </ul> </div>
点击 "运行实例" 按钮查看在线实例
加载底部footer.php
<!--底部版权--> <div class="footer"> <p class="copyright"><?php echo $copyright; ?> © 版权所有</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
加载首页index.php
<?php
// 加载公共头部
include __DIR__ . "/header.php";
// 使用双重循环来遍历二个数组
// 外层遍历栏目数组$cates, 内层根据栏目id来查询对应的影视剧信息
foreach ($cates as $cate) {
echo "<h2>{$cate['alias']}</h2>";
echo '<ol>';
// 遍历影视剧数组
foreach ($movies as $movie) {
// 判断当前影视剧所属栏目是否与当前栏目id相同?
if ($cate['cate_id'] === $movie['cate_id']) {
echo "<li><a href='detail.php?mov_id=" .$movie['mov_id']. "'>{$movie['name']}</a></li>";
}
}
echo '</ol>';
}
// 加载公共底部
include __DIR__ . '/footer.php';点击 "运行实例" 按钮查看在线实例
加载gc.php
<?php require __DIR__ . '/header.php'; ?>
<h2><?php echo $navs['gc']; ?></h2>
<img src=" ../images/1.jpg" alt="" width="300">
<ol>
<?php foreach ($movies[0] as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<?php require __DIR__ . '/footer.php'; ?>点击 "运行实例" 按钮查看在线实例
加载om.php
<?php require __DIR__ . '/header.php'; ?>
<h2><?php echo $navs['om']; ?></h2>
<img src="/images/1.jpg" alt="" width="300">
<ol>
<?php foreach ($movies[1] as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<?php require __DIR__ . '/footer.php'; ?>点击 "运行实例" 按钮查看在线实例
加载rh.php
<?php require __DIR__ . '/header.php'; ?>
<h2><?php echo $navs['rh']; ?></h2>
<img src="/images/3.jpg" alt="" width="300">
<ol>
<?php foreach ($movies[2] as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<?php require __DIR__ . '/footer.php'; ?>点击 "运行实例" 按钮查看在线实例
加载list.php
<?php
// 加载公共头部
include __DIR__ . '/header.php';
// 将当前栏目id,, 使用GET方式,通过URL地址传递到列表模板list.php
$cate_id = $_GET['cate_id'];
// 注意: url中的内容都是字符串, 整数字符串先做类型转换才可以
//echo gettype($cate_id);die;
$cate_id = intval($cate_id); // 函数转换
// 将index.php中的主体代码简单修改一下
// 只显示一个栏目, 不需要做循环, 只需要作一个判断即可
foreach ($cates as $cate) {
// 在index.php基础上加一层判断,确定是否是当前栏目即可
// 如果上面的GET参数没有做类型转换, 那么这里就不能用===恒等
// 必须使用==, 以触发系统的类型自动转换机掉, 我还是建议全等操作
// == : 只比较值是否相等, === : 值与类型,都必须完全相同
if ($cate['cate_id'] === $cate_id) {
echo "<h2>{$cate['alias']}</h2>";
echo '<ol>';
foreach ($movies as $movie) {
if ($cate['cate_id'] == $movie['cate_id']) {
echo "<li><a href='detail.php?mov_id=" .$movie['mov_id']. "'>{$movie['name']}</a></li>";
}
}
echo '</ol>';
break; // 结束循环
};
}
// 加载公共底部
include __DIR__ . '/footer.php';点击 "运行实例" 按钮查看在线实例
加载detail.php
<?php
// 加载公共头部
include __DIR__ . '/header.php';
?>
<?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/image/'.$movie['image'].'" alt="" width="300">';
echo "<p style='text-indent: 2em'>{$movie['detail']}</p>";
}
};
?>
<div class="huifu">热门评论</div>
<div class="box">
<textarea style="width:99.7%;border:none; height:90px;resize:none" placeholder="我来评论..." name="" id="" cols="30" rows="5" ></textarea>
</div>
<div class="tj">
<button style="width:50px">提交</button>
</div>
<div class="pl_k">
<?php
$mov_id = intval($_GET['mov_id']);
foreach ($yingp as $yp){
if($yp['yp_id'] === $mov_id)
{
echo "<p style='font-size:16px; color: red;font-weight: bold'>{$yp['name']}</h3>";
echo "<p style='text-indent: 2em'>{$yp['yp_nr']}</p>";
echo "<hr>";
}
};
?>
</div>
<?php
// 加载公共底部
include __DIR__ . '/footer.php'; ?>点击 "运行实例" 按钮查看在线实例
利用yingp里面的yp_id对应movies里面的mov-id，显示出评论
