區分Web前端和後端（轉載）

時間 2019-11-20

標籤區分 web 前端後端轉載欄目 HTML 简体版

原文原文鏈接

轉載自：http://blog.csdn.net/rosetta/article/details/53871766javascript

前言

作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方式的使用。php

示例代碼

下面結合代碼演示前端和後臺配合工做流程。html

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>

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;
?>

下面看下運行效果，本次使用phpstorm開發，代碼寫完後點擊右上角的火狐瀏覽器圖標。
java

此時跳到火狐瀏覽器中，按F12打開調試窗口並切換到網絡界面。
nginx

而後清除掉用戶名輸入框中的內容，再點擊「提交」，此時就觸發了javascript代碼跳出一個警告窗口，而且發如今「網絡」界面的調試窗口並無數據，說明此時沒有向服務端發送數據，而是在前端就進行了js檢驗。
web

而後在「用戶名」輸入框中輸入數據，點擊提交。

此時在地址欄中發現已經執行了process.php，而且顯示出了用戶名和密碼，而在瀏覽器中顯示的數據正是後臺PHP代碼打印出來的，至此前端和後臺的操做已演示完畢。
apache

POST方式

下面再來看下使用post方法時php是如何獲取前端發送的數據的？
從上面使用get方法能夠看到，如何要向服務端提交相似密碼這樣的敏感信息時，那麼是很是不保密的，由於在URL中就顯示了密碼，那麼此時最好的辦法就是用post方式向後臺提交數據，post不會顯式的輸出密碼，但若是打開調試窗口照樣是能夠看到密碼的。
可是使用POST時須要把相關的php代碼放到wamp的www目錄，不然會出現以下錯誤提示：

把php挪到以下目錄，再確保服務器正常啓動：

而後在瀏覽器中手動輸入：http://localhost/post_demon.php

再點「提交」就出現以下成功的界面:
瀏覽器

相關代碼

post_demon.php代碼以下tomcat

<!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>

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;
?>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。