前后端交互流程
前端发送请求-->后端接收请求->后端发送响应->前端接受响应
通常情况下的前端和后端的语言是不同的,比如前端使用JavaScript(TypeScript等),后端使用Java(GoLang等)。
编程语言和人类语言是类似的,不同的语言是无法交流的。
这时候就需要中间沟通的信使——HTTP协议。
HTTP使得前后端交互得以实现,前后端只需要按照HTTP的格式进行处理数据即可。
HTTP协议
HTTP报文的包含了两个部分:请求和响应。
请求报文
包含请求头、请求体。
Request Header Fields
示例:
GET / HTTP/1.1
Host: www.google.com
参数:
Accept
Accept-Charset
Accept-Encoding
Accept-Language
Authorization
Expect
From
Host
If-Match
If-Modified-Since
If-None-Match
If-Range
If-Unmodified-Since
Max-Forwards
Proxy-Authorization
Range
Referer
TE
User-Agent
响应报文
响应包含了响应头响应体。
Request Header Fields
示例:
HTTP/1.1 200 OK
Content-Length: 3059
Server: GWS/2.0
Date: Sat, 11 Jan 2003 02:44:04 GMT
Content-Type: text/html
Cache-control: private
Set-Cookie: PREF=ID=73d4aef52e57bae9:TM=1042253044:LM=1042253044:S=SMCc_HRPCQiqy
X9j; expires=Sun, 17-Jan-2038 19:14:07 GMT; path=/; domain=.google.com
Connection: keep-alive
参数:
Accept-Ranges
Age
ETag
Location
Proxy-Authenticate
Retry-After
Server
Vary
WWW-Authenticate
Header Fields
状态码
状态码 | 具体含义 | 常见状态 |
---|---|---|
1xx | 提示信息,表示目前是协议处理的中间状态; | |
2xx | 成功,报文已经收到并被正确处理; | 200、204、206 |
3xx | 重定向,资源位置发生变动,需要客户端重新发送请求; | 301、302、304 |
4xx | 客户端错误,请求报文有误,服务器无法处理; | 400、403、404 |
5xx | 服务器错误,服务器在处理请求时内部发生了错误。 | 500、501、502、503 |
前端
语言
JavaScript、TypeScript等。
TypeScript是JavaScript超集,在JavaScript基础上增加了面向对象与静态类型,使项目便于维护。
库
axios是一款优秀的js库,用于实现AJAX。
具有相同功能的还有:XMLHttpRequest、Fetch等。
调试工具
Browser console,请学会使用浏览器的控制台。
后端
语言
Java、Python、GoLang等,Java使用较多。
框架
Spring Framework
是一款优秀的框架,基于Spring
开发的针对web的框架。