ホームページ >バックエンド開発 >PHPチュートリアル >フロントエンドとバックエンドの対話の共有例
フロントエンドとバックエンドの対話の共有例
- 零下一度オリジナル
- 2017-06-26 14:44:223549ブラウズ
今週は、マスターの指導のもと、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>
(2) バックエンド部
// 笔记的添加<?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");
(3) メッセージデータストレージファイル2.2 機能詳細
2.1.1 フロントエンド部分
フロントエンド部分の機能は、現在の日付、ユーザー名データ、メッセージボードのスタイルを追加することを除いて、ログインおよび登録機能と同じです。要件に従って。
2.1.2 バックエンド部分
バックエンド部分は、実際にはログインと登録のバックエンド実装と同じルーチンですが、この 2 つよりも 1 段階進んでいます。 json_encode($arr); これは、配列を JSON オブジェクト形式に変換するために PHP が提供するメソッドであり、フロントエンドでメッセージ データに関するフィードバックを取得しやすくなります。
上記は、この K が今週初めて提供する小さな関数のデモです。間違いがあれば修正してください。
以上がフロントエンドとバックエンドの対話の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。