现代web技术全景图

在互联网发展的早期（上世纪80年代末90年代初），后端直接生成页面内容，没有前端展示，甚至都没有浏览器。如今，web技术发生了翻天覆地的变化，各种开发框架，编程语言，开发模式。但是，web技术所有的演进都是围绕前端、后端、前后端交互展开的。

上图是现代web技术的全景图。client端有浏览器，移动APP、微信小程序，web server上有基于vue/react的前端代码，如html、js、css等，也有基于后端的开发框架apache/tomcat的处理程序，还包括数据库。同时，web server还会去调用远端服务。

上图显示了现在web应用的一个基本框架，相比web1.0时代，客户端软件平台多样化；服务器端代码微服务化，微服务复用及框架多样化；服务器主机虚拟化及服务器主机部署的分布式集群化等。

这里讲到的微服务是一种云原生架构方法，其中单个应用程序由许多松散耦合且可独立部署的较小组件或服务组成。是SOA（service-oriented architecture--面向服务）架构样式的一种变体，将单一应用程序划分为一组小的服务。每个服务运行在其独立的进程中，服务与服务间采用轻量级的通信机制互相沟通（通常是基于HTTP的RESTful API）。每个服务都围绕着具体业务进行构建，并且能够独立地部署到生产环境、类生产环境等。另外，应尽量避免统一的、集中式的服务管理机制，对具体的一个服务而言，应根据上下文，选择合适的语言、工具对其进行构建。

分布式：一个业务拆分为多个子业务，部署在多个服务器上。

集群：同一个业务，部署在多个服务器上。

web后端的功能

前端简言之就是负责页面展示，那后端又是干什么的呢？

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

就比如说登录一个网站：

 当⽤户书写完表单内容以后，点击提交按钮的时候前端⼈员拿到⽤户填写的内容，把数据整合好传送给后端⼈员后端⼈员接收到数据以后，去数据库中进⾏⽐对，看看有没有对应的数据然后告诉前端⼈员，你给我的⽤户名和密码是否正确前端把信息反馈给客户看到如果正确那么就是跳转⻚⾯如果不正确提示⽤户名或者密码有问题，重新输入或者...

web 访问的具体流程：

1）connection：建立连接

ip + port <—> port + ip = socket

2）http parser：后端解析浏览器发来的 http 请求

3）router：路由

把不同的 request 转发给不同的 responser 处理

4）middleware：中间件（为应用提供通用服务和功能的软件---数据管理、应用服务、消息传递、身份验证和 API 管理通常都要通过中间件。）

tomcat 作为 web 服务器（这里指的是软件）包含两个模块，分别是 connector 和 container. connector 详情可以参考这个博客的核心功能有两个：

1) 监听网络端口，接收和响应网络请求

2) 网络字节流处理

访问过程详述

HTTP协议

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议，是一个基于TCP/IP通信协议来传递数据，也是互联网上应用最为广泛的一种网络协议。

HTTP的主要特点

简单快速：客户向服务器请求服务时，只需传送请求方法和路径。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快；
灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记；
无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间；
无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快；
支持B/S及C/S模式（1、C/S建立在专用网络上，通过专门服务器服务；而B/S建立在广域网上，不必有专门的网络硬件环境。 2、C/S一般面向相对固定的用户群，对信息安全的控制能力很强；而B/S面向不可知的用户群，对安全的控制能力相对弱。）

接口

在互联网领域里面，这个词在不同场景下都会出现，经常听到工程师说“ 让后台给我提供一个接口，我直接调用这个接口 ”，“ 这里你设计一个接口，我来实现 ”，大体上来讲，接口一般指的是HTTP接口，也可以说是HTTP API，接口由后端提供，前端调用后端接口用以获取后端数据。接口由URL和HTTP方法构成，URL为接口的地址，HTTP方法指的是GET、PUT、DELETE等等。

具体来讲，接口就是提供具体能力的一个标准，是一些预先定义的函数，包括接口地址、传入参数和返回参数，数据。可以简单理解为，当需要访问某些数据，正常状态下传入和各参数，会接收到该数据范围内的返回番薯。前后台交互基本都是通过程序接口实现的。

案例

