Heim > Artikel > Backend-Entwicklung > Ein Beispiel für die gemeinsame Nutzung der Front-End- und Back-End-Interaktion
Ein Beispiel für die gemeinsame Nutzung der Front-End- und Back-End-Interaktion
- 零下一度Original
- 2017-06-26 14:44:223450Durchsuche
Diese Woche habe ich unter Anleitung des Meisters ein kleines Beispiel einer Message-Board-Funktion fertiggestellt, die die Verarbeitung von Ajax- und PHP-Dateien kombiniert zeigen Ihnen, wie Sie diese Funktion implementieren.
1. Übersicht über die Benutzeroberfläche
Werfen wir zunächst einen Blick auf die spezifische Wirkung dieser kleinen Demo.
Diese Demo umfasst hauptsächlich drei Schritte, die auch drei Funktionen entsprechen, nämlich Registrierung, Login und Message BoardFunktion. Diese drei Funktionen basieren im Wesentlichen auf mehreren Front-End- und Back-End-Interaktionstechnologien. Im Folgenden zeige ich Ihnen die Codes zur Implementierung dieser drei Funktionen.
2. Funktionsimplementierung
1. Registrierungsfunktion und Anmeldefunktion
1.1 Codeanzeige
1.1.1 Registrierungsfunktion
(1) Frontteil
<!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) Backendteil
<?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) Benutzerdatenspeicherdatei
userName=123&pwd=123&rePwd=123[;]// 这其实是一个普通的txt文件，就是后台部分的user.txt
1.1.2 Anmeldefunktion
(1) Frontend-Teil
<!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) Backend-Teil
<?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 Funktionsdetails
Es gibt drei Hauptabhängigkeiten für die Implementierung von Benutzerregistrierungs- und Anmeldefunktionen: Ajax überträgt Daten an den Hintergrund und akzeptiert die Ergebnisse, der PHP-Hintergrund verarbeitet die von Ajax gesendeten Daten und gibt die Ergebnisse zurück und empfängt und Speicherung von Benutzerdaten (dieser Punkt kann tatsächlich in einen Hintergrundverarbeitungsteil umgewandelt werden).
1.2.1 Front-End-Details
Die Hauptaufgabe des Front-End-Teils besteht hauptsächlich darin, Informationen von Benutzern zu empfangen und an den Hintergrund weiterzuleiten basiert auf zwei Codezeilen.
Schauen wir uns zunächst an, wie die Ajax-Anfrage implementiert wird. Die Implementierung dieses Teils der Funktion basiert hauptsächlich auf zwei Codezeilen.
Die erste Codezeile ist var str = $("form").serialize(); Die Funktion dieser Zeile besteht darin, die übermittelten Daten zu sequenzieren Um das Formular in eine Zeichenfolge umzuwandeln, ist die spezifische Implementierung wie unten gezeigt
Die übermittelten Daten im Formular werden serialisiert, damit der Hintergrund diesen Teil besser analysieren kann.
Eine weitere wichtige Codezeile ist der Hauptteil der Ajax-Anfrage Dieser Teil ist hauptsächlich schwer zu verstehen und wird akzeptiert Datenparameter . Der Datenparameter ist eine Information, die der Hintergrund an die Rezeption zurückmeldet, nachdem die entsprechende Hintergrundverarbeitung der Ajax-Anfrage abgeschlossen ist, z. B. „true“ nach erfolgreicher Registrierung und „false“ nach einem Fehler.
1.2.2 Backend-Details
Der Schlüssel zur Backend-Verarbeitung von Daten vom Frontend liegt darin, wie die Daten abgerufen und analysiert werden. In diesem Teil stellt uns PHP drei Codezeilen zur Implementierung zur Verfügung.
Die erste Codezeile: $str = $_POST["formData"]; Holen Sie sich die Front-End-Übertragung über den Super globales Array $_POST Die serialisierte Zeichenfolge löst den Datenerfassungsteil.
Die zweite Codezeile: file_put_contents("user.txt", $str,FILE_APPEND); Die von PHP bereitgestellte Datei file_putt_contents() ermöglicht uns die Daten Die von uns erhaltenen Informationen werden zur langfristigen Aufbewahrung in einer Datei gespeichert.
Die dritte Codezeile: file_get_contents("user.txt"); Dies ist die von PHP bereitgestellte Datenextraktionsmethode, die file_putt_contents() entspricht.
Mithilfe der oben genannten drei Codezeilen und unserer Datenanalyseverarbeitung können wir die gesamte Funktion problemlos im Hintergrund implementieren.
2. Nachrichtenfunktion
2.1 Codeanzeige
(1) Frontend-Teil
<!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) Backstage-Teil
// 笔记的添加<?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) Nachrichtendatenspeicherdatei
// 这也是一个用于存储留言内容等各种信息的TXT文件{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:12","noteVal":"123123"}[;]{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:28","noteVal":"\u54c8\u54c8\u54c8\uff0c\u6211\u662f\u5c0fK\uff0c\u6211\u4e3a\u81ea\u5df1\u4ee3\u8a00\u3002"}[;]2.2 Funktionsdetails
2.1.1 Frontend-Teil
Die Funktion des Frontend-Teils ist mit der Anmelde- und Registrierungsfunktion identisch, mit Ausnahme dass es das aktuelle Datum entsprechend den Anforderungen, Benutzernamendaten und Erfassung des Message-Board-Stils hinzufügt.
2.1.2 Backend-Teil
Der Backend-Teil ist eigentlich die gleiche Routine wie die Backend-Implementierung von Anmeldung und Registrierung, aber er ist einen Schritt mehr als die beiden. json_encode($arr); Dies ist die von PHP bereitgestellte Methode zum Konvertieren von Arrays in das JSON-Objektformat, was es für uns einfacher macht, Nachrichten auf dem zu hinterlassen Front-End-Daten-Feedback-Erfassung.
Das Obige ist die kleine Funktionsdemo, die Ihnen diese Woche zum ersten Mal präsentiert. Ich hoffe, sie kann Ihnen helfen. Bitte korrigieren Sie mich Ihnen für Ihre Unterstützung!
Das obige ist der detaillierte Inhalt vonEin Beispiel für die gemeinsame Nutzung der Front-End- und Back-End-Interaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!