web 技术中的前端和后端是如何交互的
1、现代 web 技术全景图
在互联网发展的早期（上世纪80年代末90年代初），后端直接生成页面内容，没有前端展示，甚至没有浏览器。如今，web 技术发生了天翻地覆的变化，各种开发框架、编程语言、开发模式层出不穷，令人眼花缭乱。然而，web 技术所有的演进都是围绕前端、后端、前后端交互展开的。
上图是现代 Web 技术的一个全景图。client 端有浏览器、移动 APP、微信小程序，web server 上有基于 vue/react 的前端代码，如 html、js、css 等，也有基于后端的框架 apache/tomacat的处理程序，还包括数据库。同时，web server 还会去调用远端服务。
下图显示了现在 web 应用的一个基本框架，相比 web 1.0 时代真是复杂得多。主要体现在：客户端软硬件平台多样化；服务器端代码微服务化，微服务复用及框架多样化；服务器主机虚拟化及服务器主机部署的分布式集群化等。
在进入下面的内容之前，这里先推荐下知乎旗下的职业教育品牌「知学堂」app，里面有当前市面常见编程语言的免费教学视频，大家如果感兴趣，可以戳一下~
3、web 后端的功能
web 前端的功能相信大家都很清楚了，简单来说，就是负责页面展示。那 web 后端又是干嘛的呢？
根据不同的请求信息做出不同的响应。具体来说，当用户触发某个行为后，客户端会通过 http/https 请求，和服务器建立连接、发送请求，往往这个请求首先会被连接到 LB（负载均衡上），LB 根据配置，将请求转发到内部的 API 服务上。这些 API 服务，根据不同的业务逻辑请求其他服务（service），这些服务各司其职，例如读写某 Mysql 表、读写缓存、甚至请求搜索引擎来完成相应的任务。而 API 服务在完成相应的流程后，也会将数据返回给客户端，客户端根据前端逻辑完成相关的展示。
web 访问的具体流程：
1）connection：建立连接
ip + port <—> port + ip = socket
2）http parser：后端解析浏览器发来的 http 请求
3）router：路由
把不同的 request 转发给不同的 responser 处理
4）middleware：中间件
tomcat 作为 web 服务器（这里指的是软件）包含两个模块，分别是 connector 和 container. connector 的核心功能有两个：
1) 监听网络端口，接收和响应网络请求
2) 网络字节流处理
4、web 前后端是如何交互的
首先我们要了解一些概念。
ngix、apache：最早的 web server .
tomcat 是 apache 的一个扩展，可以用来支持 jsp. SpringBoot 里一般内嵌了 tomcat，可以一键启动。
jsp：Java Server Pages，是一种动态网页开发技术。它使用 jsp 标签在 html 网页中插入 java 代码。
php：hypertext preprocessor “超文本预处理器”，它是一门脚本语言，apache 是专门执行 php 的容器，也就是说，php 在 apache 里才能跑起来。
html、css、js 都是在浏览器中渲染执行的，确切说是浏览器内核做的事，包括渲染引擎和 JavaScript 引擎。
如果是传统的 jsp + jQuery（javascript + Query，轻量级 js 库），源代码直接发送到浏览器端执行。
如果是现代 vue、react 等框架，一般都会使用 webpack 构建工具，它会做一些处理，例如 css 预处理器的解析、css 前缀补全、es6+ 新语法向老语法的转换等操作，都是在服务器 node.js 环境中执行的，编译打包后方可在浏览器端执行。
vue 也是个 js 库，并且不依赖别的 js 库，跟 jQuery 差不多。vue 的核心库只关注视图层（下文会介绍），非常容易与其它库或已有项目整合。
js 的解释执行由宿主环境负责（如浏览器、node.js）
接下来，以用户提交用户名、密码的登陆页面为例解释一下 web 前端、后端的交互流程。
当前网页的 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>form 中的 method 定义了提交方式为 get，当输入用户名和密码之后，再点击“提交”按钮时会调用 javascript 的函数 InputCheck() 检查输入框是否为空，如果为空就跳出警告框，如果不为空就会把数据传给后台。
后端收到用户名、密码数据时，会执行 php 文件，而具体执行哪个 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;
?>
5、后端 MVC 开发模式
Model（模型层）：提供/保存数据
Controller（控制层）：数据处理，实现业务逻辑
View（视图层）：展示数据，提供用户界面
前端只是后端 MVC 的 V（视图层），从数据与逻辑代码中分离出来，界面开发成为独立的工作岗位。
后端工程师的工作：编写控制器接收用户请求，处理用户数据，对数据库进行操作，返回数据结果，交给视图层渲染出最终页面效果。
前端工程师的工作：编写界面 HTML 及 CSS 样式，制作用户交互程序，在需要填写数据的地方写模板语法。实际上就是模板工程师，编写页面模板部分。
在进入下面的内容之前，这里先推荐下知乎旗下的职业教育品牌「知学堂」app，里面有当前市面常见编程语言的免费教学视频，除了基础和进阶，还有可以写入简历的实战项目，助你快速学编程，链接我给放下面了，感兴趣的可以戳一下~
6、web 前、后端开发框架有哪些
web 后端开源开发框架（注意与 web server 的区别）：
Php：Laravel
Python：Django（轻量级）
Ruby：Rails
Swift：Vapor
Java：Spring
其它前端框架：Angular、Bootstrap、Layui
附录：web 开发中的一些概念
1. apache
apache 是最原始的 web 服务器，使用 C 语言开发的，非常稳定。只支持普通网页（html）的静态解析，但可以通过插件支持 php。基本功能包括：基本网页、个人主页、虚拟主机和网页认证。
2. tomcat
tomcat 是对 apache 服务器的扩展，使用 Java 开发的。它是一个支持动态解析（jsp、asp、php、cgi等）的容器，可以独立于 apache 运行，也可以和 apache 一起使用。举个例子：apache 是一辆车，车上可以装 html，也可以装水。如果要装水的话，就得有个桶，而这个桶就是 tomcat，桶也可以从车上拿下来。
3. spring
spring 诞生于 2002 年，是一款轻量级的开源框架。它设计的初衷是面向企业，为了敏捷开发。我们这里先不谈它的面向切面（创建中间代理类，减少耦合）、控制反转（也叫依赖注入，其实就是工厂模式自动创建对象的过程）、容器等特性，这不是一两句话能讲清的。你只要记住一点：spring 和 jdk（java 开发工具集） 类似，提供了关于 java 开发各个方面的工具，比如 java io，多线程，socket 编程等等，每个方面都有很多类，很多 api 接口。
我们说 spring 是个工具集，里面涉及了多个方面的内容，而每个方面不断发展、演进，又形成了 spring boot、spring cloud 等优秀项目。
4. spring boot
spring boot 专注于快速开发单体个体微服务。
5. spring cloud
spring cloud 关注全局所有的微服务，管理着服务配置、服务发现、路由、锁等。
spring cloud 采用了基于 http 的 REST 方式， 是微服务架构下一站式解决方案。
6. dubbo
dubbo 也是一种面向微服务的基础框架，服务间采用 RPC 通信。如果把 spring cloud 比作品牌手机，那么 dubbo 就是功能手机。
另外，spring cloud 开源社区里一直有人在 commit，在演进，而 dubbo 更新乏力。
7. REST 和 RPC
RPC 基于 tcp 协议（同样可以基于 socket 自定义一套协议 ），而 REST 基于 http 协议（可以理解为就是 http 调用 ），性能上 RPC 表现更好。RPC 适合内网、高频服务调用。
8. 微服务
所谓微服务就是单个应用程序拆分成许多个小型服务的一种开发方法。很容易想到的优点有：解耦、易扩展、好治理等。举个例子：
支付宝上有订购火车票的服务，现在阿里巴巴又开发了一个微信小程序，上面也可以订购火车票，那么订购火车票的代码只需要开发一份就行了，谁需要它就去找它（请求调用）就行啦。
文章被以下专栏收录
