Skip to content

Latest commit

 

History

History
181 lines (135 loc) · 6.36 KB

前后端如何在项目中连接.md

File metadata and controls

181 lines (135 loc) · 6.36 KB
Raw

前后端如何在项目中连接

在项目中，前端需要与后端的数据进行交互，那么如何在前端项目中连接后端呢？

1. HTTP 协议入门

通常使用的网络（包括互联网）是在 TCP/IP 协议族的基础上运作的。而 HTTP 属于他的一个子集。

HTTP 协议和TCP/IP 协议内的其他众多协议相同，用于客户端和服务器之间的连接。

客户端：请求访问文本或图像等资源的一端

服务器端：提供资源响应的一端

通过之前的新人任务，同学们已经大概的了解了HTTP 协议，这里不再赘述。

HTTP 请求（HTTP request）

下面是一个具体的示例：

POST /Index.htm HTTP/1.1
Accept: */* 
Accept-Language: de-at 
Referer: http://www.morfik.com/
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.3; SLCC1; 
                         .NET CLR 2.0.50727; 
Host: www.morfik.com 
Content-Length: 0 
Connection: Keep-Alive
Pragma: no-cache
Cookie: __utma=57227574.1756966090.1260398203.1260491327.1260491779.5;

[message body]

该请求报文里面主要包括请求访问服务器的类型，称为方法（method），随后字符串 /Index.htm 指明了请求的资源对象，也就是请求 URI（request URI)，HTTP/1.1是所使用的协议。

请求报文是由请求方法、请求 URI、协议版本、可选的请求首部字段和内容实体构成。

通过之前的新人任务，同学们已经对 HTTP 有了基本的了解，这里不再赘述，下面简要介绍一下常用的请求方法。

Method Description
GET The GET method is used to retrieve information from the given server using a given URI. Requests using GET should only retrieve data and should have no other effect on the data.
POST A POST request is used to send data to the server, for example, customer information, file upload, etc. using HTML forms.
PUT Replaces all the current representations of the target resource with the uploaded content.
DELETE Removes all the current representations of the target resource given by URI.

HTTP 响应（HTTP response）

响应报文基本上由协议版本、状态码（表示请求成功或失败的数字代码）、用以解释状态码的原因短语、可选的响应首部字段以及实体构成。

HTTP/1.1 200 OK 
Cache-Control: no-store
Allow: Post
Content-Type: text/html; charset=utf-8
Content-Encoding: deflate
Last-Modified: Fri, 11 Dec 2009 00:51:37 GMT
Server: Microsoft-IIS/7.0
Content: 
Date: Fri, 11 Dec 2009 00:51:37 GMT
Content-Length: 2807

[message body]

2. Fetch API

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合乎逻辑的方式来跨网络异步获取资源。

具体使用方法我们来看下MDN文档 使用Fetch

关于什么是异步，可以阅读 Eloquent JavaScript第十一章进一步了解。

3. 项目中使用示例

在开发中，我们需要根据后端同学写的 API 文档，才知道具体的请求方法和格式。

以木犀内外的登录 API为例：

URL Header Method
/api/login/ Content-Type:application/json POST

URL Params:None

POST Data(json)

{
    'username':string,     //用户名
    'password':string   //用户密码 （base64加密）
}

Return data(json):

{
    'token': string 
    'user_id' : int 
}

Status Code

200 OK
403 用户不存在
400 密码错误

在我们的前端代码中：

fetch("/api/login/", {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json'
	},
	body: JSON.stringify({
		username: this.username,
		password: btoa(this.passwordInput)
	})
}).then(res => {
	if (res.ok) {
		return res.json()
	} else {
		this.failed = true
	}
}).then(value => {
	// do something
})

base64加密，用到的是 btoa()函数，它能够从二进制数据“字符串”创建一个base-64编码的ASCII字符串。，详见Base64 encoding and decoding

Basic 认证

Basic 认证（基本认证）是从 HTTP/1.0就定义的认证服务。

认证步骤：

  1. 客户端发送请求
  2. 服务器端 返回状态码401以告知客户端需要认证
  3. 用户名 ID 和密码base64 方式编码发送
  4. 认证成功则返回200，失败返回401

第三步中发送的字符串内容是由用户 ID 和密码构成，两者中间以冒号(:)连接，再经过 base64编码加密，写入 header 字段 Authorization 里，发送请求。

fetch("/api/login/", {
	method: 'GET',
	headers: {
		'Accept': 'application/json',
		'Content-Type': 'application/x-www-form-unlencoded',
		'Authorization': 'Basic ' + btoa(this.emailInput + ':' + this.passwordInput)
		// 注意 Basic 后面有个空格
	}
})

在团队的项目中，我们其实不推荐这样写请求代码。因为我们常常需要拉取数据，在发送请求的一些代码需要重复的编写。所以在今后的所有项目中，我们要求集中管理这些请求的路由并处理错误。详细参考简单的前端网络层Service封装

4. 使用 Postman

Postman 介绍：

有兴趣的同学可以用 Postman 把玩 Github API，调用API执行一些简单的操作

以上就是我们前端开发中与后端交互的基础知识介绍和简易流程，在实际开发过程中同学们会有更加清晰的了解。

推荐阅读：