一、简介

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

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

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

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

1. 请求和响应格式：Web服务API使用HTTP协议进行通信，通过发送HTTP请求来调用API，然后收到HTTP响应作为回应。常见的HTTP方法是GET、POST、PUT、DELETE等。
2. 认证和授权：为了保护API的安全性和限制访问，通常需要进行身份验证和授权。常见的认证方法包括API密钥、OAuth等。
3. 端点（Endpoints）：API的端点是指可以通过特定URL访问的特定功能或资源。例如，/users可能是一个用于获取用户信息的端点。
4. 请求参数：API请求通常可以接受一些参数来指定操作的细节。这些参数可以作为查询字符串参数、URL路径参数或请求体中的JSON/XML数据。
5. 响应：API的响应通常以JSON或XML格式返回。响应中包含请求的结果、状态码和其他相关信息。
6. 错误处理：API可能会返回错误响应，其中包含有关发生的错误类型、错误消息和适当的状态码。
7. 版本控制：API可能会使用版本控制来管理API的变化。通过在URL中包含版本号，可以确保在进行重大更改时不会破坏现有的API客户端。
8. 文档和说明：好的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文件，不包含动态内容或交互功能。静态网站的内容在访问之前已经存在，并且在用户请求时直接发送给用户的浏览器。由于没有数据库或服务器端代码的需求，静态网站通常具有简单的架构和较快的加载速度。

静态网站的优点包括：

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

静态网站的缺点包括：

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

2）动态网站

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

动态网站的优点包括：

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

动态网站的缺点包括：

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

二、后端web框架

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

常用后端web开发框架：

参考

• 前后端是怎么进行交互的
• HTTP请求报文和响应报文详解
• Flask实战教程microblog