php生成静态页面并预览【黑马PHP培训】

更新时间:2019年07月29日 15时28分34秒来源:黑马程序员论坛

1、什么是静态化

   就比如我们平时写项目的时候，大部分的页面都是会传参数进去，通过php标签把这些参数展示出来。因为我们的参数随时可以变化，所以页面上的内容也跟着参数变化，这就是动态化的页面。与之相反，静态化就是纯粹的html，页面上的内容不需要通过php或者java等编程语言来改变。

   关于静态化的优点，网上也都说的很清楚了，这边不再一一赘述，总之就是打开速度够快，能抗住大流量访问。

2、静态化写法

（1）第一种写法是通过ob_start()缓存来输出

在php文件中编写html代码，然后用bo_get_content获取到，然后输出到html文件，类似于：

<?php
//打开输出控制缓存
   ob_start();
   echo "<html><head><title>test页面</title></head><body>Hello world</body></html>";
   //获取缓冲区的内容
   $out = ob_get_contents();
   //关闭输出缓存
   ob_end_clean();
   //打开test.html文件开启写入权限
$fp = fopen("test.html", "w");
if (!$fp) {
      echo "Fail";die;
} else {
      //写入文件
      fwrite($fp, $out);
   //关闭文件
      fclose($fp);
      echo "Success";
}

参考：https://www.cnblogs.com/cxx8181602/p/9336656.html
   这种写法个人感觉会稍微乱一点，而且如果页面复杂的话，写出来的php+html代码会有些杂乱，所以博主选用的是第二种方法。

（2）提前写好模板页，然后进行替换

   先准备好静态文件，然后把要替换的部分标出来，如{title}，在php程序中用file_get_content获取html文件的内容，然后进行替换，替换之后保存为文件。

模板页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{top_title}</title>
<link rel="stylesheet" href=" ">
</head>
<body>
<div class="news-details-template">
<h1>{title}</h1>
<div class="author">{author}</div>

<div class="date">{show_time}</div>
<div class="line"></div>
<div>
   {content}
</div>
</div>
</body>
</html>

   我们先编写好模板页面，包括都有哪部分需要替换，基本的样式等，提前写好

php替换：

  $path = \Yii::getAlias('@xxx').'/views/site/notice-detail.php';
      $content = file_get_contents($path); //引入模板
      //获取要替换的值进行字符串的替换
      $content = str_replace('{top_title}',$title,$content);
      $content = str_replace('{title}',$title,$content);
.......
   $dir = $path ."/html/";
      if (!file_exists($dir)) {
         mkdir($dir);
      }
      $filename=$dir.'/'.$filename;  //这里就不判断html是否存在了，因为写入会覆盖
      $result =  file_put_contents($filename,$content);//写入内容到对应静态文件中

   大概就是先通过file_get_contents获取模板页的内容，然后通过str_replace进行标签的替换，替换完成之后，通过file_pu_contents写入到新文件即可。生成的html，我们可以生成多个html，让前端根据不同的页面去访问不同的html即可。

三、生成预览
   生成html之后，一般来说是需要预览给工作人员看看的，毕竟人家也不懂技术，不知道到底生成的是啥，哈哈

1、使用dialog打开窗口

静态页：

//这是我们要打开的窗口，先隐藏
<div id="dialog-form-record" style="display:none;">
      <div id="Content_record">

      </div>
</div>

JS定义底部按钮：

var arrButton = {
      "Release": {
         'text': '按钮名称',
         'priority': 'secondary',
         'class': 'btn btn-success',
         'id':'',
         'click':点击事件
      },
      "Cancel": {
         'text': 'Cancel',  //取消按钮
         'priority': 'secondary',
         "id":'xxx',
         'click': function () {
            dialogRecord.dialog( "close" );

         }
      }
};
//定义宽高
dialogRecord = $( "#dialog-form-record" ).dialog({
      autoOpen: false,
      height: 800,
      width: 1400,
      modal: true,
      buttons:arrButton,
      close: function() {
         $( "#Content_record" ).html("");
         dialogRecord.dialog( "close" );
      }
});

JS打开窗口：

//定义标题和窗口大小
$( "#dialog-form-record" ).dialog( "option", "title", "Preview Html" );

$( "#dialog-form-record" ).dialog({
      modal: true,
      height: 800,
      width: 1400
});

2、使用iframe引入刚才生成的静态文件

（1）js引入iframe

//加个时间戳，防止缓存
for (i in response.)
         iframe  += "<iframe class='news_iframe' id='iframe"+ i +"' src='"+ response.url.url +"/news/html/"+ response.zh + "?timestamp= " + new Date().getTime() +  "'></iframe>";

}
//把iframe写入到html

  $( "#en_content" ).html(iframe);

3、注意：

（1）iframe的src里面不能有空格之类的东西
（2）iframe去除边框
（3）iframe加载速度慢，所以加个onload事件，当iframe加载完之后再显示

  var iframe = document.getElementById("iframe" + count);
checkFinishedDownload(iframe);

function checkFinishedDownload(ifr) {
if (ifr.attachEvent) {
      ifr.attachEvent("onload", function() {
         //iframe加载完成后你需要进行的操作
      });
} else {
      ifr.onload = function() {
         //iframe加载完成后你需要进行的操作

      };
}
}
最终效果：
以上就是从生成静态页面到预览的整个流程了，博主也是第一次做静态页面相关的东西，还是挺有意思的，打卡记录一下。

end

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	软件测试培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

php生成静态页面并预览【黑马PHP培训】

相关阅读