web的前后端是如何交互的

微张张
519 阅读5分钟

资料来源：web 技术中的前端和后端是如何交互的 - 知乎 (zhihu.com)

后端

web前端是负责页面展示，web后端是做什么的？
答：根据不同的请求信息做出不同的响应。

具体来说，当用户触发某个行为后，客户端会通过 http/https 请求，和服务器建立连接、发送请求，往往这个请求首先会被连接到 LB（负载均衡上），LB 根据配置，将请求转发到内部的 API 服务上。这些 API 服务，根据不同的业务逻辑请求其他服务（service），这些服务各司其职，例如读写某 Mysql 表、读写缓存、甚至请求搜索引擎来完成相应的任务。而 API 服务在完成相应的流程后，也会将数据返回给客户端，客户端根据前端逻辑完成相关的展示。

交互流程

基础概念

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

后端MVC开发模式

Model（模型层）：提供/保存数据

Controller（控制层）：数据处理，实现业务逻辑

View（视图层）：展示数据，提供用户界面

前端只是后端 MVC 的 V（视图层），从数据与逻辑代码中分离出来，界面开发成为独立的工作岗位。

后端工程师的工作：编写控制器接收用户请求，处理用户数据，对数据库进行操作，返回数据结果，交给视图层渲染出最终页面效果。

前端工程师的工作：编写界面 HTML 及 CSS 样式，制作用户交互程序，在需要填写数据的地方写模板语法。实际上就是模板工程师，编写页面模板部分。

java后端开发框架：Java：Spring
spring 诞生于 2002 年，是一款轻量级的开源框架。它设计的初衷是面向企业，为了敏捷开发。我们这里先不谈它的面向切面（创建中间代理类，减少耦合）、控制反转（也叫依赖注入，其实就是工厂模式自动创建对象的过程）、容器等特性，这不是一两句话能讲清的。你只要记住一点：spring 和 jdk（java 开发工具集） 类似，提供了关于 java 开发各个方面的工具，比如 java io，多线程，socket 编程等等，每个方面都有很多类，很多 api 接口。
spring 是个工具集，里面涉及了多个方面的内容，而每个方面不断发展、演进，又形成了 spring boot、spring cloud 等优秀项目。4. spring boot

  • spring boot 专注于快速开发单体个体微服务。

  • spring cloud 关注全局所有的微服务，管理着服务配置、服务发现、路由、锁等。spring cloud 采用了基于 http 的 REST 方式， 是微服务架构下一站式解决方案。

  • 微服务 就是单个应用程序拆分成许多个小型服务的一种开发方法。很容易想到的优点有：解耦、易扩展、好治理等。举个例子：

支付宝上有订购火车票的服务，现在阿里巴巴又开发了一个微信小程序，上面也可以订购火车票，那么订购火车票的代码只需要开发一份就行了，谁需要它就去找它（请求调用）就行啦。

avatar
文章
阅读
粉丝