php预览并生成静态页面

作者:课课家教育更新于： 2019-06-28 10:24:46

　　一、正文

　　1、什么是静态化

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

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

　　二、前言

　　最近要找房子搬家，作为一名青漂，每年换房子都要成为习惯了，不过还好，偌大的城市还能容得下身体和灵魂。

　　这篇文章主要是记录一下php生成静态页面的大致步骤，关于页面静态化，大家想必都听说过，但是真正用的时候反而不是很多。有些页面考虑到访问量比较大，页面结构又不常改动的，比如新闻公告等，可以考虑做成静态页面放在服务器上，这样第一是能抗住大流量的访问，第二也是更加安全一些，打开速度上有保证。

　　2、静态化写法

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

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

　　//打开输出控制缓存

　　ob_start();

　　echo "Hello world";

　　//获取缓冲区的内容

　　$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";

　　这种写法个人感觉会稍微乱一点，而且如果页面复杂的话，写出来的php+html代码会有些杂乱，所以博主选用的是第二种方法。

　　(2)提前写好模板页，然后进行替换

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

　　模板页：

　　{title}

　　{author}

　　{show_time}

　　{content}

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

　　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打开窗口

　　静态页：

　　//这是我们要打开的窗口，先隐藏

　　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写入到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加载完成后你需要进行的操作

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

　　哈哈。费话说了那么多，终于到了该讲的地方了。其实，这一原理并不复杂，综合地来讲的话，应该是PHP中一个替换数据语法的应用。OK，讲一个简单范例吧，一步一步地分析!相信聪明的你能看得明白的咯，仔细看好每一步即可，在这里，只是引导大家如何做而已，具体的可以实践一下!