php生成静态页面并实现预览功能


Posted in PHP onJune 27, 2019

一、前言

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

二、正文

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

参考:php输出控制函数和输出函数生成静态页面

这种写法个人感觉会稍微乱一点,而且如果页面复杂的话,写出来的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=" " rel="external nofollow" >
</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[i] + "?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加载完成后你需要进行的操作
 
 };
 }
}

最终效果:

php生成静态页面并实现预览功能

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

希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
修改Zend引擎实现PHP源码加密的原理及实践
Apr 14 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
Nov 25 PHP
php开发中的页面跳转方法总结
Apr 26 PHP
php根据日期或时间戳获取星座信息和生肖等信息
Oct 20 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
Dec 21 PHP
微信支付开发告警通知实例
Jul 12 PHP
php版银联支付接口开发简明教程
Oct 14 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
Dec 19 PHP
PHP中trait使用方法详细介绍
May 21 PHP
Django 中 cookie的使用
Aug 17 PHP
PHP实现一个限制实例化次数的类示例
Sep 16 PHP
php封装实现钉钉机器人报警接口的示例代码
Aug 08 PHP
PHP创建对象的六种方式实例总结
Jun 27 #PHP
PHP实现的抓取小说网站内容功能示例
Jun 27 #PHP
不常用但很实用的PHP预定义变量分析
Jun 25 #PHP
PHP中define() 与 const定义常量的区别详解
Jun 25 #PHP
php字符串截取函数mb_substr用法实例分析
Jun 25 #PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
Jun 25 #PHP
Laravel向公共模板赋值方法总结
Jun 25 #PHP
You might like
深入apache host的配置详解
2013/06/09 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php网页病毒清除类
2014/12/08 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
Python写的一个简单监控系统
2015/06/19 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
python实现斗地主分牌洗牌
2020/06/22 Python
对python中list的五种查找方法说明
2020/07/13 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
初中物理教学反思
2014/01/14 职场文书
2015年医院工作总结范文
2015/04/09 职场文书