Web前端後端傻傻分不清,
1.
Web前端後端傻傻分不清
原創 2016年12月25日 19:50:08前言
??做C開發將近六年，基本上沒有接觸過web相關的東西，原來聽別人說web相關的東西的時候也是分不太清楚到底哪個是前端哪個是後臺，前端和後臺又是怎麽配合著工作的？經過各方法搜索，很多類似的疑問終於得以弄明白。
??使用html、Javascript寫的是Web前端，它不用向服務器(比如apache、nginx、tomcat等)交互在瀏覽器端就執行完了，比如使用Javascript彈出一個警告框的效果。而php、Python等是後臺語言，當通過瀏覽器向服務器發送訪問php文件的請求時（比如：http://localhost:63342/php_basic/helloworld.php），由web服務器收到請求，發現是php代碼則交給php解析器完成解析，然後發回給web服務器，最後返回給瀏覽器。
??本文章將簡單介紹前端和後臺的工作流程，以及get和post方式的使用。
示例代碼
??下面結合代碼演示前端和後臺配合工作流程。
GET方式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="process.php"></script>
<script>
function InputCheck(){
var user = document.getElementById("user");
if(user.value==""){
alert("用戶名為空！");
return false;
}
var pwd = document.getElementById("password");
if(pwd.value==""){
alert("密碼不能為空！")
return false;
}
}
</script>
</head>
<body>
<form name="myform" method="get" action="process.php">
<label for="user">用戶名</label>
<input type="text" id="user" name="user" value="user">
<br />
<label for="password">密碼</label>
<input type="password" id="password" name="password" value="password">
<br />
<input type="submit" id="submit" name="submit" value="提交" onclick="return InputCheck()">
</form>
</body>
</html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
??From的method定義了提交方式為get，在點擊“提交”按鈕時就會把數據傳給後臺，點擊的時候會調用javascript函數InputCheck()檢查輸入框是否為空，如果為空就跳出警告框，後續不再往服務端發送消息。
??當兩個輸入框都有內容時，點擊“提交”按鈕就會把數據傳到後臺，而具體執行哪個php是由Form中的action指定的，這裏指定的是process.php，process.php代碼如下顯示。
<?php
/**
* Created by PhpStorm.
* User: sweird
* Date: 2016/10/10
* Time: 22:18
*/
header("Content-Type:text/html;charset=utf-8");//支持中文
$user=$_GET["user"];
$pwd=$_GET["password"];
echo "這是從web服務器返回的消息，已經經過php處理的！<br />";
echo "您提交的用戶名是：",$user,"<br />";
echo "您提交的密碼是：",$pwd;
?>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
??下面看下運行效果，本次使用phpstorm開發，代碼寫完後點擊右上角的火狐瀏覽器圖標。
??此時跳到火狐瀏覽器中，按F12打開調試窗口並切換到網絡界面。
??然後清除掉用戶名輸入框中的內容，再點擊“提交”，此時就觸發了javascript代碼跳出一個警告窗口，並且發現在“網絡”界面的調試窗口並沒有數據，說明此時沒有向服務端發送數據，而是在前端就進行了js檢驗。
??然後在“用戶名”輸入框中輸入數據，點擊提交。 
??此時在地址欄中發現已經執行了process.php，並且顯示出了用戶名和密碼，而在瀏覽器中顯示的數據正是後臺PHP代碼打印出來的，至此前端和後臺的操作已演示完畢。
POST方式
??下面再來看下使用post方法時php是如何獲取前端發送的數據的？
??從上面使用get方法可以看到，如何要向服務端提交類似密碼這樣的敏感信息時，那麽是非常不保密的，因為在URL中就顯示了密碼，那麽此時最好的辦法就是用post方式向後臺提交數據，post不會顯式的輸出密碼，但如果打開調試窗口照樣是可以看到密碼的。
??但是使用POST時需要把相關的php代碼放到wamp的www目錄，否則會出現如下錯誤提示：
??把php挪到如下目錄，再確保服務器正常啟動： 
??然後在瀏覽器中手動輸入：http://localhost/post_demon.php 
??再點“提交”就出現如下成功的界面:
相關代碼
post_demon.php代碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="process_post_data.php"></script>
</head>
<body>
<form name="myform" method="post" action="process_post_data.php">
<label for="user">用戶名</label>
<input type="text" id="user" name="user" value="user">
<br />
<label for="password">密碼</label>
<input type="password" id="password" name="password" value="password">
<br />
<input type="submit" id="submit" name="submit" value="提交" onclick="return InputCheck()">
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
process_post_data.php代碼如下:
<?php
/**
* Created by PhpStorm.
* User: sweird
* Date: 2016/10/13
* Time: 21:30
*/
header("Content-Type:text/html;charset=utf-8");
$name=$_POST["user"];
$pwd=$_POST["password"];
echo "這是從web服務器返回的消息，已經經過php處理的！<br />";
echo "您提交的用戶名是：",$name,"<br />";
echo "您提交的密碼是：",$pwd;
?>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
Web前端後端傻傻分不清,