一文读懂API的前后端参数对应

一、适用于Python（Django）项目中的对应关系

1.方法的对应

在一个请求当中，常见的参数可以分为在请求头当中的、链接当中的、请求体当中的，按照此方式来分类。

1.1请求头当中的

请求体可以决定了浏览器以何种方式去处理收到和发送的数据，也是双方协商的过程，就好像在两个人讲话之前，规定了讲话的语言、讲话的时间一样。我和你讲话使用汉语，一个小时，就会避免类似一方汉语一方英语而导致数据看不懂（无法解析的情况）

在请求头的参数，Python当中可以通过request方法当中的headers.get获取，例如：

#获取请求头当中的Authorization参数，赋值给“token”变量
token = request.headers.get('Authorization')

注意：

1. 请求头的参数不会在url（请求链接）当中进行体现。
2. 在控制台当中我们可以在网络请求当中（Header:）可以看到。
3. 在请求头当中，会有隐藏的参数，决定了数据以何种形式进行返回。

表1-1 常见的请求头：

表1-2 Python设置请求头

#设置一个名为“demouuid”的cookie
response.set_cookie('demouuid', uuid, max_age=360000, httponly=False, secure=False, samesite='Lax')

1.2请求链接当中的

请求链接的有两种，一种是链接中/（路径）之后直接携带的，另外一种是携带在？之后的，通过代码解析参数之后，即可使用，一般情况携带不重要参数，因为在链接当中携带参数是一件比较危险的事情。

1.2.1在？之后的参数

一般来讲，我们可以描述这类参数在Params当中的Query参数，在我们的Apifox当中可以进行这样设置：

在Python当中，这样进行解析：

#解析上述的两个参数，使用request的GET当中的get方法即可
page_num = request.GET.get('page_num')
page_size = request.GET.get('page_size')

而在我们的Vue项目，使用axios进行请求的时候，可以在get或者post方法当中携带，例如：

const response = await axios.get('http://localhost:8000/api/creat/get_userpoems', {
    //请求的params参数
    params: {
        page_num: currentPage.value,
        page_size: pageSize.value
    }
});

1.2.3在/（路径）之后的参数

在“/”之后的参数也拼接到url之后，常见的就是网页后面会携带以区分页码，可以进行快速的跳转。例如在某网站当中：

同样的，在Apifox当中，当我们直接只用该参数时，软件会自动进行识别。

在Vue项目当中，可以直接使用字符串拼接的方式进行拼接参数从而实现请求，对于后端，Java当中可以使用以下的方式解析：

@GetMapping("/xxxxxx/{userId}")
public ResponseEntity<byte[]> generateQRCode(@PathVariable String userId) {
    xxxxxx
}

1.3请求体当中的

请求体，也就是Body当中的内容通常不会在url当中体现，因此，其可以避免将参数中放在url当中，并且其适合携带数量较多的参数，包括文件、JSON等等格式。

以最常见的JSON为例：

对应到我们的DJango项目当中，可以使用json.loads进行解析和获取，如：

#从request.body里获取请求体内容，接着进行解析
if request.body and json.loads(request.body):
    body_data = json.loads(request.body)
    password = body_data.get('password')
    user_email = body_data.get('user_email')

在前端当中，我们可以进行以下方式的请求：

const response = await fetch('http://localhost:8000/api/login/', {
    //定义请求方法  
    method: 'POST',
      headers: {
          //请求的数据格式
        'Content-Type': 'application/json',
      },
    //携带请求体
      body: JSON.stringify({
        user_email: email.value,
        password: password.value,
      }),
    });

注意：

1. 请求体也可能被劫持，并不是放在请求体中的参数就一定安全。
2. 请求体当中的参数类型可以是多种，并不一定是JSON。
3. 相对于前两种，更多的其是一种便于携带多种参数的方式，如果参数多，url就会变得很长，不便于前后端的解析。