web前后端交互过程

2023-05-30 本文已影响0人 Mr_Michael

一、简介

1.前端和后端之间的基本交互过程

客户端发送请求：当用户在浏览器中访问一个网页时，浏览器会发送一个HTTP请求到服务器。这个请求包含了用户需要的信息，比如请求的页面URL、表单数据等。
服务器接收请求：服务器接收到客户端发送的请求后，会根据请求的URL和参数来确定应该由哪个后端程序处理。
后端处理请求：后端程序会根据接收到的请求进行相应的处理。这可能涉及到与数据库的交互、进行业务逻辑处理等。后端程序可以使用各种编程语言和框架来实现。
数据库交互：在后端处理过程中，如果需要从数据库中读取或写入数据，后端程序会与数据库进行交互。它可以执行查询操作、更新数据等。
生成响应：后端程序处理完请求后，会生成一个HTTP响应，包含了需要返回给客户端的数据和状态码等信息。
服务器发送响应：服务器将生成的HTTP响应发送回客户端。这个响应包含了请求的结果数据和状态信息。
客户端渲染和展示：一旦浏览器收到服务器发送的响应，它会根据响应的内容进行解析和渲染，将页面展示给用户。如果响应中包含了前端代码（如HTML、CSS和JavaScript），浏览器会执行这些代码来实现动态交互和页面效果。

2.客户端渲染和展示过程

HTML解析：浏览器首先会解析接收到的HTML代码，构建一个DOM（Document Object Model）树。DOM树表示了HTML文档的结构，它由一系列的HTML元素和它们的关系组成。
CSS解析和样式计算：浏览器接下来会解析CSS样式表，确定每个HTML元素应该应用的样式规则。浏览器会计算出每个元素的最终样式，这包括继承的样式和通过选择器选择的样式。
布局和绘制：在样式计算完成后，浏览器会根据DOM树和样式信息进行布局，确定每个元素在屏幕上的位置和大小。然后，浏览器将元素转换为屏幕上的可视图像，这个过程称为绘制。
JavaScript执行：如果HTML文档包含了JavaScript代码，浏览器会执行这些脚本。JavaScript可以操作DOM树、修改样式、处理用户交互等。通过JavaScript，开发人员可以实现动态的页面行为和交互。
事件处理：浏览器会监听用户的交互事件，比如点击、输入等。当用户触发一个事件时，浏览器会执行相应的JavaScript代码来处理事件，可能会修改页面的状态、发送请求等。
页面更新：当页面的状态或数据发生变化时，JavaScript代码可以更新DOM树的内容，修改样式，或者向服务器发送异步请求获取新的数据。这些操作可以触发浏览器的重新布局和绘制，从而更新页面上的内容。

3.网址 - URL

URL是缩写，其英文全称是：Uniform Resource Locator（统一资源定位符），由一下几部分组成：

协议：常用的是http和https，了解有这两种协议即可
域名：指向这个网站服务器地址的一串字符串
端口：用http协议访问的网址就是80端口，而https访问的网址就是443端口的，使用80和443端口的服务端，访问它就是不需要带上端口号的。而使用非标准端口需要带上端口号。
路径：以/开头，中间每一层也是使用/，路径就像是一层层的文件夹，不同的路径通常指向这个服务器下不同的网页或者API等等
参数：和路径之间以?分隔，?后面就是参数了，多个参数之间使用&分隔，每个参数是参数名=参数值的形式。

4.Web服务API

Web服务API（应用程序编程接口）是用于不同软件应用程序之间通信和交互的一组规则和协议。通过使用API，开发人员可以访问和使用其他软件应用程序的功能和数据，而无需了解底层实现细节。

当访问网页的URL时，服务器会返回一个网页文件，浏览器把这个网页显示出来。而访问API的URL的时候，返回的是一些文本数据而非网页，例如高德地图天气查询API。

1）Web服务API说明

请求和响应格式：Web服务API使用HTTP协议进行通信，通过发送HTTP请求来调用API，然后收到HTTP响应作为回应。常见的HTTP方法是GET、POST、PUT、DELETE等。
认证和授权：为了保护API的安全性和限制访问，通常需要进行身份验证和授权。常见的认证方法包括API密钥、OAuth等。
端点（Endpoints）：API的端点是指可以通过特定URL访问的特定功能或资源。例如，/users可能是一个用于获取用户信息的端点。
请求参数：API请求通常可以接受一些参数来指定操作的细节。这些参数可以作为查询字符串参数、URL路径参数或请求体中的JSON/XML数据。
响应：API的响应通常以JSON或XML格式返回。响应中包含请求的结果、状态码和其他相关信息。
错误处理：API可能会返回错误响应，其中包含有关发生的错误类型、错误消息和适当的状态码。
版本控制：API可能会使用版本控制来管理API的变化。通过在URL中包含版本号，可以确保在进行重大更改时不会破坏现有的API客户端。
文档和说明：好的API通常提供详细的文档和说明，描述每个端点的功能、参数、返回值和示例代码。

