フロントエンドとバックエンドの対話の共有例
今週は、マスターの指導のもと、ajax と php ファイルのアップロード処理を使用した掲示板機能の小さなサンプルが完成しました。これを実装する方法を紹介します。
1. インターフェースの概要
まず、この小さなデモの具体的な効果を見てみましょう。
このデモには主に 3 つのステップが含まれており、これらは 登録、ログイン、掲示板 の 3 つの機能にも対応しています。これら 3 つの関数は基本的に、いくつかのフロントエンドおよびバックエンドの対話テクノロジに依存しています。これらの 3 つの関数を実装するためのコードを以下に示します。
2. 機能実装
1. 登録機能とログイン機能
1.1 コード表示
1.1.1 登録機能
(1) フロント部分
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户注册</title><link rel="stylesheet" type="text/css" href="../libs/bootstrap.css?1.1.11"/><style type="text/css">body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 350px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -175px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style></head>
<body><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title">用户注册</div></div><div class="panel-body"><form class="form-horizontal"><div class="form-group"><label>用户名</label><input type="text" class="form-control" name="userName"/></div><div class="form-group"><label>密码</label><input type="password" class="form-control" name="pwd" /></div><div class="form-group"><label>确认密码</label><input type="password" class="form-control" name="rePwd" /></div><div class="form-group btns"><input type="button" class="btn btn-primary" value="确定注册" id="submit"/> <a type="button" class="btn btn-success" href="login.php"/>返回登录</a></div></form></div></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script type="text/javascript">$(function(){
$("#submit").on("click",function(){var str = $("form").serialize();
console.log(str);
$.post("doReg.php",{"formData":str},function(data){if(data=="true"){
alert("注册成功！即将跳转登陆页！");
location = "login.php";
}else{
alert("注册失败！因为啥我不知道！");
}
});
});
});</script></html>(2)バックエンド部分
<?phpheader("Content-Type:text/html;charset=utf-8"); $str = $_POST["formData"]."[;]"; $num = file_put_contents("user.txt", $str,FILE_APPEND); if($num>0){echo "true";
}else{echo "false";
}(3) ユーザデータ保存ファイル
userName=123&pwd=123&rePwd=123[;]// 这其实是一个普通的txt文件，就是后台部分的user.txt
1.1.2 ログイン機能
(1) フロントエンド部
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户登录</title><link rel="stylesheet" type="text/css" href="../libs/bootstrap.css?1.1.11"/><style type="text/css">body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 280px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -140px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style></head>
<body><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title">用户登录</div></div><div class="panel-body"><form class="form-horizontal"><div class="form-group"><label>用户名</label><input type="text" class="form-control" name="userName"/></div><div class="form-group"><label>密码</label><input type="password" class="form-control" name="pwd"/></div><div class="form-group btns"><input type="button" class="btn btn-primary" value="登录系统" id="submit"/> <a type="button" class="btn btn-success" href="reg.php"/>注册账号</a></div></form></div></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script type="text/javascript">$(function(){
$("#submit").on("click",function(){var str = $("form").serialize();
console.log(str);
$.post("doLogin.php",{"formData":str},function(data){if(data=="true"){
location = "index.php?name="+$("input[name='userName']").val();
}else{
alert("用户名或密码错误！！！");
}
});
});
});</script></html>(2) バックエンド部
<?phpheader("Content-Type:text/html;charset=utf-8"); $str = $_POST["formData"]; list($userName) = explode("&", $str);list(,$pwd) = explode("&", $str); $users = file_get_contents("user.txt"); $userArr = explode("[;]", $users); foreach ($userArr as $user) {list($realName) = explode("&", $user);list(,$realPwd) = explode("&", $user);if($userName==$realName&&$pwd==$realPwd){echo "true";die();
}
} echo "false";1.2機能の詳細を説明します
ユーザー登録とログイン機能の実現には、主に 3 つの依存関係があります。つまり、ajax がバックグラウンドにデータを送信し、結果を受け取る、php バックグラウンドが、ajax によって送信されたデータを処理し、結果をフィードバックする、そしてユーザーデータの受信と保存 (これは実際にはバックグラウンド処理部分に変えることができます)。
1.2.1 フロントエンドの詳細
フロントエンド部分の主なタスクは、ユーザーから情報を受信し、それをバックグラウンドに送信することです。タスクのこの部分の実装は、主に 2 行のコードに依存します。
まず、ajax リクエストがどのように実装されるかを見てみましょう。関数のこの部分の実装は主に 2 行のコードに依存します。
コードの最初の行は var str = $("form").serialize(); この行の機能は、フォームで送信されたデータを文字列にシリアル化することです。具体的な実装は次のとおりです。以下
フォームに送信されたデータは、バックグラウンドでこの部分をより適切に解析できるようにシリアル化されます。
コードのもう 1 つの重要な行は、ajax リクエスト の主要な部分です。この部分で理解するのが難しい主な点は、受け入れられる データ パラメーターです。 dataパラメータは、ajaxリクエストの対応するバックグラウンド処理が完了した後にバックグラウンドがフロントにフィードバックする情報で、登録成功時に返されるtrue、失敗時に返されるfalseなどです。 1.2.2 バックステージの詳細
フロントエンドから送信されたデータのバックエンド処理の鍵となるのは、送信されたデータをどのように取得して解析するかです。この部分では、PHP は実装するための 3 行のコードを提供します。 コードの最初の行:
$str = $_POST["formData"]; スーパーグローバル配列 $_POST を通じてフロントデスクからシリアル化された文字列を取得し、データ取得部分を解決します。 コードの 2 行目:
file_put_contents("user.txt", $str,FILE_APPEND);PHP は file_putt_contents() を提供します。これにより、取得したデータを長期保存するためにファイルに保存できます。 。 コード3行目:
file_get_contents("user.txt");file_putt_contents()に対応するPHPが提供するデータ抽出メソッドです。 上記の 3 行のコードとデータ分析の処理を組み合わせることで、関数全体をバックグラウンドで簡単に実装できます。
2. メッセージ機能
2.1 コード表示
(1) フロントエンド部
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#note{width: 400px;height:100px;}</style></head><body><div id="div1"></div><textarea name="note" id="note"></textarea><br /><input type="button" id="submit" value="留言" /><h1>留言内容</h1><hr><div id="liuyanban"></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script>$(function(){
getData(); var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>';if(userName=="null"){
location = "login.php";
}
$("#div1").html("欢迎您，<span style='color:red;'>"+userName+"</span>");
$("#submit").on("click",function(){var noteVal = $("#note").val();if(noteVal==""){
alert("留言内容不能为空，请核对！");return;
}var time = getTime();var note = {"userName":userName,"time":time,"noteVal":noteVal
}
$.post("doAdd.php",note,function(data){if(data=="true"){
alert("留言内容提交成功！");
location.reload(true);
}else{
alert("留言失败！原因不明！");
}
});
});
}); function getData(){
$.post("doShowNote.php",function(data){var arr = data.split("[;]");
arr.pop();
console.log(arr);for (var i=0;i< arr.length;i++) {var thisNote = $.parseJSON(arr[i]);var div = "<br/><div id='div"+i+"'>用户名："+thisNote.userName+" 发布时间："+thisNote.time+"<br/><br/> 留言内容："+thisNote.noteVal+"</div><br/><hr>"$("#liuyanban").prepend(div);
}
})
} function getTime(){var today = new Date();var year = today.getFullYear();var month = today.getMonth();var date1 = today.getDate();var hours = today.getHours();var minutes = today.getMinutes()<10?"0"+today.getMinutes():today.getMinutes();var seconds = today.getSeconds()<10?"0"+today.getSeconds():today.getSeconds();var dateTime = year+"年"+(month+1)+"月"+date1+"日"+hours+":"+minutes+":"+seconds; return dateTime;
}</script></html>// 笔记的添加<?phpheader("Content-Type:text/html;charset=utf-8"); $userName = $_POST["userName"];$time = $_POST["time"];$noteVal = $_POST["noteVal"]; $arr = ["userName"=>$userName,"time"=>$time,"noteVal"=>$noteVal]; $str = json_encode($arr); $num = file_put_contents("note.txt", $str."[;]",FILE_APPEND); if($num>0){echo "true";
}else{echo "false";
}// 笔记的展示<?phpheader("Content-Type:text/html;charset=utf-8");echo file_get_contents("note.txt");2.2 機能詳細
2.1.1 フロントエンド部分
フロントエンド部分の機能は、現在の日付、ユーザー名データ、メッセージボードのスタイルを追加することを除いて、ログインおよび登録機能と同じです。要件に従って。
2.1.2 バックエンド部分
バックエンド部分は、実際にはログインと登録のバックエンド実装と同じルーチンですが、この 2 つよりも 1 段階進んでいます。 json_encode($arr); これは、配列を JSON オブジェクト形式に変換するために PHP が提供するメソッドであり、フロントエンドでメッセージ データに関するフィードバックを取得しやすくなります。
上記は、この K が今週初めて提供する小さな関数のデモです。間違いがあれば修正してください。
以上がフロントエンドとバックエンドの対話の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7522
15
1378
52
81
11
21
74
バックグラウンドログインの問題の解決策を明らかにする
Mar 03, 2024 am 08:57 AM
Discuz のバックグラウンド ログイン問題の解決策が明らかになりました。特定のコード サンプルが必要です。インターネットの急速な発展に伴い、Web サイトの構築がますます一般的になってきました。Discuz は、一般的に使用されるフォーラム Web サイト構築システムとして、次のユーザーに好まれています。多くのウェブマスター。しかし、その強力な機能ゆえに、Discuz を使用する際にバックグラウンドでのログインの問題などの問題が発生することがあります。本日は、Discuz のバックグラウンド ログインの問題の解決策を明らかにし、具体的なコード例を提供します。
デモってどういう意味ですか？
Feb 12, 2024 pm 09:12 PM
デモという言葉は、歌うことが好きな友達にとってはもはや馴染みのない言葉ではありませんが、これまでデモに触れたことのない多くのユーザーは、デモが何を意味するのか知りたがっています。ここで編集者が持ってきたデモの意味を見てみましょう。デモとはどういう意味ですか? 回答: デモテープ。 1. デモの発音は英語では ['deməʊ]、アメリカでは ['demoʊ] です 2. デモとは「デモ」の略で、一般に正式に録音される前に曲を聴くことによる予備的な効果を指します。 3. デモは名詞としてサンプルテープやサンプルレコードを指しますが、動詞の意味は試用（特にソフトウェア）、デモンストレーション、デモンストレーションです。
WordPress バックエンドのコードの文字化けが心配ですか?これらの解決策を試してください
Mar 05, 2024 pm 09:27 PM
WordPress バックエンドのコードの文字化けが心配ですか?これらの解決策を試してください。具体的なコード例が必要です。Web サイト構築で WordPress が広く使用されるようになったことで、多くのユーザーが WordPress バックエンドでコードが文字化けする問題に遭遇する可能性があります。このような問題が発生すると、バックグラウンドの管理インターフェースが文字化けして表示され、ユーザーに多大な迷惑をかけてしまいます。この記事では、WordPress バックエンドでの文字化けのトラブルを解決するための一般的な解決策をいくつか紹介します。 wp-config.php ファイルを変更し、wp-config を開きます。
PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ
Mar 16, 2024 pm 12:09 PM
PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ 今日のインターネットの急速な発展の時代において、フロントエンド開発はますます重要になっています。 Web サイトやアプリケーションのエクスペリエンスに対するユーザーの要求がますます高まっているため、フロントエンド開発者は、より効率的で柔軟なツールを使用して、応答性の高いインタラクティブなインターフェイスを作成する必要があります。フロントエンド開発の分野における 2 つの重要なテクノロジーである PHP と Vue.js は、組み合わせることで完璧なツールと見なされます。この記事では、PHP と Vue の組み合わせと、読者がこれら 2 つをよりよく理解し、適用できるようにするための詳細なコード例について説明します。
フロントエンドの面接官からよく聞かれる質問
Mar 19, 2024 pm 02:24 PM
フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。
フロントエンド開発に Go 言語を使用するにはどうすればよいですか?
Jun 10, 2023 pm 05:00 PM
インターネット技術の発展に伴い、フロントエンド開発の重要性がますます高まっています。特にモバイル デバイスの人気により、効率的で安定しており、安全で保守が容易なフロントエンド開発テクノロジーが必要です。 Go 言語は、急速に発展しているプログラミング言語として、ますます多くの開発者によって使用されています。では、フロントエンド開発に Go 言語を使用することは可能でしょうか?次に、この記事ではフロントエンド開発にGo言語を使用する方法を詳しく説明します。まずはフロントエンド開発にGo言語が使われる理由を見てみましょう。多くの人は Go 言語は
C# 開発経験の共有: フロントエンドとバックエンドの共同開発スキル
Nov 23, 2023 am 10:13 AM
C# 開発者としての私たちの開発作業には、通常、フロントエンドとバックエンドの開発が含まれますが、テクノロジーが発展し、プロジェクトが複雑になるにつれて、フロントエンドとバックエンドの共同開発はますます重要かつ複雑になってきています。この記事では、C# 開発者が開発作業をより効率的に完了できるようにする、フロントエンドとバックエンドの共同開発テクニックをいくつか紹介します。インターフェイスの仕様を決定した後、フロントエンドとバックエンドの共同開発は API インターフェイスの相互作用から切り離せません。フロントエンドとバックエンドの共同開発をスムーズに進めるためには、適切なインターフェース仕様を定義することが最も重要です。インターフェイスの仕様にはインターフェイスの名前が含まれます
Django はフロントエンドですか、バックエンドですか?それをチェックしてください！
Jan 19, 2024 am 08:37 AM
Django は、迅速な開発とクリーンなメソッドを重視した Python で書かれた Web アプリケーション フレームワークです。 Django は Web フレームワークですが、Django がフロントエンドなのかバックエンドなのかという質問に答えるには、フロントエンドとバックエンドの概念を深く理解する必要があります。フロントエンドはユーザーが直接対話するインターフェイスを指し、バックエンドはサーバー側プログラムを指し、HTTP プロトコルを通じてデータと対話します。フロントエンドとバックエンドが分離されている場合、フロントエンドとバックエンドのプログラムをそれぞれ独立して開発して、ビジネス ロジックとインタラクティブ効果、およびデータ交換を実装できます。
