Web前端后端傻傻分不清,

时间：2017-09-18 10:58:25 阅读：191 评论：0 收藏：0 [点我收藏+]

标签：href ati param apache cli top charset ret 基本

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>

??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开发，代码写完后点击右上角的火狐浏览器图标。
技术分享

??此时跳到火狐浏览器中，按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>

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