网上用户上传图片作为头像这个需求需要后台人员处理，当用户登录修改自己个人信息的时候，上传了头像。此时，后台处理该用户update个人信息，将该图片存入数据库，一般存的都是图片地址，string形式的数据。然后，要返回到前台的时候，后台人员需要对这些用户的个人信息进行处理，不只是头像，还有一些别的信息。后台通过语言编译，生成json格式的键值对（一般是json 还有xml txt 等数据格式）。生成一个地址也就是url，前台人员利用ajax，将返回的data显示到页面就好了。

.前端开发与后台交互的数据格式主要是什么?
前后端交互时时传递数据的格式，主要是JSON格式的，当然也有XML格式，但现在用的不多。

JSON数据格式很好理解，举个例子：

{
“姓名”:”丽华”
“性别”:”男”
“兴趣爱好”:”写信”
}
这就是 JSON键/值对。

几种交互方式

1）Ajax

服务端渲染随着单页面应用以及Restful接口的兴起，Ajax逐渐成为目前前后端交流最为频繁的方式。Ajax的核心是XmlHttpRequest。我们通过对该对象的操作来进行异步的数据请求。接触到最多jQuey就有很好的封装，比如$.ajax，$.post等，如果用Angular的话我们可以用$http服务，除了这些之外，还可以使用第三方的Ajax库qwest等。

2）Jsonp

jsonp，算作json的一种使用模式，可以解决主流浏览器的跨域数据访问的问题。

3）Web Socket

HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

4）利用cookie

Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

5）利用session

session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页，服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时，仍处于同一个session中。

2022 蓝旭暑期第三次讨论班----交互相关推荐

2022年蓝旭前端第三次暑期培训课(上)
一.HTTP协议 1.1 认识http HTTP协议(HyperText Transfer Protocol) 全称超文本传输协议,是因特网上最广泛的一种网络传输协议,基于TCP/IP协议传输数据. ...
2022年蓝旭前端第三次暑期培训课(下)
一.JSON JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的文本数据交换格式.JSON使用javascript语法来描述数据 ...
蓝旭工作室2022第五次讨论班Javascript基础
一.JavaScript简介 1.JavaScript背景 JavaScript是一种具有函数优先的轻量级解释型的编程语言,作为开发Web页面的脚本语言而出名. JavaScript最初由Netsca ...
蓝旭后端第六次培训课 MySQL(二)
蓝旭后端第六次培训课 MySQL(二) 命令行操作MySQL 登录访问使用切换至你想操作的数据库显示当前数据库的所有数据库表退出数据库最后补充 SQL语句终于来咯 SQL简介 SQL语句分 ...
蓝旭前端开发：GITtomcat+nginx原理移动端web 开发
蓝旭前端开发:GIT+移动端 web 开发目录一.==GIT== 1.1 ==Git与GitHub== 1.2 ==GitHub注册和Git的下载安装== 二.==Git的使用== 2.1 ==本 ...
2022牛客暑期多校训练营3 个人题解
title :2022牛客暑期多校训练营3 题解 date : 2022-8-16 tags : ACM,练习记录 author : Linno 2022牛客暑期多校训练营3 题解题目链接 :htt ...
2022牛客暑期多校训练营训练日志
2022牛客暑期多校训练营1 G - Lexicographical Maximum 签到题. A - Villages: Landlines 简化题意:给你 nnn 条线段,问你把这些线段铺到数轴上 ...
“蔚来杯“2022牛客暑期多校训练营6
"蔚来杯"2022牛客暑期多校训练营6 [题目链接]("蔚来杯"2022牛客暑期多校训练营6_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛 ...
互联网晚报 | 3月1日星期二 | 2022年苹果可能推出三款Apple Watch；“国家中小学智慧教育平台”投入试运行...
‍ ‍小米投资纽迪瑞 3月1日消息,近日,深圳纽迪瑞科技开发有限公司发生工商变更,新增小米关联公司瀚星创业投资有限公司为股东.据公开资料显示,纽迪瑞成立于2011年4月,是一家压力感应触控技术解决方案 ...

2022 蓝旭暑期第三次讨论班----交互

现代web技术全景图

web后端的功能

HTTP协议

几种交互方式

2022 蓝旭暑期第三次讨论班----交互相关推荐

最新文章

热门文章