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