码迷，mamicode.com
首页 > 数据库 > 详细

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

时间：2014-12-23 22:41:59      阅读：395      评论：0      收藏：0      [点我收藏+]

标签：

从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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>NewsList</title>
		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/query.js" type="text/javascript" charset="utf-8"></script>
		<script>		
			$(function(){
				$.ajax({
					type:"get",
					url:"admin/query.php",
					dataType:"json",
					success:function(data){
						$("#newsList").html();
						$.each(data, function(index,row) { 
										$("#newsList").append("<li><a href='"+ row['nURL']+"'>"+row['nTitle']+"</a></li>");
									});	
						}
				});
				
			})
		</script>
	</head>
	<body>
		<ul id="newsList">
			
		</ul>
		<div><a href="admin/admin_index.html">admin</a></div>
	</body>
</html>

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

<?php
mysql_connect("localhost","root","root");
mysql_query("set names utf8");
mysql_select_db("cms_php_html");
$myrs=mysql_query("select * from newsList order by nID");
while($row=mysql_fetch_array($myrs))
{
	$temp[]=$row;
}
echo(json_encode($temp));
?>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CMS后台</title>
		<script src="../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/new.js" ></script>
		<!--<script src="../js/query.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../js/saveEdit.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/delete.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div><a href="../index.html" target="_blank">前台查看</a></div>
		<table border="1" style="border-collapse: collapse;" align="center">
			<tr>
				<td>
					<ul>
						<li>添加</li>
						<li>标题：<input type="text" id="newTitle" name="newTitle"></li>
						<li>内容：<textarea cols="50" rows="10" id="newContent" name="newContent"></textarea></li>
						<li>
							<input type="button" id="newSubmit" name="newSubmit" value="添加">  
							<input type="button" id="newClear" name="newClear" value="清空">
						</li>						
					</ul>
				</td>
				<td>
					<ul>
						<li>修改</li>
						<li>文件：<span id="pageFile"></span></li>
						<li>标题：<input type="text" id="oldTitle" name="oldTitle"></li>
						<li>内容：<textarea cols="50" rows="10" id="oldContent" name="oldContent"></textarea></li>
						<li>
							<input type="button" id="oldSubmit" name="oldSubmit" value="修改">							  
							<input type="button" id="editClear" name="editClear" value="清空">							  
							<input type="button" id="oldDelete" name="oldDelete" value="删除本条记录">
						</li>						
					</ul>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<div>News List</div>
					<div id="newsList"></div>
				</td>
			</tr>
		</table>
	</body>
</html>

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("<li title='"+row['nURL']+"'>"+row['nTitle']+"</li>");					
				});	
			$("#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("<li title='"+row['nURL']+"'>"+row['nTitle']+"  </li>");								
									});
						$("#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("<li title='"+row['nURL']+"'>"+row['nTitle']+"  </li>");								
										});
							$("#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("<li title='"+row['nURL']+"'>"+row['nTitle']+"</li>");					
								});	
							$("#newsList li").each(function(){
								$(this).bind('click',{url:$(this).attr('title')},readNews)
								
							})
						}
					});
				}
			});
		}
	})
})

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

<?php
$title=$_POST['txtTitle'];
$content=$_POST['txtContent'];
$fopen=fopen("../template/t1.html", "r");
$templateContent=fread($fopen, filesize("../template/t1.html"));
fclose($fopen);

$templateContent=str_replace("{TITLE}",$title,$templateContent);
$templateContent=str_replace("{CONTENT}",$content,$templateContent);
$htmlName="../html/".date("YmdHis").'.html';
$fwrite=fopen($htmlName,"w");   
fwrite($fwrite,$templateContent); 

mysql_connect('localhost','root','root');
mysql_query("set names utf8");
mysql_select_db('cms_php_html');

$url="http://localhost/phpToHtml".substr($htmlName, 2);
$insertSql="insert into newsList values(null,'".$title."','".$url."')";
mysql_query($insertSql);

echo json_encode("ok");
?>

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

<?php
$url=$_POST['url'];
$title=$_POST['title'];
$content=$_POST['content'];

$oldContent=file_get_contents($url);
$newContent=preg_replace("#<title>(.*?)</title>#s", "<title>".$title."</title>", $oldContent);
$newContent=preg_replace("#<body>(.*?)</body>#s", "<body>".$content."</body>", $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

<?php
$htmlURL=$_GET['htmlUrl'];
$fcontents=file_get_contents($htmlURL);

preg_match("#<title>(.*?)</title>#s",$fcontents,$titleMatches);
preg_match("#<body>(.*?)</body>#s",$fcontents,$contentMatches);

$row[0]=$titleMatches[1];
$row[1]=$contentMatches[1];
echo(json_encode($row));
?>

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

<?php
$url=$_POST['curl'];
mysql_connect("localhost","root","root");
mysql_query("set names utf8");
mysql_select_db("cms_php_html");
mysql_query("delete from newsList where nURL='".$url."'");
echo("ok");
?>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>{TITLE}</title>
	</head>
	<body>
		<a href="../index.html">返回列表页</a>
		<div>{CONTENT}</div>
	</body>
</html>

结果：

前台：

技术分享

前台打开链接后：

技术分享

后台首页：


添加记录：

技术分享

添加后：

技术分享


修改记录：

技术分享

技术分享

技术分享


删除记录：

技术分享


删除后的列表：

技术分享

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

标签：

原文地址：http://blog.csdn.net/laoyaotask/article/details/42109603
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！