1月10日学号：478291 PHP使用数组实现动态网页

静态页面的内容都是固定写死的，响应速度快，但可维护性和交互性差，一旦数据有所变动，需要对文件进行修改；动态网页在静态网页的基础上，将事先保存好的数据通过调用显示在页面上，当数据有变动时无需修改页面，只需要在保存数据的地方进行数据的修改即可，提高了可维护性和交互性，但响应速度会相对慢一些。如果网页内容相对的简单，不需要频繁的进行改动，或者只是为了展示信息等，就用静态网页，简单易操作，不需要管理数据库等；如果网页内容相对复杂，功能多，改动频繁，实时性的内容多，就用动态网页

使用数组实现简单的动态网页

定义保存页面数据

<?php
//导航条数据
$nav=[
    ['id'=>1,'name'=>'首页','url'=>'index.php'],
    ['id'=>2,'name'=>'最新课程','url'=>'list.php?cid=0'],
    ['id'=>3,'name'=>'JAVA','url'=>'list.php?cid=1'],
    ['id'=>4,'name'=>'PHP','url'=>'list.php?cid=2'],
];
//课程分类
$classify=[
    ['id'=>0,'name'=>'最新课程'],
    ['id'=>1,'name'=>'JAVA'],
    ['id'=>2,'name'=>'PHP'],
];
//具体课程
$curriculums=[
    ['id'=>1,'name'=>'Java构架师课程','detail'=>'千万级电商项目从0到1到100全过程，涵盖Java程序员不同成长阶段的问题及优选解决方案','image'=>'image/1.png','cid'=>1],
    ['id'=>2,'name'=>'Java项目面试实操','detail'=>'基础笔面试靠刷题，项目面试靠经验和交流','image'=>'image/2.png','cid'=>1],
    ['id'=>3,'name'=>'Spark + ElasticSearch','detail'=>'构建电商用户标签系统实现精准营销','image'=>'image/3.png','cid'=>1],
    ['id'=>4,'name'=>'玩转Java并发工具','detail'=>'线程池+各种锁+并发综合实战项目','image'=>'image/4.jpg','cid'=>1],
    ['id'=>5,'name'=>'SpringBoot源码课','detail'=>'Java开发必会、行业风向标级框架，BAT架构师带你一课攻克SpringBoot源码','image'=>'image/5.jpg','cid'=>1],
    ['id'=>6,'name'=>'新版Kotlin从入门到精通','detail'=>'紧跟一线企业标准 抓住Kotlin语言上升期的发展红利','image'=>'image/6.png','cid'=>1],
    ['id'=>7,'name'=>'实战支付+电商双系统','detail'=>'玩“赚” Java技术栈','image'=>'image/7.jpg','cid'=>1],
    ['id'=>8,'name'=>'深度解锁SpringCloud主流组件','detail'=>'“超硬核” SpringCloud主流组件技术点解剖，“超智囊”微服务开发难题化解','image'=>'image/8.jpg','cid'=>1],
    ['id'=>9,'name'=>'TP6.0从0到1完整构建高并发电商服务系统','detail'=>'从基础到高并发到分布式讲解TP6.0，一战攻克电商开发初中高级技术点，学以致用','image'=>'image/9.jpg','cid'=>2],
    ['id'=>10,'name'=>'Tp5&Tp6底层源码','detail'=>'掌握Tp5+Tp6双版本内容 解析框架底层机制 提升核心竞争力','image'=>'image/10.jpg','cid'=>2],
    ['id'=>11,'name'=>'全方位深度剖析PHP7底层源码','detail'=>'由浅入深 让你彻底掌握PHP7源码设计','image'=>'image/11.jpg','cid'=>2],
    ['id'=>12,'name'=>'Swoole入门到实战','detail'=>'异步场景全面剖析 / 网络通讯引擎系统精讲 / 感受并发编程之美','image'=>'image/12.jpg','cid'=>2],
    ['id'=>13,'name'=>'PHP秒杀系统','detail'=>'从万次到亿万次的性能优化，从单机到分布式的架构升级','image'=>'image/13.jpg','cid'=>2],
    ['id'=>14,'name'=>'PHP开发高可用高安全App后端','detail'=>'让你拥有一套完美对接多终端客户端的App后端系统','image'=>'image/14.jpg','cid'=>2],
    ['id'=>15,'name'=>'360大牛：全面解读PHP面试','detail'=>'有了这样全面的PHP面试课程，谁还敢说PHP不好找工作！','image'=>'image/15.jpg','cid'=>2],
    ['id'=>16,'name'=>'微信服务号+Yii2.0构建商城系统全栈应用 ','detail'=>'微信服务号高级权限/一线互联网架构思想/完善电商支付系统','image'=>'image/16.jpg','cid'=>2],
];

