专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > jQuery

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

发布时间：2010-05-20 14:01:29 文章来源：www.iduyao.cn 采编人员：星星草
原理与示例：php+mysql+jquery 生成静态网页（含后台编辑功能）

源码下载：http://download.csdn.net/detail/laoyaotask/8292519

从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>

结果：

前台：

前台打开链接后：

后台首页：


添加记录：

添加后：


修改记录：


删除记录：


删除后的列表：


友情提示：
信息收集于互联网，如果您发现错误或造成侵权，请及时通知本站更正或删除，具体联系方式见页面底部联系我们，谢谢。

其他相似内容：

  • jQuery搜索框输入文字下拉揭示菜单

    jQuery搜索框输入文字下拉提示菜单 jQuery搜索框输入文字下拉提示菜单 原文地址： http://www.jq22.com/jquery-info6193 ...

  • 7个替开发者准备的有用的jQuery技巧

    7个为开发者准备的有用的jQuery技巧 一、在新窗口打开链接 用下面的代码，你点击链接即可在新窗口打开： $(document).ready(fu...

  • jQuery获取呼应Input例子

    jQuery获取相应Input例子 页面上有许多input框，使用的是EasyUI样式，中间还参杂着各种其他无id的Input框，如下： <input class=...

  • webpack 引出jquery和第三方jquery插件

    webpack 引入jquery和第三方jquery插件 1、引入jquery jQuery 直接在 html 中引入，然后在 webpack 中把它配置为全局即可。 index....

  • JQuery的开发与使用经验

    JQuery的开发与使用心得 关于jQuery的 入门使用jQuery可以很容易或具有挑战性的，这取决于你如何使用JavaScript，HTML，CSS进行开发和...

  • 深入学习jQuery卡通片控制

    深入学习jQuery动画控制 &times; 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 　　jQuery动画可以使用fade、...

  • jquery操作table报表

    jquery操作table表格 一、数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>...

  • html + css + jquery实现简略的进度条实例

    html + css + jquery实现简单的进度条实例 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq...

  • jquery中ajax方法的datatype的功用

    jquery中ajax方法的datatype的作用 今天在维护一个项目的时候遇见了一个小问题。但是这个问题我认为对于项目十分有帮助。...

  • jQuery菜单示范（全选，反选，取消）

    jQuery菜单示例（全选，反选，取消） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...

热门推荐：