2）最常见的 API 协议

SOAP：（Simple Object Access Protocol）是一种基于XML的协议，用于在网络上进行分布式通信。它定义了一种标准的消息格式和交互模式，使得不同平台和应用程序之间可以进行跨网络的通信。
REST：（Representational State Transfer）是一种设计风格和架构模式，用于构建分布式网络应用程序和服务。RESTful架构是基于Web标准和HTTP协议的，它强调简单性、可扩展性、可伸缩性和可移植性。RESTful架构已成为构建Web服务和API的一种流行选择，其简洁性和灵活性使得它适用于各种应用场景和平台。
GraphQL：一种用于构建API的查询语言和运行时环境。与传统的REST架构不同，GraphQL允许客户端在单个请求中定义需要的数据结构和内容，从而提供更灵活、高效和精确的数据获取方式。

3）网络请求结构和类型

一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成。

POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
Host: developer.mozilla.org
Connection: keep-alive
Content-Length: 432
Pragma: no-cache
Cache-Control: no-cache
Origin: https://developer.mozilla.org
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,es;q=0.6
Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true

csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=

请求行
- 由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，它们用空格分隔。例如，GET /index.html HTTP/1.1。
  - 请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。
    - GET：要求服务器将URL定位的资源放在响应报文的数据部分，回送给客户端。使用GET方法时，请求参数和对应的值附加在URL后面，利用一个问号（“?”）代表URL的结尾与请求参数的开始，各个参数之间用”&”符号隔开。
      - 不适合传送私密数据。
      - 一般最多只能识别1024个字符，所以如果需要传送大量数据的时候，也不适合使用GET方式。
    - POST：将请求参数封装在HTTP请求数据中，以名称/值的形式出现，可以传输大量数据。
    - HEAD：服务器接受到HEAD请求后只返回响应头，而不会发送响应内容。当我们只需要查看某个页面的状态的时候，使用HEAD是非常高效的。
    - DELETE：删除某一个资源。
    - PUT： PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。
    - CONNECT：能够将连接改为管道方式的代理服务器。通常用于SSL加密服务器的链接与非加密的HTTP代理服务器的通信。
  - HTTP协议
    - HTTP/1.0：支持GET、POST、HEAD三种HTTP请求方法。
    - HTTP/1.1：默认采用持久连接，并能很好地配合代理服务器工作。还支持以管道方式同时发送多个请求，以便降低线路负载，提高传输速度。新增OPTIONS、PUT、DELETE、TRACE、CONNECT五种HTTP请求方法。

请求头部

由键值对组成，每行一对，关键字和值用英文冒号“:”分隔。请求头部通知服务器有关于客户端请求的信息。例如：

