ホームページ >バックエンド開発 >PHPチュートリアル >原理と例: php+mysql+jquery で静的 Web ページを生成 (バックグラウンド編集機能を含む)
原理と例: php+mysql+jquery で静的 Web ページを生成 (バックグラウンド編集機能を含む)
- WBOYオリジナル
- 2016-06-23 13:42:501018ブラウズ
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 :
追加後:
変更記録:
削除記録:
削除後リスト:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：疑似静的について少し疑問次の記事：疑似静的について少し疑問