![[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
一、页面的分离：因把所有功能的页面都放在一个页面中，不便于管理，把部分功能另放在其他文件上，然后导入到一个页面中，便于管理，页面功能明了。一个网站的常用页面主要有以下这些：
header页面：主要用于保存网站头部页面；foot页面：主要用于保存网站底部版权页面；index页面：主要用于保存展现页面主题内容;list页面：主要用于保存页面列表数据；detail页面：主要用于保存页面详情内容。
二、页面导入：通过include把其他页面导入到index页面中。
三、页面模板
1.list页面模板：
<?php include __DIR__. "/public/header.php";?>
<!--影片列表-->
<?php
//获得传来的cate_id
$cate_id=$_GET['cate_id'];
$cate_id=(int)$cate_id;
//变量栏目
foreach ($cates as $cate){
//判断传来的cate_id是否与栏目的cate_id相等，并显示出栏目
if($cate_id===$cate['cate_id']){
echo '<h2>'.$cate['alias'].'</h2>';
}
}?>
<ol>
<?php foreach ($movies as $movie){
if($cate_id===$movie['cate_id']){?>
<li><a href="detail.php?mov_id=<?php echo $movie['mov_id']?>"><?php echo $movie['name']?></a></li>
<?php }
}?>
</ol>
<?php include __DIR__. "/public/foot.php";?>点击 "运行实例" 按钮查看在线实例
2.detail页面模板：
<?php include __DIR__. "/public/header.php";?>
<?php
//echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"..\/ls2\/public\/style.css\" />";
?>
<!--影片列表-->
<div class="detail">
<?php
$mov_id=$_GET['mov_id'];
$mov_id=(int)$mov_id;
foreach ($movies as $movie){
if($mov_id===$movie['mov_id']){
echo '<p class="title">'.$movie['name'].'</p>';
// echo '<img src=/public/static/images/'.$movie['image']>''.'<br>';
echo '<p><img src="public/static/images/'.$movie['image'].'" alt="" width="300"></p>';
echo '<p style="text-indent: 2em;">'.$movie['detail'].'</p>';
}
}
?>
</div>
<?php include __DIR__. "/public/foot.php";点击 "运行实例" 按钮查看在线实例
3.head页面：
<?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'=>'日韩新片'], ]; // 网站的系统设置 $system = [ 'sys_id'=>1, 'title'=>'私人影院', 'desc'=>'收集全网最新最全的影视资源', 'key'=>'国产,欧美,日韩', 'copy'=>'php中文网' ] ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta accesskey="key"> <meta title="title"> <meta name="desc"> <link rel="stylesheet" href="../ls2/public/style.css"> <title><?php echo $system['title']?></title> </head> <body> <!--导航--> <div class="head"> <ul> <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>
点击 "运行实例" 按钮查看在线实例
4.foot页面
5.index页面：
<?php include __DIR__. "/public/header.php";?>
<?php
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"..\/ls2\/public\/style.css\" />";
?>
<div class="index">
<?php foreach ($cates as $cate):?>
<h2><?php echo $cate['alias']?></h2>
<ol >
<?php foreach ($movies as $movie):?>
<?php if ($cate['cate_id']===$movie['cate_id']){?>
<li><a href="detail.php?mov_id=<?php echo $movie['mov_id']?>"><?php echo $movie['name']?></a></li>
<?php }?>
<?php endforeach;?>
</ol>
<?php endforeach;?>
</div>
<?php include __DIR__. "/public/foot.php";点击 "运行实例" 按钮查看在线实例