PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

0112页面网站模块化,数据封装与调试。

曾
原创
2020年02月06日 11:36:49 901浏览

站点模块化方法

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

站点模块化实例

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="demo.css">
  6. <link rel="stylesheet" href="static/font/iconfont.css">
  7. <title>整体效果</title>
  8. </head>
  9. <body>
  10. <!--头部组件-->
  11. <div class="public-header">
  12. <a href="">网站首页</a>
  13. <a href="">专题</a>
  14. <a href="">网站导航</a>
  15. <a href="">二手商品</a>
  16. <a href="">讨论区</a>
  17. <span>
  18. <a href=""><i class="iconfont icon-huiyuan"></i>登录</a>
  19. <a href="">免费注册</a>
  20. </span>
  21. </div>

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


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



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


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

数据的导入

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

  1. <!-- 导入配置文件 -->
  2. <?php include 'config.php'?>
  3. <!-- 公共标题 -->
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <link rel="stylesheet" href="demo.css">
  9. <link rel="stylesheet" href="static/font/iconfont.css">
  10. <title>整体效果</title>
  11. </head>
  12. <body>
  13. <!--头部组件-->
  14. <div class="public-header">
  15. <!-- 这里更改了HTML文件,使用PHP的循环遍历语法,来输出代码 -->
  16. <?php foreach($navs as $nav):?>
  17. <a href="<?=$nav['url']?>"><?=$nav['name']?></a>
  18. <?php endforeach;?>
  19. <span>
  20. <?php foreach($register as $item):?>
  21. <a href="<?=$item['url']?>"><?=$item['name']?></a>
  22. <?php endforeach;?>
  23. </span>
  24. </div>

原始的HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="demo.css">
  6. <link rel="stylesheet" href="static/font/iconfont.css">
  7. <title>整体效果</title>
  8. </head>
  9. <body>
  10. <!--头部组件-->
  11. <div class="public-header">
  12. <a href="">网站首页</a>
  13. <a href="">专题</a>
  14. <a href="">网站导航</a>
  15. <a href="">二手商品</a>
  16. <a href="">讨论区</a>
  17. <span>
  18. <a href="">登录</a>
  19. <a href="">免费注册</a>
  20. </span>
  21. </div>

最终输出的效果是一样的

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

  1. <?php
  2. //把随机显示商品封装在函数里面
  3. function getrandomDisplay($portraits,$num){
  4. //array_rand函数,获取数组的随机键名(它只能获取键名)
  5. //把值赋给$random变量,虽然通过print_r打印出来只能看到键名,它只能拿到二维数组的第一层数组的键名,通过想象可以把它展开,每一个键名,就是一个关联数组
  6. //简单点说,就是使用array_rand来获取$portraits里面随机的数组。
  7. $random = array_rand($portraits,$num);
  8. //然后遍历它获取里面关联数组的信息。
  9. foreach($random as $key){
  10. //每一次遍历就是一个关联数组,把每次遍历结果赋值给前面的变量
  11. $randomDisplay[] = ($portraits[$key]);
  12. }
  13. return $randomDisplay;
  14. }
  15. //下面两行代码是调试用,如果输出正确,就注释掉就行了,
  16. //print_r($randomDisplay);
  17. //die表示执行到这里就终止程序,后面所有代码都不执行了
  18. //die;
  19. $randomDisplay = getrandomDisplay($portraits,8);
  20. ?>
  21. <div class="exhibition">
  22. <!-- 交易内容左边-->
  23. <div class="exhibition-lt">
  24. <?php foreach($randomDisplay as $item):?>
  25. <div class="exhibition-lt-shop">
  26. <a href="<?=$item['url']?>"><img src="<?=$item['pic']?>" alt="" width="178" height="122"></a>
  27. <span><?=$item['details']?></span>
  28. <div>
  29. <spa>¥333</spa>
  30. <span>美女</span>
  31. </div>
  32. </div>
  33. <?php endforeach;?>
  34. </div>
  35. <!-- 交易内容右边-->
  36. <div class="exhibition-rt">
  37. <?php foreach($links as $link):?>
  38. <a href="<?=$link['url']?>"><img src="<?=$link['pic']?>" alt="" width="190" height="130"></a>
  39. <?php endforeach;?>
  40. <div class="exhibition-rt-ad2">
  41. <a href=""><img src="static/images/ad/image.png" alt=""width="393" height="60"></a>
  42. <a href=""><img src="static/images/ad/ad2.jpg" alt="" width="393" height="60"></a>
  43. </div>
  44. </div>
  45. </div>

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

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



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

  1. <?php
  2. $cid = $_GET['cid'];
  3. // 遍历数组
  4. foreach($hotclassifes as $value){
  5. // intval函数,强制将字符串转为数值型
  6. //查看遍历过后的数组里面的值ID时候等于获取到的CID
  7. if($value['id'] === intval($cid)){
  8. //如果条件成立就获取到栏目名字
  9. $hotclassname = $value['name'];
  10. }
  11. }
  12. //首相遍历商品数组
  13. foreach($portraits as $portrait){
  14. //条件判断,通过商品数组里面的CID元素,与服务器获取到的CID值进行判断
  15. if($portrait['cid'] === intval($cid)){
  16. //条件成立,创建一个空数组,把符合条件的元素(数组)输出
  17. $currentgoods[] = $portrait;
  18. }
  19. }
  20. //调试打印得到的数组,查看能否正常输出,输出的内容是否符合
  21. print_r($currentgoods);
  22. //终止后面的程序,方便查看
  23. die;
  24. //下面是把获得的数据放入HTML代码中
  25. //首先遍历获取到的数组
  26. <?php foreach ($currentgoods as $currentgood) : ?>
  27. <div class="exhibition-lt-shop">
  28. //把数组放入HTML代码中
  29. <a href="<?= $currentgood['url'] ?>"><img src="<?= $currentgood['pic'] ?>" alt="" width="178" height="122"></a>
  30. <span><?= $currentgood['details'] ?></span>
  31. <div>
  32. <spa>¥333</spa>
  33. <span>美女</span>
  34. </div>
  35. </div>
  36. <?php endforeach; ?>
  37. ?>

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

效果图

单个点击(点击过后就会出现单个商品的介绍,我懒没写具体的- -)

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议