公共函数

<?php
//获取课程列表
function get_curriculums_list($cid=0,$curriculums){
    $curriculums_list=[];
    if(!$cid){
        //最新课程随机获取8门课程数据
        $id_list=array_rand($curriculums,8);
        foreach($id_list as $item){
            $curriculums_list[]=$curriculums[$item];
        }
    }else{
        foreach ($curriculums as $item){
            if($item['cid']===$cid){
                $curriculums_list[]=$item;
            }
        }
    }
    return $curriculums_list;
}
//生成课程价格
function get_price(){
    $price=number_format(rand(1,1000),2,'.',',');
    return $price;
}
//生成浏览人数
function get_people_num(){
    $people_num=rand(1,1000);
    return $people_num;
}

首页

<?php include 'public_function.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<?php include 'public_header.php'; ?>
<div class="main">
    <!-- 轮播图 -->
    <div class="banner">
        <img src="image/index_banner7.jpg" alt="这是轮播图">
    </div>
    <!-- 轮播图 end -->
    <!-- 课程列表 -->
    <?php foreach($classify as $item):?>
    <?php if($item['id'] % 2 == 0): ?>
    <div class="white">
    <?php else: ?>
    <div>
    <?php endif; ?>
        <div class="curriculums-list ">
            <!-- 课程分类标题 -->
            <div class="title"><?php echo $item['name'] ?></div>
            <!-- 课程分类列表 -->
            <div>
            <?php foreach (get_curriculums_list($item['id'],$curriculums) as $value): ?>
            <a class="item" href="detail.php?id=<?php echo $value['id'] ?>">
                <!-- 课程图片 -->
                <img src="<?php echo $value['image'] ?>" alt="">
                <!-- 课程名称 -->
                <span class="name"><?php echo $value['name'] ?></span>
                <!-- 课程价格、浏览人数 -->
                <div>
                    <span><i class="iconfont icon-huiyuan2"></i><?php echo get_people_num(); ?></span>
                    <span>￥<?php echo get_price(); ?></span>
                </div>
                <!-- 课程简介 -->
                <span class="detail"><?php echo $value['detail'] ?></span>
            </a>
            <?php endforeach; ?>
            </div>
            <!-- 课程分类列表 end -->
        </div>
    </div>
    <?php endforeach; ?>
    <!-- 课程列表 end -->
</div>
<?php include 'public_footer.php'; ?>
</body>
</html>

/*轮播图*/
.banner{
    width: 1200px;
    border-radius: 10px;
    box-shadow: 0 12px 24px 0 rgba(7,17,2);
    margin: 20px auto;
}
.banner > img{
    width: 1200px;
    border-radius: 10px;
}
/*轮播图 end*/
/*课程列表*/
/*白色背景*/
.white{
    background-color: #fff;
}
.main > div > .curriculums-list{
    width:1200px;
    display: flex;
    flex-flow: column wrap;
    margin: auto;
}
/*课程分类标题*/
.main > div > .curriculums-list > .title{
    font-size: 24px;
    color: #1C1F21;
    letter-spacing: 0px;
    line-height: 32px;
    margin: 10px 0;
}
.main > div > .curriculums-list > div:last-child{
    display: grid;
    grid-template-columns: 24% 24% 24% 24%;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: hidden;
    padding-bottom: 10px;
}
.main > div > .curriculums-list > div:last-child > .item{
    border-radius: 10px;
    padding: 10px;
        box-sizing: border-box;
}
.main > div > .curriculums-list > div:last-child > .item:hover{
    box-shadow: 0 10px 10px 0 #ccc;
}
/*课程图片*/
.main > div > .curriculums-list > div:last-child > .item > img{
    width:100%;
    border-radius: 10px;
}
/*课程名称*/
.main > div > .curriculums-list > div:last-child > .item > .name{
    font-size: 16px;
    color: #07111b;
    line-height: 24px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    transition: all .3s;
    font-weight: 700;
    height: 46px;
}
/*课程价格、浏览人数*/
.main > div > .curriculums-list > div:last-child > .item > div{
    display: flex;
    justify-content: space-between;
}
.main > div > .curriculums-list > div:last-child > .item > div >span{
    font-size: 12px;
    color: #93999f;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 400;
}
.main > div > .curriculums-list > div:last-child > .item > div >span > i{
    font-size: 12px;
    color: #93999f;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 400;
}
/*课程简介*/
.main > div > .curriculums-list > div:last-child > .item > .detail{
    font-size: 12px;
    font-weight: 300;
    color: #9199a1;
    line-height: 18px;
    margin-top: 4px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 36px;
}
/*课程列表 end*/

