basic knowledge

在这里记录下学习web的基础知识，类似那种常识入门课

若看不懂，暂请跳过，不建议钻牛角尖，这类常识性的知识大家会在后续的web学习中，潜移默化下掌握、精通

basic web framework

一个基础的web应用应该由数据库、后端、前端组成，它们三个之间的联系如下

    flowchart TD
    Front[前端页面层<br/>页面渲染、交互、请求触发]
    Back[后端服务层<br/>业务逻辑、权限校验、接口封装]
    DB[(数据库存储层<br/>持久化数据、缓存数据)]

    Front -->|发起接口请求| Back
    Back -->|增删改查操作| DB
    DB -->|查询结果返回| Back
    Back -->|处理后返回数据| Front

HTTP

对于Web手来说，最长打交道的便是HTTP协议

HTTP是一个客户端(用户)和服务器(网站)之间请求和应答的标准，其本质是TCP

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定的端口，我们称这个客户端为用户代理程序(User Agent),应答的服务器上存储着一些资源，如HTML文件或图像，我们称这个应答服务器为源服务器

简单来说，客户端使用HTTP格式来构造请求包内容，将其发送出去之后，服务器再以HTTP格式来构造应答包，发送回客户端，客户端接收到这个包之后进行解析，最终得到我们看到的网页架构

下面详细讲解下请求包和响应包的格式

normal

在我看来，不管是请求包还是响应包，它们都是由两部分组成：请求(响应)头+请求(响应)体

我划分的太过粗略，大致这样理解就好，细节部分大家见多了就能熟悉

HTTP请求方法

上图中，我标记的请求方法是GET，它的含义顾名思义，就是向服务器获取资源，我下面整理一下能见到的请求方法

GET:通常用于直接获取服务器上的资源
POST:一般用于向服务器发送数据，常用于更新资源信息
PUT:一般用于新增一个数据记录
PATCH:一般用于修改一个数据记录
HEAD:一般用于判断一个资源是否存在
OPTIONS:一般用户获取一个资源自身所具备的约束，如应该采用怎样的HTTP方法及自定义的请求头

我这里只说明下GET和POST请求如何发包，这两是考察最频繁的

GET请求的话，只需要在URL后面加个?和一个键值对，比如说我要发送test这个请求参数，传递进去的值是web，那么就要构造的URL如下：

http://target:port?test=web

至于POST请求的话，常见的方法两种，一种是用hackbar这样的浏览器插件工具，另一种则是抓包直接编辑载荷再发送，详细的操作请看下面的例题部分

HTTP请求状态码

在每个响应包的响应头中，都能看到类似200这样的数字，它们被成为状态码，常见的状态码如下：

101 Switching Protocols: 切换协议，通常用于HTTP切换为Websocket协议
200 OK：请求成功
201 Created:资源创建成功，通常用于回应请求方法PUT
204 No Content: 用于不回显任何内容的情况，如网络联通性检测
301 Moved Permanently: 永久跳转，浏览器以后访问到这个地址都会直接跳转到Location头所指向的新地址
302 Found: 临时跳转，会跳转到Location头所指向的地址
404 Not Found:所请求资源不存在
405 Method not allowed: 方法不被允许
500 Internal Server Error:服务器内部错误
502 Bad Gateway: 网关在转发内容时错误，通常是转发的下一站—-后端不可达或者返回了一些奇怪的信息
504 Gateway Time-out: 网关在转发内容时超时

HTTP协议的URL

URL就是我们平时访问的网站链接，一个标准的URL如下：

https://url/read.html?a=1&b=2#tag5

我对每个部分进行解构，大致如下：

scheme:[//[userinfo@]host[:port]]path[?puery][#fragment]

协议(scheme):用于代表这个URL所指向的协议，常见的有HTTP,HTTPS,FTP等
用户信息(userinfo):通常为"用户名:密码"这类格式，会被编码在Authorization头中发向服务器
主机名(host):指向网络上的服务器地址、域名，或者IP地址
端口(port):指向服务器上的端口，如果不填写，就会依据协议设置成默认值并不展示，例如HTTP默认就是80端口，HTTPS默认是443端口，FTP默认是21端口
请求路径(path):指向服务器上的资源的路径，如/read.html会请求该路径对应的资源
请求参数(query):在请求资源时所带的参数，后端可获取到这些参数，例如a=1&b=2,这代表有两个参数a和b，它们传递的值分别是1和2
页面锚点(fragment):用于指向页面上的某个元素，不会被实际发送到服务器，浏览器会进行处理并滚动到该元素出现的地方