User-Agent：产生请求的浏览器类型;
Accept：客户端可识别的响应内容类型列表;星号 “ * ” 用于按范围将类型分组，用 “ / ” 指示可接受全部类型，用“ type/* ”指示可接受 type 类型的所有子类型; 比如 Accept：text/xml（application/json）表示希望接受到的是xml（json）类型。
Accept-Language：客户端可接受的自然语言;
Accept-Encoding：客户端可接受的编码压缩格式;
Accept-Charset：可接受的应答的字符集;
Host：请求的主机名，允许多个域名同处一个IP 地址，即虚拟主机;
connection：连接方式(close 或 keepalive);
Cookie：存储于客户端扩展字段，向同一域名的服务端发送属于该域的cookie;

Content-Type：发送端发送的实体数据的数据类型。比如，Content-Type：text/html（application/json）表示发送的是html类型。

Content-Type	解释
text/html	html格式
text/plain	纯文本格式
text/css	CSS格式
text/javascript	js格式
image/gif	gif图片格式
image/jpeg	jpg图片格式
image/png	png图片格式
application/x-www-form-urlencoded	POST专用：form表单数据被编码为key/value格式发送到服务器。
application/json	POST专用：序列化后的 JSON 字符串
text/xml	POST专用：发送xml数据
multipart/form-data	POST专用：向服务器发送二进制数据，以便可以在 POST 请求中实现文件上传等功能

空行
- 最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头。
请求数据
- 与请求数据相关的请求头是Content-Type和Content-Length。请求数据不在GET方法中使用，而是在POST方法中使用。

4）响应报文结构与类型

HTTP响应报文和请求报文的结构类似，由状态行（request line）、响应头部（header）、空行和响应实体4个部分组成。

状态行
- 由服务器HTTP协议版本，状态码和状态码的文本描述组成。
  - 比如：HTTP/1.1 200 OK
- 状态码：由3位数字组成，第一个数字定义了响应的类别
  - 1xx：指示信息，表示请求已接收，继续处理
  - 2xx：成功，表示请求已被成功接收，处理。
    - 200 OK：客户端请求成功
    - 204 No Content：无内容。服务器成功处理，但未返回内容。一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况。不会刷新页面。
    - 206 Partial Content：服务器已经完成了部分GET请求（客户端进行了范围请求）。响应报文中包含Content-Range指定范围的实体内容
  - 3xx：重定向
    - 301 Moved Permanently：永久重定向，表示请求的资源已经永久的搬到了其他位置。
    - 302 Found：临时重定向，表示请求的资源临时搬到了其他位置
    - 303 See Other：临时重定向，应使用GET定向获取请求资源。303功能与302一样，区别只是303明确客户端应该使用GET访问
    - 307 Temporary Redirect：临时重定向，和302有着相同含义。POST不会变成GET
    - 304 Not Modified：表示客户端发送附带条件的请求（GET方法请求报文中的IF…）时，条件不满足。
  - 4xx：客户端错误
    - 400 Bad Request：客户端请求有语法错误，服务器无法理解。
    - 401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
    - 403 Forbidden：服务器收到请求，但是拒绝提供服务
    - 404 Not Found：请求资源不存在。比如，输入了错误的url
    - 415 Unsupported media type：不支持的媒体类型
  - 5xx：服务器端错误，服务器未能实现合法的请求。
    - 500 Internal Server Error：服务器发生不可预期的错误。
    - 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常
响应头部
- Date标头：消息产生的时间
- Age标头:（从最初创建开始）响应持续时间
- Server标头: 向客户端标明服务器程序名称和版本
- ETage标头：不透明验证者
- Location标头：URL备用的位置
- Content-Length标头：实体的长度
- Content-Tyep标头：实体的媒体类型
响应实体
- 实体包含了Web客户端请求的对象。Content-Length标头及Content-Type标头用于计算实体的位置、数据类型和数据长度。

5.静态网站与动态网站

1）静态网站

由静态文件组成的网站，这些文件在服务器上预先生成，并以相同的方式呈现给所有用户。每个页面都是独立的HTML文件，不包含动态内容或交互功能。静态网站的内容在访问之前已经存在，并且在用户请求时直接发送给用户的浏览器。由于没有数据库或服务器端代码的需求，静态网站通常具有简单的架构和较快的加载速度。

静态网站的优点包括：

简单易于创建和维护，不需要复杂的后端开发。
快速加载，因为页面内容已经在服务器上生成并且不需要额外的处理。
更好的安全性，因为没有与数据库或服务器端代码交互的机会。

静态网站的缺点包括：

缺乏动态内容和个性化体验，每个用户看到的内容都是相同的。
更新和更改内容需要手动修改和重新生成每个页面。
交互性和复杂功能的实现有限。

2）动态网站

使用服务器端脚本和数据库等技术生成内容的网站，在用户请求时动态生成页面内容。服务器端脚本可以根据用户的请求和其他条件从数据库中检索数据、执行计算和逻辑，并生成相应的HTML页面。动态网站通常具有更丰富的功能和交互性。

动态网站的优点包括：

提供个性化和交互性的体验，可以根据用户的需求和条件生成动态内容。
可以轻松更新和管理内容，不需要手动编辑和生成每个页面。
支持更复杂的功能，如用户登录、评论系统、购物车等。

动态网站的缺点包括：

复杂的开发和维护需求，需要后端开发人员编写服务器端脚本和处理数据库交互。
加载速度可能较慢，因为页面内容需要在服务器端生成。
需要更高级的服务器配置和资源，以支持处理动态请求的负载。

二、后端web框架

后端 Web 框架是一种用于构建和开发服务器端应用程序的软件框架。它提供了一组工具、库和规范，使开发人员能够更轻松地构建功能强大的 Web 应用程序。后端 Web 框架通常用于处理与数据库、用户认证、请求处理和响应等相关的服务器端逻辑。

常用后端web开发框架：

框架	编程语言	著名的用例
Django	Python	Instagram Pinterest Coursera
Laravel	PHP	Deltanet Travel Neighborhood Lender MyRank
Ruby on Rails	Ruby	ZendDesk Shopify GitHub
ExpressJS	NodeJS	MySpace GeekList Storify
CakePHP	PHP	Mapme Educationunlimited Followmy Tv
Flask	Python	Red Hat Rackspace Reddit
Asp .NET	C#	Microsoft Godaddy Ancestry
Spring Boot	Java	Trivago Via Varejo Intuit
Koa	NodeJS	–
Phoenix	Elixir	Financial Times Fox 10 ABC15