原理与示例：php+mysql+jquery生成静态网页（含后台编辑功能）

从Web的工作原理来看，用户访问HTML所带来的服务器负载要远小于访问动态页面，因为在前者中，服务器只用把对应的html代码发送给客户端即可，而在后者中，服务器则需要根据访问条件进行一系列的计算，然后生成html代码，最后把运算结果代码发送给客户端。 所以，对于访问量较大的宣传式网站（比如新闻类），要尽可能地使用静态页面。

另一方面，我们不可能让网站编辑人员来一个一个地手工制作这些HTML，那样就是回到多年前的纯静态时代了。我们可以用动态语言来方便、快捷地生成这些静态网页。而且，目前这一技术已经十分成熟。本文仅以最简单的原理和案例着手，试图讲明白大致的方法和流程，不关心具体的细节（比如文本编辑器）。

原理步骤：

1、制作一个内容为空的html页面，作为模板。

2、当网站编辑人员通过后台添加一条记录时，将其内容添加到模板文件的相应的位置上，然后将其保存为特定位置的html文件

3、在数据库中记录下该文件的信息

4、在前台，读取数据库中的记录并显示

5、后台编辑，本质上是对html文件的增、删、改，顺带对数据库中的记录也进行如上操作。

目录结构：

数据库设计：

create database cms_php_html;

use cms_php_html;

CREATE TABLE IF NOT EXISTS `newslist` (

`nID` int(11) NOT NULL AUTO_INCREMENT,

`nTitle` varchar(50) COLLATE utf8_bin NOT NULL,

`nURL` varchar(100) COLLATE utf8_bin NOT NULL,

PRIMARY KEY (`nID`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 ;

代码：

1、前台首页： index.html

															
					
		admin	

2、前台查询数据库页面：admin/query.php

3、后台编辑首页：admin/admin_index.html

																			前台查看		
			
				
					
						
添加
						
标题：
						
内容：
						
							  													
											
				
				
					
						
修改
						
文件：
						
标题：
						
内容：
						
														  														  													
											
				
			
			
				
					News List									
			
		
	

4、与新增记录、修改记录有关的js：js/new.js

$(function() {	//首先在表格正文列出已有记录	$.ajax({		type:"get",		url:"../admin/query.php",		dataType:"json",		success:function(data){			$("#newsList").html("");			$.each(data, function(index,row) { 					$("#newsList").append("
"+row['nTitle']+"
");									});				$("#newsList li").each(function(){				$(this).bind('click',{url:$(this).attr('title')},readNews)							})		}	});	//清空新增记录的文本框	$("#newClear").click(function(){		newTitle=$("#newTitle").val("")		newContent=$("#newContent").val("");			})	//清空修改记录的文本框	$("#editClear").click(function(){		newTitle=$("#oldTitle").val("")		newContent=$("#oldContent").val("");		$("#pageFile").html("")	})	//提交新增记录内容	$("#newSubmit").click(function(){		if($("#newTitle").val()!="" && $("#newContent").val()!="")		{			$("#newSubmit").val('添加中..');			$("#newSubmit").attr("disabled","disabled");			newTitle=$("#newTitle").val()			newContent=$("#newContent").val();			$.ajax({				type:"post",				url:"../admin/new.php",				data:{txtTitle:newTitle,txtContent:newContent},				dataType:'html',				success:function(data){					alert(data);					$("#newSubmit").removeAttr("disabled");					$("#newSubmit").val('添加');											$.ajax({					type:"get",					url:"../admin/query.php",					dataType:"json",					success:function(data){ //新增成功后刷新下方已有记录列表						$("#newsList").html("");						$.each(data, function(index,row) { 										$("#newsList").append("
"+row['nTitle']+"  
");																	});						$("#newsList li").each(function(){								$(this).bind('click',{url:$(this).attr('title')},readNews)												})						}					});				}			});		}			})})//点击记录列表中任一条，会在修改区域的文本框中显示该记录的原有内容function readNews(evt){//	alert(evt.data.url);	$.ajax({		type:"get",		url:"../admin/read.php",		dataType:'json',		data:{htmlUrl:evt.data.url},		success:function(data){//			alert('returned')			$("#oldTitle").val(data[0]);			$("#oldContent").val(data[1])			$("#pageFile").html(evt.data.url)		}	});}

5、与修改记录有关的js：js/saveEdit.js

$(function(){	$("#oldSubmit").click(function(){		if($("#pageFile").text()!="" && $("#oldTitle").val()!="" && $("#oldContent").val()!="")		{			$("#oldSubmit").val('修改中...');			fileURL=$("#pageFile").html();			$("#oldSubmit").attr("disabled","disabled");			newTitle=$("#oldTitle").val()			newContent=$("#oldContent").val();			$.ajax({				type:"post",				url:"../admin/saveEdit.php",				data:{url:fileURL,title:newTitle,content:newContent},				dataType:'html',				success:function(data){					$("#oldSubmit").removeAttr("disabled");					$("#oldSubmit").val('修改');						alert(data);										$.ajax({						type:"get",						url:"../admin/query.php",						dataType:"json",						success:function(data){							$("#newsList").html("");							$.each(data, function(index,row) { 											$("#newsList").append("
"+row['nTitle']+"  
");																		});							$("#newsList li").each(function(){									$(this).bind('click',{url:$(this).attr('title')},readNews)														})							}					});				}			});		}	})})function readNews(evt){//	alert(evt.data.url);	$.ajax({		type:"get",		url:"../admin/read.php",		dataType:'json',		data:{htmlUrl:evt.data.url},		success:function(data){//			alert('returned')			$("#oldTitle").val(data[0]);			$("#oldContent").val(data[1])			$("#pageFile").html(evt.data.url)		}	});}

6、与删除记录有关的js：js/delete.js

$(function(){	$("#oldDelete").click(function(){		if(window.confirm('确定删除？')==true)		{			currentURL=$("#pageFile").text();			$.ajax({				type:"post",				url:"../admin/delete.php",				data:{curl:currentURL},				dataType:'html',				success:function(data){					alert(data);					$.ajax({						type:"get",						url:"../admin/query.php",						dataType:"json",						success:function(data){							$("#newsList").html("");							$.each(data, function(index,row) { 									$("#newsList").append("
"+row['nTitle']+"
");													});								$("#newsList li").each(function(){								$(this).bind('click',{url:$(this).attr('title')},readNews)															})						}					});				}			});		}	})})

7、新增记录的php实现代码：admin/new.php

8、修改现有记录的php实现代码：admin/saveEdit.php

(.*?)#s", "", $oldContent);$newContent=preg_replace("#(.*?)#s", "".$content."", $newContent);preg_match("#http://localhost/phpToHtml/(.*?).html#s", $url,$m);$fwrite=fopen("../".$m[1].".html","w");fwrite($fwrite,$newContent); mysql_connect("localhost","root","root");mysql_query("set names utf8");mysql_select_db("cms_php_html");mysql_query("update newsList set nTitle='".$title."' where nURL='".$url."'");echo("ok");?>

9、读取已有的某条记录的php实现代码：admin/read.php

(.*?)#s",$fcontents,$titleMatches);preg_match("#(.*?)#s",$fcontents,$contentMatches);$row[0]=$titleMatches[1];$row[1]=$contentMatches[1];echo(json_encode($row));?>

10、删除某条记录的php实现代码：admin/delete.php

11、模板文件：template/t1.html

									返回列表页		{CONTENT}	

结果：

前台：

前台打开链接后：

后台首页：

添加记录：

添加后：

修改记录：

删除记录：

删除后的列表：