解锁Web开发全貌：从前端到后端

发表时间: 2024-06-15 16:06

前言

我从事 C 开发快六年了，但基本没接触过 web 相关的东西。听别人讲 web 相关的东西时，总分不清哪个是前端，哪个是后端，前端和后端是怎么配合的？搜索了各种方法，终于搞清楚了很多类似的问题。

Web前端是用html和Javascript编写的，在浏览器端执行，不与服务器交互（如apache、nginx、tomcat等），比如使用Javascript弹出警告框。PHP、Python属于后端语言，当通过浏览器向服务器发送访问PHP文件的请求时（例如：
63342/php_basic/helloworld.php），Web服务器收到该请求后发现是PHP代码，然后经过PHP解析器解析后，发送回Web服务器，最后返回给浏览器。

本文将简单介绍前后端的工作流程，以及get、post方法的使用。

示例代码

以下代码演示了前后端协调的工作流程。

GET 方法

<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的方法定义了提交方式为get，当点击“提交”按钮时，数据会传递到后台，点击后会调用javascript函数InputCheck()检查输入框是否为空，如果为空则弹出警告框，并且不会向服务器发送后续消息。

当两个输入框都有内容时，点击“提交”按钮，数据就会传到后台，具体执行哪个PHP，由Form中的action来指定，这里指定了process.php，process.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处理的！
";echo "您提交的用户名是：",$user,"
";echo "您提交的密码是：",$pwd;?>