原理と例: php+mysql+jquery で静的 Web ページを生成 (バックグラウンド編集機能を含む)-PHPチュートリアル-php.cn

Web の動作原理から、ユーザーが HTML にアクセスすることによって生じるサーバーの負荷は、動的ページにアクセスするよりもはるかに少なくなります。これは、前者の場合、サーバーは対応する HTML コードをクライアントに送信するだけで済みますが、後者の場合、サーバーはアクセス条件に基づいて一連の計算を実行し、HTML コードを生成し、最後に計算結果のコードをクライアントに送信する必要があります。したがって、トラフィックの多いプロモーション Web サイト (ニュースなど) では、できる限り静的ページを使用する必要があります。

その一方で、Web サイト編集者にこれらの HTML を 1 つずつ手動で作成させることは不可能です。それは、何年も前の純粋に静的な時代に戻ることになります。動的言語を使用すると、これらの静的 Web ページを簡単かつ迅速に生成できます。さらに、このテクノロジーは現在非常に成熟しています。この記事では、最も単純な原則とケースから始めて、一般的な方法とプロセスを説明することのみを試みており、特定の詳細 (テキストエディターなど) については考慮しません。

原則的な手順:

1. 空のコンテンツをテンプレートとして含む HTML ページを作成します。

2. Web サイトエディターがバックグラウンドでレコードを追加するとき、そのコンテンツをテンプレートファイルの対応する場所に追加し、それを HTML ファイルとして特定の場所に保存します

3. ファイルのコンテンツを記録します。データベース情報

4. フォアグラウンドでデータベース内のレコードを読み取り、表示します

5. バックグラウンド編集は基本的に HTML ファイルの追加、削除、および変更であり、ちなみに上記の操作はデータベース内のレコード。

ディレクトリ構造:

データベース設計:

データベース cms_php_html;

use cms_php_html;

存在しない場合はテーブルを作成`ニュースリスト` (

`nID` int(11) NOT 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

<?phpmysql_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>

ログイン後にコピー

結果:

フロントデスク:

フロントデスクがオープンしますリンク:

Backstage Home Page :

レコードの追加:

追加後:

変更記録:

削除記録:

削除後リスト: