前后端交互相关概念-526互联

前后端通信概念：前端和后端数据交互的过程或浏览器与服务器之间数据交互的过程
- 如访问页面，属于后端向前端发送数据

1. 用户输入网址
2. 通过解析的IP，，去找到对应的服务器要html等代码
3. 服务端返回html代码，浏览器解析并展示页面

- 用户注册/登录，属于前端向后端发送数据

1. 前端收集用户的信息，如手机号，密码登
2. 发送给后台
3. 后端收到数据后，判断用户名、密码是否正确，并将结果返回给前端
4. 前端根据结果进行下一步操作，如跳转等

- 搜索功能，也属于前端向后端发送

1. 前端将用户输入的关键字发送给后端
2. 后端根据关键字搜索，将搜索结果返回给前端
3. 前端将结果渲染到页面

- 页面上的图片，文字等都是从后端返回的，如bilibili，每个人的推荐视频都不同，后台需要用推荐算法确定数据

前后端通信的过程（前后端通信是在请求—响应中完成的）

　　后端：服务器端

　　客户端：只要能与服务器通信的都是客户端

　　前端：浏览器端，属于客户端的一种

请求——响应的流程

　　用户输入网址，浏览器解析完域名后会向该域名指向的Web服务器发出请求

　　如果不需要查询数据库，Web服务器将直接返回用户的请求

　　有时需要向数据库查询一些数据，然后把处理结果返回给用户（如首页的广告）

　　所有的资源都加载完成后，这个页面就可以提供完整的外观和功能了

　　前端的通信方式有以下几种：

HTML的标签，在浏览器解析html标签的时候，遇到一些特殊的标签，会想服务器发送请求，包括link/img/script/iframe，chrome浏览器允许同一个域名下最多同时请求6个资源（可以把图片放在不同的域名下，加快加载速度）
一些标签不会主动向浏览器发送请求，但是用户可以使用它们发送请求，如a/form，需要手动触发
还可以使用Ajax和Fetch

http协议：超文本传输协议，是一个请求——响应协议
http请求——响应的过程：

http报文

　　　　浏览器向服务器发送请求时，请求本身就是信息，叫做请求报文

　　　　服务器向浏览器发送响应时传播的信息，叫做响应报文

　　　　如GET请求，没有请求体，数据通过请求头携带

　　　　POST请求，有请求体，数据通过请求体携带

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>get</h1>
        <form action="https://www.baidu.com" method="get">
            <input type="text" name="username" placeholder="用户名" />
            <input type="password" name="password" placeholder="密码" />
            <input type="submit" value="注册" />
        </form>
        <h1>post</h1>
        <form action="https://www.baidu.com" method="post">
            <input type="text" name="username" placeholder="用户名" />
            <input type="password" name="password" placeholder="密码" />
            <input type="submit" value="注册" />
        </form>
    </body>
</html>

常见的http方法

　　　　RESTful API：代表状态转移的表现层，这是一种基于HTTP协议，用于定义与Web服务交互的接口设计风格

　　　　RESTful API遵循一系列的设计原则和约定，以下是HTTP定义的几个主要的请求方法：

1. GET：用于获取目标资源
2. POST：用于创建新的资源
3. PUT：用于更新现有的资源，需要提供完整的资源体
4. PATCH：也用于更新现有的资源，但只需要提供要更改的资源
5. DELETE：用于删除目标资源

　　　　GET和POST的区别：

1. 语义不同：GET用于获取数据，POST用于创建数据
2. 发送数据方面：GET通过地址在请求头中携带数据，可携带的数据较少；POST可以通过请求头和请求体携带数据，可以携带的数据理论上是无限的，因此如果是大量数据可以使用POST请求
3. 缓存：GET可以被缓存，POST不会被缓存
4. 安全性：严格来说，GET和POST都不安全，不建议发送密码等敏感信息，保证安全需要走HTTPS协议