# :-: 前端页面与内容分析
### 1、资源目录结构
* `static`: 公共静态资源目录,如css,images,js
```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;
}
```
> `image`目录，公用资源图片
<img src="http://kanyun.8car.net/php/1.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/4.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/7.jpg" width="100" height="100" alt="图片名称" align=center>
---
### 2、首页制作与页面拆分
#### 2.1 知识点
* 数组:
* 索引数组: 键名是默认递增整数索引
* 关联数组: 键名是字符串
* 数组成员的访问: 按键名访问
* 数组的遍历: foreach()
* 二维数组的定义与访问
#### 2.2 目录结构
* 首页: `index.php`,所有栏目内容的聚合
```php
<?php
// 变量
$headline = '欧阳克电影';
$copyright = '欧阳克';
// 关联数组
$navs = [
'gc'=>'国产好剧',
'om'=>'欧美猛片',
'rh'=>'日韩新片'
];
// 二维数组
$movies = [
['倚天屠龙记', '都挺好','如果可以这样爱'],
['复仇者联盟4', '波西米亚狂想曲','阿丽塔'],
['情书', '天空之城', '龙猫']
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/style.css">
<title><?php echo $headline ?></title>
</head>
<body>
<!--头部导航-->
<div class="header">
<ul class="nav">
<li><a href="index.php">首页</a></li>
<?php foreach ($navs as $key=>$nav){ ?>
<li><a href="<?php echo $key.'.php'; ?>"><?php echo $nav; ?></a></li>
<?php } ?>
</ul>
</div>
<!--国产原创-->
<h2><?php echo $navs['gc']; ?></h2>
<ol>
<?php foreach ($movies[0] as $movie){ ?>
<li><a href="#"><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<!--欧美猛片-->
<h2><?php echo $navs['om']; ?></h2>
<ol>
<?php foreach ($movies[1] as $movie){ ?>
<li><a href="#"><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<!--日韩推荐-->
<h2><?php echo $navs['rh']; ?></h2>
<ol>
<?php foreach ($movies[2] as $movie){ ?>
<li><a href="#"><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<!--底部版权-->
<div class="footer">
<p class="copyright"><?php echo $copyright; ?> © 版权所有</p>
</div>
</body>
</html>
```
* `gc.php`: [栏目页] 国产原创
```php
<?php
// 变量
$copyright = '欧阳克';
// 创建二个变量来保存页面中的动态内容
$movies = ['倚天屠龙记', '都挺好','如果可以这样爱'];
// 栏目数组的键名与栏目文件同名
$navs = [
'gc'=>'国产好剧',
'om'=>'欧美猛片',
'rh'=>'日韩新片'
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/style.css">
<title><?php echo $navs['gc']; ?></title>
</head>
<body>
<!--头部导航-->
<div class="header">
<ul class="nav">
<li><a href="index.php">首页</a></li>
<?php foreach ($navs as $key=>$nav){ ?>
<li><a href="<?php echo $key.'.php'; ?>"><?php echo $nav; ?></a></li>
<?php } ?>
</ul>
</div>
<h2><?php echo $navs['gc']; ?></h2>
<img src="/images/1.jpg" alt="" width="300">
<!--对于数组,循环遍历更方便-->
<ol>
<?php foreach ($movies as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<!--底部版权-->
<div class="footer">
<p class="copyright"><?php echo $copyright; ?>© 版权所有</p>
</div>
</body>
</html>
```
* `om.php`: [栏目页] 欧美猛片
```php
<?php
$copyright = '欧阳克';
// 创建二个变量来保存页面中的动态内容
$movies = ['复仇者联盟4', '波西米亚狂想曲','阿丽塔'];
// 栏目数组的键名与栏目文件同名
$navs = [
'gc'=>'国产好剧',
'om'=>'欧美猛片',
'rh'=>'日韩新片'
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/style.css">
<title><?php echo $navs['om']; ?></title>
</head>
<body>
<!--头部导航-->
<div class="header">
<ul class="nav">
<li><a href="index.php">首页</a></li>
<?php foreach ($navs as $key=>$nav){ ?>
<li><a href="<?php echo $key.'.php'; ?>"><?php echo $nav; ?></a></li>
<?php } ?>
</ul>
</div>
<h2><?php echo $navs['om']; ?></h2>
<img src="/images/4.jpg" alt="" width="300">
<!--对于数组,循环遍历更方便-->
<ol>
<?php foreach ($movies as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<!--底部版权-->
<div class="footer">
<p class="copyright"><?php echo $copyright; ?>© 版权所有</p>
</div>
</body>
</html>
```
* `rh.php`: [栏目页] 日韩推荐
```php
<?php
$copyright = '欧阳克';
// 创建二个变量来保存页面中的动态内容
$movies = ['情书', '天空之城', '龙猫'];
// 栏目数组的键名与栏目文件同名
$navs = [
'gc'=>'国产好剧',
'om'=>'欧美猛片',
'rh'=>'日韩新片'
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/style.css">
<title><?php echo $navs['rh']; ?></title>
</head>
<body>
<!--头部导航-->
<div class="header">
<ul class="nav">
<li><a href="index.php">首页</a></li>
<?php foreach ($navs as $key=>$nav){ ?>
<li><a href="<?php echo $key.'.php'; ?>"><?php echo $nav; ?></a></li>
<?php } ?>
</ul>
</div>
<h2><?php echo $navs['rh']; ?></h2>
<img src="/images/7.jpg" alt="" width="300">
<!--对于数组,循环遍历更方便-->
<ol>
<?php foreach ($movies as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<!--底部版权-->
<div class="footer">
<p class="copyright"><?php echo $copyright; ?> © 版权所有</p>
</div>
</body>
</html>
```
----------------------------------------
## :-: 分离页面公共部分
### 3.1 知识点
* 页面公共部分分离的优点
* 外部文件加载语句:
* `include`: 加载失败,不会终止当前脚本,只会发出警告
* `require`: 加载失败, 终止当前脚本的执行,是致命错误
* `include_once / require_once `: 仅允许加载一次
> `image`目录，公用资源图片
<img src="http://kanyun.8car.net/php/1.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/2.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/3.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/4.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/5.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/6.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/7.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/8.jpg" width="100" height="100" alt="图片名称" align=center>
<img src="http://kanyun.8car.net/php/9.jpg" width="100" height="100" alt="图片名称" align=center>
### 3.2 目录结构
* `inc/header.php`: 公共头部
```php
<?php
$copyright = '欧阳克';
// 创建二维数组用来显示所有的影视剧名称
$movies = [];
$movies[] = ['倚天屠龙记', '都挺好','如果可以这样爱'];
$movies[] = ['复仇者联盟4', '波西米亚狂想曲','阿丽塔'];
$movies[] = ['情书', '天空之城', '龙猫'];
// 栏目数组的键名与栏目文件同名
$navs = [
'gc'=>'国产好剧',
'om'=>'欧美猛片',
'rh'=>'日韩新片'
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/style.css">
<title><?php echo $navs['gc']; ?></title>
</head>
<body>
<!--头部导航-->
<div class="header">
<ul class="nav">
<li><a href="index.php">首页</a></li>
<?php foreach ($navs as $key=>$nav){ ?>
<li><a href="<?php echo $key.'.php'; ?> "><?php echo $nav; ?></a></li>
<?php } ?>
</ul>
</div>
```
* `footer.php`: 公共底部
```php
<!--底部版权-->
<div class="footer">
<p class="copyright"><?php echo $copyright; ?> © 版权所有</p>
</div>
</body>
</html>
```
* `index.php`: 首页
```php
# 魔术常量
<?php require __DIR__ . '/inc/header.php'; ?>
<h2><?php echo $navs['gc']; ?></h2>
<ol>
<?php foreach ($movies[0] as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<h2><?php echo $navs['om']; ?></h2>
<ol>
<?php foreach ($movies[1] as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<h2><?php echo $navs['rh']; ?></h2>
<ol>
<?php foreach ($movies[2] as $movie){ ?>
<li><a href=""><?php echo $movie; ?></a></li>
<?php } ?>
</ol>
<?php require __DIR__ . '/inc/footer.php'; ?>
```
* `gc.php`: [栏目页] 国产原创
```php
<?php require __DIR__ . '/inc/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__ . '/inc/footer.php'; ?>
```
* `om.php`: [栏目页] 欧美猛片
```php
<?php require __DIR__ . '/inc/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__ . '/inc/footer.php'; ?>
```
* `rh.php`: [栏目页] 日韩推荐
```php
<?php require __DIR__ . '/inc/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__ . '/inc/footer.php'; ?>
```
## :-: 制作公共模板
### 1、什么是模板
* **模板**是用来展示动态数据的载体
* 在实际项目中, 许多页面的结构是完全相同的,只是数据不同
* 对于这些页面, 可以创建一个模板, 在调用时填充上对应数据即可
* 通过模板技术, 可以极大的简化Web开发工作
* PHP天生就是一个模板语言,非常适合创建这种动态页面
### 2、创建模板数据
* 实际项目中, 模板中的数据应该来自数据库
* 数据表查询结果,大多是一个二维数组
* 所以, 我们先用二维数组来模拟数据表中的数据
* 这些动态数据需要在多个页面中调用,所以放在公共文件中
* 这里选择直接创建在`inc/header.php`中
```php
<?php
// 影视剧数组
$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>
```
### 3、创建首页
* `index.php`: 首页入口
* 做为入口文件,必须具备二个基本功能
* 显示出整个项目的基本内容
* 创建到达其它页面的链接入口
```php
<?php
// 加载公共头部
include __DIR__ . "/inc/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__ . '/inc/footer.php';
```
### 4、列表模板
* `list.php`: 栏目页模板
* 做为栏目页,只需要将`index.php`改动二处即可
* 使用GET方式接收`index.php`传过来的栏目id
* 将外层循环中的栏目名称显示语句放到内层循环中
```php
<?php
// 加载公共头部
include __DIR__ . '/inc/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__ . '/inc/footer.php';
```
### 5、内容页模板
* `detail.php`: 详情页模板
* 做为详情页, 只需要将`list.php`改动三处即可
* GET参数接收的影视剧的id
* 去掉外层循环, 不需要遍历栏目
* 添加一些自定义样式,显示影视剧详情内容
```php
<?php
// 加载公共头部
include __DIR__ . '/inc/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="/images/'.$movie['image'].'" alt="" width="300">';
echo "<p style='text-indent: 2em'>{$movie['detail']}</p>";
}
};
// 加载公共底部
include __DIR__ . '/inc/footer.php';
```
- 序言
- PHP基础
- 认识PHP
- 环境安装
- PHP语法
- 流程控制
- PHP数组
- PHP函数
- PHP类与对象
- PHP命名空间
- PHP7新特性
- PHP方法库
- PHP交互
- 前后端交互
- 项目常规开发流程
- MySQL数据库
- 会话控制
- Ajax分页技术
- 细说函数
- 类与对象
- 对象进阶
- 类与对象进阶
- OOP面向对象
- 设计模式
- 路由与模板引擎
- 异常类
- PHP爬虫
- PHP抓取函数
- PHP匹配函数
- 正则表达式
- PHP字符串函数
- 抓取实战
- PHP接口
- 了解接口
- PHP插件
- PHPSpreadsheet
- ThinkPHP6
- 安装
- 架构
- 数据库
- 数据库操作
- 视图
- 模版
- 模型
- 杂项
- 命令行
- 交互
- 微信小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- 百度小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- Linux
- 服务器上线流程
- 安装svn
- MySQL
- 认识MySQL
- MySQL函数
- 杂项
- composer依赖管理工具