原理と例: php+mysql+jquery で静的 Web ページを生成 (バックグラウンド編集機能を含む)
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));?>ログイン後にコピー
<!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>
ログイン後にコピー
$(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) } });}ログイン後にコピー
$(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) } });}ログイン後にコピー
$(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");?>ログイン後にコピー
<?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");?>ログイン後にコピー
<?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));?>ログイン後にコピー
<?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");?>ログイン後にコピー
<!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 までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前
By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7478
15
7478
15
CakePHP チュートリアル
1377
52
1377
52
Steamのアカウント名の形式は何ですか
77
11
77
11
NYTの接続はヒントと回答です
19
33
19
33
PHPのカール：REST APIでPHPカール拡張機能を使用する方法
Mar 14, 2025 am 11:42 AM
PHPクライアントURL（CURL）拡張機能は、開発者にとって強力なツールであり、リモートサーバーやREST APIとのシームレスな対話を可能にします。尊敬されるマルチプロトコルファイル転送ライブラリであるLibcurlを活用することにより、PHP Curlは効率的なexecuを促進します
Codecanyonで12の最高のPHPチャットスクリプト
Mar 13, 2025 pm 12:08 PM
顧客の最も差し迫った問題にリアルタイムでインスタントソリューションを提供したいですか？ ライブチャットを使用すると、顧客とのリアルタイムな会話を行い、すぐに問題を解決できます。それはあなたがあなたのカスタムにより速いサービスを提供することを可能にします
PHPにおける後期静的結合の概念を説明します。
Mar 21, 2025 pm 01:33 PM
記事では、PHP 5.3で導入されたPHPの後期静的結合（LSB）について説明し、より柔軟な継承を求める静的メソッドコールのランタイム解像度を可能にします。 LSBの実用的なアプリケーションと潜在的なパフォーマ
JSON Web Tokens（JWT）とPHP APIでのユースケースを説明してください。
Apr 05, 2025 am 12:04 AM
JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。
フレームワークセキュリティ機能：脆弱性から保護します。
Mar 28, 2025 pm 05:11 PM
記事では、入力検証、認証、定期的な更新など、脆弱性から保護するためのフレームワークの重要なセキュリティ機能について説明します。
フレームワークのカスタマイズ/拡張：カスタム機能を追加する方法。
Mar 28, 2025 pm 05:12 PM
この記事では、フレームワークにカスタム機能を追加し、アーキテクチャの理解、拡張ポイントの識別、統合とデバッグのベストプラクティスに焦点を当てています。
PHPのCurlライブラリを使用してJSONデータを含むPOSTリクエストを送信する方法は？
Apr 01, 2025 pm 03:12 PM
PHP開発でPHPのCurlライブラリを使用してJSONデータを送信すると、外部APIと対話する必要があることがよくあります。一般的な方法の1つは、Curlライブラリを使用して投稿を送信することです。