列表页

<?php include 'public_function.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<?php include 'public_header.php'; ?>
<?php
$cid = $_GET['cid'];
foreach($classify as $value){
    if($value['id']==$cid){
        $item=$value;
        break;
    }
}
?>
<div class="main">
    <!-- 课程列表 -->
    <div>
        <div class="curriculums-list ">
            <!-- 课程分类标题 -->
            <div class="title"><?php echo $item['name'] ?></div>
            <!-- 课程分类列表 -->
            <div>
            <?php foreach (get_curriculums_list($item['id'],$curriculums) as $value): ?>
            <a class="item" href="detail.php?id=<?php echo $value['id'] ?>">
                <!-- 课程图片 -->
                <img src="<?php echo $value['image'] ?>" alt="">
                <!-- 课程名称 -->
                <span class="name"><?php echo $value['name'] ?></span>
                <!-- 课程价格、浏览人数 -->
                <div>
                    <span><i class="iconfont icon-huiyuan2"></i><?php echo get_people_num(); ?></span>
                    <span>￥<?php echo get_price(); ?></span>
                </div>
                <!-- 课程简介 -->
                <span class="detail"><?php echo $value['detail'] ?></span>
            </a>
            <?php endforeach; ?>
            </div>
            <!-- 课程分类列表 end -->
        </div>
    </div>
    <!-- 课程列表 end -->
</div>
<?php include 'public_footer.php'; ?>
</body>
</html>

详细信息页

<?php include 'public_function.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>
<?php include 'public_header.php'; ?>
<?php
$id = $_GET['id'];
$info = [];
foreach($curriculums as $item){
    if($item['id']==$id){
        $info=$item;
    }
}
?>
<div class="main">
    <div class="left">
        <img src="<?php echo $info['image']; ?>" alt="">
    </div>
    <div class="right">
        <h1><?php echo $info['name']; ?></h1>
        <span><?php echo $info['detail']; ?></span>
        <div>
            <span><i class="iconfont icon-huiyuan2"></i><?php echo get_people_num(); ?>播放 | </span>
            <span>￥<?php echo get_price(); ?></span>
        </div>
        <div>
            <button>开始学习</button>
        </div>
    </div>
</div>
<?php include 'public_footer.php'; ?>
</body>
</html>

.main{
    width:1200px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 30% 1fr;
}
.main > .right{
    display: flex;
    flex-flow: column wrap;
    padding: 10px 20px;
}
.main > .right > h1{
    font-weight: normal;
}
.main > .right > span{
    color: #6f6f6f;
    letter-spacing: 1px;
    height: 75px;
    overflow: hidden;
}
.main > .right > div > span{
    font-size: 12px;
    color: #93999f;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 400;
}
.main > .right > div:first-child > span > i{
    font-size: 12px;
    color: #93999f;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 400;
    margin-right: 5px;
}
.main > .right > div:last-child >button:first-child{
    width:140px;
    height:30px;
    background-color: #ff5500;
    color: #fff;
    border: none;
    margin: 10px 0;
}

所用知识点

流程控制替代语法

（1）if单分支替代语法：

<?php if(表达式):?>
    HTML代码
<?php endif;>

（2）if双分支替代语法：

<?php if(表达式):?>
    HTML代码
<?php else: ?>
    HTML代码 
<?php endif;>

（3）if多分支替代语法：

<?php if(表达式):?>
    HTML代码
<?php elseif(表达式):?>
    HTML代码
<?php else: ?>
    HTML代码 
<?php endif;>

（4）for替代语法：

<?php for(初始化循环计数器;循环判断条件;更新循环计数器):?>
    HTML代码 
<?php endfor;>

（5）foreach替代语法：

<?php foreach(数组 as 变量):?>
    HTML代码 
<?php endforeach;>

（6）while替代语法：

<?php while(表达式):?>
    HTML代码 
<?php endwhile;>

（7）switch替代语法：

<?php switch(变量): case 值1:?>
    HTML代码 
<?php break; ?>
<?php case 值2:?>
    HTML代码 
<?php break; ?>
<?php endswitch;>

包含文件

（1）include | include_once：包含一个外部文件到页面，失败时不会终止程序，加上once仅能包含一次，防止重复加载包含

（2）require |require_once：包含一个外部文件到页面，失败时会终止程序，加上once仅能包含一次，防止重复加载包含

1月10日 学号：478291 PHP使用数组实现动态网页

使用数组实现简单的动态网页

所用知识点

相关文章