0112页面网站模块化，数据封装与调试。 - 学习流程

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 0112页面网站模块化，数据封装与调试。

博主信息

博文 30

粉丝 0

访问量 30351

专题推荐

更多>

站点模块化方法

把HTML代码分成多个模块（文件），再导入进去（类似把CSS代码分开写，再导入到一个CSS里面完成整体效果）
使用include:
导入一个外部文件到当前页面，如果失败，不会终止当前程序。
使用require:
导入一个外部文件到当前页面，如果失败，会终止当前程序。
对于引用不是致命错误的一般使用include命令来执行。

站点模块化实例

今天的作业使用的是以前学习的时候写的一个小型的交易网站
图片大概是这样的

思路大概是这样的，首先要分析一下页面上那些内容是共用的，然后把共用的部分划分出来
1.我觉得头部导航条和下面评论交流区是共用的，就把它们单独划分出来，放在两个文件里。
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="static/font/iconfont.css">
    <title>整体效果</title>
</head>
<body>
<!--头部组件-->
<div class="public-header">
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">讨论区</a>
    <span>
            <a href=""><i class="iconfont icon-huiyuan"></i>登录</a>
            <a href="">免费注册</a>
    </span>
</div>

我把认为可以共用的头部，剥离出来放在另外一个独立文件里，在其他页面需要用到的时候使用include命令来引用。
例

同理，底部代码剥离后也是一样的操作来引用，需要注意的是，源代码剥离的时候是在什么位置，引用的时候所用的PHP代码就要在同一个位置，不然会显示错误
例

以上模块化的大概操作方法，具体的HTML代码就不贴了，应该都会写。
然后建一个文件来存放数据
存放的数据就是HTML代码里面的所有可替代的文字，图片，链接等
图

大概就是以上图片的一些数据，都使用数组保存，然后每个数组都写一个备注，因为新手到后面都容易忘记自己写的数组到底是啥= =###。

数据的导入

数据写好以后，就是改写HTML代码使用PHP语句，把数据导入进去
比如我要把头部导航标签的HTML代码改写一下用PHP导入。
首先要在装有头部HTML代码的文件里面引入写好的数据文件。
例

<!-- 导入配置文件 -->
<?php include 'config.php'?>
<!-- 公共标题 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="static/font/iconfont.css">
    <title>整体效果</title>
</head>
<body>
<!--头部组件-->
<div class="public-header">
<!-- 这里更改了HTML文件，使用PHP的循环遍历语法，来输出代码 -->
<?php foreach($navs as $nav):?>
    <a href="<?=$nav['url']?>"><?=$nav['name']?></a>
<?php endforeach;?>
    <span>
        <?php foreach($register as $item):?>
            <a href="<?=$item['url']?>"><?=$item['name']?></a>
        <?php endforeach;?>
    </span>
</div>

原始的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="static/font/iconfont.css">
    <title>整体效果</title>
</head>
<body>
<!--头部组件-->
<div class="public-header">
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">讨论区</a>
    <span>
            <a href="">登录</a>
            <a href="">免费注册</a>
    </span>
</div>

最终输出的效果是一样的

然后就是主体交易区内容的填写
主要代码

<?php
//把随机显示商品封装在函数里面
function  getrandomDisplay($portraits,$num){
    //array_rand函数，获取数组的随机键名（它只能获取键名）
//把值赋给$random变量，虽然通过print_r打印出来只能看到键名，它只能拿到二维数组的第一层数组的键名，通过想象可以把它展开，每一个键名，就是一个关联数组
//简单点说，就是使用array_rand来获取$portraits里面随机的数组。
    $random = array_rand($portraits,$num);
    //然后遍历它获取里面关联数组的信息。
    foreach($random as $key){
    //每一次遍历就是一个关联数组，把每次遍历结果赋值给前面的变量
       $randomDisplay[] = ($portraits[$key]);
    }
    return $randomDisplay;
}
//下面两行代码是调试用，如果输出正确，就注释掉就行了，
//print_r($randomDisplay);
//die表示执行到这里就终止程序，后面所有代码都不执行了
//die;
$randomDisplay = getrandomDisplay($portraits,8);
?>
<div class="exhibition">
        <!--        交易内容左边-->
        <div class="exhibition-lt">
        <?php foreach($randomDisplay as $item):?>
            <div class="exhibition-lt-shop">
                <a href="<?=$item['url']?>"><img src="<?=$item['pic']?>" alt="" width="178" height="122"></a>
                <span><?=$item['details']?></span>
                <div>
                    <spa>¥333</spa>
                    <span>美女</span>
                </div>
            </div>
        <?php endforeach;?>
        </div>
        <!--        交易内容右边-->
        <div class="exhibition-rt">
            <?php foreach($links as $link):?>
            <a href="<?=$link['url']?>"><img src="<?=$link['pic']?>" alt="" width="190" height="130"></a>
            <?php endforeach;?>
            <div class="exhibition-rt-ad2">
                <a href=""><img src="static/images/ad/image.png" alt=""width="393" height="60"></a>
                <a href=""><img src="static/images/ad/ad2.jpg" alt="" width="393" height="60"></a>
            </div>
        </div>
    </div>

