![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
1、公共部分：分离
header.php
<?php // 影视信息 $movies = [ [ 'mov_id' =>1, 'name' => '倚天屠龙记', 'image' => 'yttlj.jpg', 'detail' => '元朝末年，群雄纷起，武林动荡。江湖传闻，得到屠龙刀倚天剑者，可以成为武林至尊，号令天下，莫敢不从。一时间风云四起，引发了武林中对屠龙刀倚天剑的争夺，几段姻缘和孽缘也由此产生。武当派张翠山与天鹰教殷素素… ', 'cate_id' => 1 ], [ 'mov_id'=>2, 'name'=>'都挺好', 'image'=>'dth.jpg', 'detail'=>' 苏母的的突然离世打破了这个家庭外表的平静，意想不到的隐患层层显露，对毫无主见却又自私、小气的苏父的安置和后续生活问题，引发了远在国外的大哥与本城的二哥、小妹三家规律生活的不再。一直被苏母压制的苏父翻… ', 'cate_id'=>1 ], [ 'mov_id'=>3, 'name'=>'如果可以这样爱', 'image'=>'rgkyzya.jpg', 'detail'=>'一对已婚男女突然徇情自杀，以为可以结束这一切，却不料悲剧才刚刚开始——他们的爱人，耿墨池和白考儿，同时在葬礼上邂逅。面对同样的背叛他们同时选择报复但又同时爱上彼此，注定饱受打击和折磨。然而他们想真心拥… ', 'cate_id'=>1 ], [ 'mov_id'=>4, 'name'=>'复仇者联盟4', 'image'=>'fczlm.jpg', 'detail'=>'《复仇者联盟4：终局之战》将是漫威宇宙“无限传奇”（The Infinity Saga)的终结篇，是漫威电影宇宙十年的一个重要节点，结束部分英雄电影的故事，但也将展开新的剧情，呈现新的更为广阔宏大的宇…', 'cate_id'=>2 ], [ 'mov_id'=>5, 'name'=>'波西米亚狂想曲', 'image'=>'bxmykxq.jpg', 'detail'=>'弗雷迪·默丘里成名前在机场做行李搬运工。有一天，默丘里毛遂自荐加入杰·泰勒与布莱恩·梅的乐团，恰巧当天原本的主唱辞职，默丘里用自己横跨四个八度的超广音域说服两人，从此开启皇后乐团的摇滚传奇!', 'cate_id'=>2 ], [ 'mov_id'=>6, 'name'=>'阿丽塔:战斗天使', 'image'=>'fczlm.jpg', 'detail'=>'弗雷迪·默丘里成名前在机场做行李搬运工。有一天，默丘里毛遂自荐加入杰·泰勒与布莱恩·梅的乐团，恰巧当天原本的主唱辞职，默丘里用自己横跨四个八度的超广音域说服两人，从此开启皇后乐团的摇滚传奇!', 'cate_id'=>2 ], [ 'mov_id'=>7, 'name'=>'情书', 'image'=>'qs.jpg', 'detail'=>'***神户某个飘雪的冬日，渡边博子（中山美穗）在前未婚夫藤井树的三周年祭日上又一次悲痛到不能自已。正因为无法抑制住对已逝恋人的思念，渡边博子在其中学同学录里发现“藤井树” 在小樽市读书时的地址时，依循着…', 'cate_id'=> 3 ], [ 'mov_id'=>8, 'name'=>'天空之城', 'image'=>'tkzc.jpg', 'detail'=>'韩书珍将两个女儿的教育问题和对丈夫的贤内助工作都做得井井有条，在天空之城之中也是备受瞩目的女王，但其实书珍一直隐藏着不为人所知的秘密。李秀林是个充满了关怀和情感丰沛的童话作家，在书珍的引导之下成为了天…', 'cate_id'=>3 ], [ 'mov_id'=>9, 'name'=>'龙猫', 'image'=>'lm.jpg', 'detail'=>'为了方便妻子草壁靖子养病，草壁达郎决定带着两个女儿草壁皋月和草壁米搬到草壁靖子所在疗养院附近的乡下，父女三人入住了一间年久失修的老房子。小姐妹俩很快发现看似平凡无奇的乡下有很多神奇的事物，无人居住的房…', 'cate_id'=>3 ], ]; // 栏目信息 $cates = [ ['cate_id' => 1,'name' => 'gc','alias' => '国产好剧'], ['cate_id' => 2,'name' => 'om','alias' => '欧美大片'], ['cate_id' => 3,'name' => 'rh','alias' => '日韩新片'] ]; // 系统信息 $systerm = [ 'sys_id'=>1, 'title'=>'私人影院_jujo', 'desc'=>'收集全网最新最全的影视资源', 'key'=>'国产,欧美,日韩', 'copy'=>'php中文网' ] ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><?php echo $systerm['title'] ?></title> <meta name="description" content="<?php echo $systerm['desc'] ?>"> <meta name="keywords" content="<?php echo $systerm['key'] ?>"> <link rel="stylesheet" type="text/css" href="public/static/css/style.css"> </head> <body> <!-- 头部栏目模块 --> <div> <ul class="lan"> <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 $systerm['copy']; ?>© 版权所有</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
2、主页 index.php：聚合内容
<?php
// 头部加载
include __DIR__."/public/include/header.php";
foreach($cates as $cate){
echo "<h2>{$cate['alias']}</h2>";
echo '<ol>';
foreach($movies as $movie){
if($movie['cate_id'] === $cate['cate_id']){
echo "<li><a href='detail.php?mov_id=".$movie['mov_id']."'>{$movie['name']}</a></li>";
}
}
echo '</ol>';
}
// 底部加载
include __DIR__."/public/include/footer.php";点击 "运行实例" 按钮查看在线实例
预览效果
3、列表页：list.php
<?php
include __DIR__."/public/include/header.php";
$cate_id = $_GET['cate_id'];
$cate_id = intval($cate_id);
foreach($cates as $cate){
if($cate['cate_id'] === $cate_id){
echo "<h2>{$cate['alias']}</h2>";
echo '<ol>';
foreach($movies as $movie){
if($movie['cate_id'] === $cate['cate_id']){
echo "<li><a href='detail.php?mov_id=".$movie['mov_id']."'>{$movie['name']}</a></li>";
}
}
}
echo '</ol>';
}
// 底部加载
include __DIR__."/public/include/footer.php";点击 "运行实例" 按钮查看在线实例
运行效果
4、详情页：detail.php
<?php
include __DIR__."/public/include/header.php";
$mov_id = $_GET['mov_id'];
$mov_id = intval($mov_id);
foreach($movies as $movie){
if($movie['mov_id'] === $mov_id){
echo "<h3>{$movie['name']}</h3>";
echo "<img src='public/static/images/".$movie['image']."'>";
echo "<p class='detail'>{$movie['detail']}</p>";
// echo '<ol>';
// foreach($movies as $movie){
// if($movie['cate_id'] === $cate['cate_id']){
// echo "<li><a href=''>{$movie['name']}</a></li>";
// }
// }
}
echo '</ol>';
}
// 底部加载
include __DIR__."/public/include/footer.php";点击 "运行实例" 按钮查看在线实例
运行效果
css样式表：style.css
/**{
margin:0;
padding:0;
}*/
.clear{
clear: both;
}
.lan li{
list-style: none;
float: left;
width:120px;
height:45px;
background: #389AF7;
line-height: 45px;
text-align: center;
}
.lan{
width:100%;
height:45px;
background: #389AF7;
}
.lan a{
font-size:18px;
font-weight: 500;
color:#fff;
text-decoration: none;
}
/*ol li{
margin-left: 30pt;
}*/
/*底部*/
.footer{
width:100%;
height:35px;
background: #666;
}
.copyright{
color: #fff;
text-align: center;
line-height: 35px;
}
img{
width:300px;
}
.detail{
text-indent:2em;
}点击 "运行实例" 按钮查看在线实例