然后，关于分类页面，没开始学习之前，一直以为每个栏目都要单独写个页面，其实不用，通过PHP编写过后，一个页面就可以实现多个栏目的展示。
首先是要在栏目数组那里添加一个识别标签，每个栏目单独一个识别标签来好来区分栏目，与栏目里面内容。
例：首先创建一个关于栏目的数组

<?php
//栏目频道数组
$hotclassifes = [
        ['id' => 1, 'name' => '美女写真', 'url' => 'list.php?cid=1'],
        ['id' => 2, 'name' => '日本美女', 'url' => 'list.php?cid=2'],
        ['id' => 3, 'name' => '美国美女', 'url' => 'list.php?cid=3'],
        ['id' => 4, 'name' => '国内美女', 'url' => 'list.php?cid=4'],
        ['id' => 5, 'name' => 'AV美女', 'url' => 'list.php?cid=5'],
];
//商品数组
$portraits = [
    ['id' => 1,'name' => '单个介绍','pic' => STATIC_PATH.'images/shop/shop1.jpg','url' => 'details.php?cid=1',
    'details' => '美女性感写真海报墙艺术装饰画帖画图1','cid'=>1],
    ['id' => 2,'name' => '美女写真2','pic' => STATIC_PATH.'images/shop/shop3.jpg','url' => 'details.php?cid=3',
    'details' => '美女性感写真海报墙艺术装饰画帖画图3','cid'=>1],
    ['id' => 3,'name' => '美女写真','pic' => STATIC_PATH.'images/shop/shop8.jpg','url' => 'details.php?cid=8',
    'details' => '美女性感写真海报墙艺术装饰画帖画图8','cid'=>1],
    ['id' => 4,'name' => '日本美女','pic' => STATIC_PATH.'images/shop/shop9.jpg','url' => 'details.php?cid=9',
    'details' => '美女性感写真海报墙艺术装饰画帖画图1','cid'=>2],
    ['id' => 5,'name' => '日本美女','pic' => STATIC_PATH.'images/shop/shop10.jpg','url' => 'details.php?cid=10',
    'details' => '美女性感写真海报墙艺术装饰画帖画图2','cid'=>2],
    ['id' => 6,'name' => '日本美女','pic' => STATIC_PATH.'images/shop/shop11.jpg','url' => 'details.php?cid=11',
    'details' => '美女性感写真海报墙艺术装饰画帖画图3','cid'=>2],
];
?>

图

数组创建好以后，就可以直接在代码里面使用了
例

<?php
            $cid = $_GET['cid'];
            // 遍历数组
            foreach($hotclassifes as $value){
                // intval函数，强制将字符串转为数值型
                //查看遍历过后的数组里面的值ID时候等于获取到的CID
                if($value['id'] === intval($cid)){
                //如果条件成立就获取到栏目名字
                    $hotclassname = $value['name'];
                }
            }
            //首相遍历商品数组
            foreach($portraits as $portrait){
            //条件判断，通过商品数组里面的CID元素，与服务器获取到的CID值进行判断
                if($portrait['cid'] === intval($cid)){
                //条件成立，创建一个空数组，把符合条件的元素（数组）输出
                   $currentgoods[] = $portrait;
                }
            }
            //调试打印得到的数组，查看能否正常输出，输出的内容是否符合
            print_r($currentgoods);
            //终止后面的程序，方便查看
            die;
            //下面是把获得的数据放入HTML代码中
            //首先遍历获取到的数组
             <?php foreach ($currentgoods as $currentgood) : ?>
                <div class="exhibition-lt-shop">
                //把数组放入HTML代码中
                    <a href="<?= $currentgood['url'] ?>"><img src="<?= $currentgood['pic'] ?>" alt="" width="178" height="122"></a>
                    <span><?= $currentgood['details'] ?></span>
                    <div>
                        <spa>¥333</spa>
                        <span>美女</span>
                    </div>
                </div>
            <?php endforeach; ?>
            ?>

然后就是栏目里面一个小栏目的详细介绍，操作也是类似的

效果图

单个点击（点击过后就会出现单个商品的介绍，我懒没写具体的- -）

发现使用PHP代码过后，网页编写速度会快一点，只用HTML写好基础的网页结构通用部分，然后对于主体内容如果排版模式一样的话，都可以重复套用。然后还发现用了PHP后，以前认为需要写多个页面（类似商品详情页那种的），其实一个页面就可以搞定了。但是对于我这种新手来说，还是感觉有点绕脑袋，希望能在后续的学习中去进步，去适应，去发现更多好玩的东西。

批改老师：