前后端交互

前端

'''
# v-proj\src\views\Home.vue
        created() {
            this.$axios({
                url: 'http://127.0.0.1:8000/test/',  // 前端服务器访问后端服务器的url
                method: 'post',
                params: {  // 前端服务器向后端服务器发送拼接参数: <WSGIRequest: POST '/test/?a=1'>
                    a: 1,
                },
                data: {  // 前端服务器向后端服务器发送数据包参数
                    x: 10,
                },
                headers: {  //  前端服务器向后端服务器发送headers参数
                    authorization: 'nick',  // 'HTTP_AUTHORIZATION' (2473272771256) = 'nick'
                    name: 'Owen',  // 'HTTP_NAME' (2473275856496) = 'Owen'
                    pwd: '123',  // 'HTTP_PWD' (2473275856624) = '123'
                },
            }).then(response => {  // 客户端接收服务端正常响应数据
                console.log('成功:', response.data)
            }).catch(error => {  // 客户端接收服务端异常响应数据
                console.log('失败:', error.response.data)
            });
        },
'''

后端

'''
# d_proj\app01\views.py
from django.http import JsonResponse


def test(request):
    # 获取前端headers数据: request.META.get('HTTP_参数名全大写')
    print(request.META.get('HTTP_AUTHORIZATION'))  # nick
    return JsonResponse('ok', safe=False)
    

# d_proj\d_proj\settings.py
CORS_ALLOW_HEADERS = [  # 后端配置前端允许发送的headers参数
    ...

    'name',
    'pwd',
]
'''

drf框架安装

  • drf是django的插件
  • cmd终端命令安装: pip install djangorestframework
  • 使用drf时, 要在settings.py中注册

接口的概念

什么是接口

规定了前后端信息交互规则的url链接, 访问其可以获取响应数据

四部分: url链接 + 请求方式+ 请求参数 + 响应数据

  • https: // www.baidu.com, 返回一个网页的地址通常叫网址
  • https: // api.baidu.map/search, 返回数据的地址通常叫接口

基于restful规范书写CBV接口

一个CBV视图类对应两个url接口

一个CBV视图类对应一个model表

一个CBV视图类通常包含5个方法, 处理10个对数据操作的逻辑

'''
# d_proj\d_proj\urls.py
from django.conf.urls import url, include

urlpatterns = [
    url(r'^api/', include('api.urls')),  # 路由分发
]


# d_proj\api\urls.py
from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^books/$', views.BookView.as_view()),  # http://127.0.0.1:8000/api/books/
    url(r'^books/(?P<pk>\d+)/$', views.BookView.as_view()),  # http://127.0.0.1:8000/api/books/(pk)
]


# d_proj\api\views.py
from django.views import View
from django.http import JsonResponse


class BookView(View):
    # 一个视图类可以包含五个常规的请求方法: get|post|put|patch|delete
    def get(self, request, *args, **kwargs):
        return JsonResponse({
            'status': 0,
            'msg': 'ok',
        })
'''

restful接口规范

yapi编写接口文档, 将接口的四部分翻译成文档形式, 一个接口一个页面管理

postman接口工具测试接口

url链接

  • url链接一般都采用https协议进行传输, 可以提高数据交互过程中的安全性
  • 用api关键字标识接口url
    • https://api.baidu.com/
    • https://www.baidu.com/api
  • 在版本更新初期, 多数据版本共存
    • https://api.baidu.com/v1/books/
    • https://api.baidu.com/v2/books/
  • 在url中只体现操作的资源名称, 不体现操作资源的方式
    • https://api.baidu.com/books/, ---操作多本书
    • https://api.baidu.com/books/(pk)/, ---操作某一本书
  • 非常规接口, 对资源的操作不属于传统的增删改查
    • https://api.baidu.com/login/
    • https://api.baidu.com/place/search/
  • 群资源操作, 一般还要额外限制条件, 如排序, 分页等
    • https://api.baidu.com/v1/books/?ordering=-price&limit=3

五大请求方式

  • get: 获取单个或多个资源
    • 群查, 返回多个结果对象: https://api.baidu.com/books/
    • 单查, 返回单个结果对象: https://api.baidu.com/books/(pk)/
  • post: 新增单个或多个资源, https://api.baidu.com/books/
    • 单增, 提交单个数据字典, 完成单增, 返回单个结果对象
    • 群增, 提交多个数据字典的数组, 完成群增, 返回多个结果对象
  • put: 整体修改单个或多个资源
    • 整体修改多个, 提供多个数据字典的数组(数据字典中要包含主键), 完成群改, 返回多个结果对象: https://api.baidu.com/books/
    • 整体修改单个, 提供单个数据字典(数据字典中要包含主键), 完成单改, 返回单个结果对象: https://api.baidu.com/books/(pk)/
  • patch: 局部修改单个或多个资源
    • 与put不同的是, 如果被操作的资源有5个k-v键值对, put请求提交的字典必须全包含,但是patch提交的字典包含0~5个都可以
  • delete: 删除单个或多个资源
    • 多删, 提供多个数据的主键, 完成群删, 不做任何资源返回, 但是通常会返回结果信息(成功|失败): https://api.baidu.com/books/
    • 单删, 提供单个数据的主键, 完成单删, 不做任何资源返回, 但是通常会返回结果信息(成功|失败): https://api.baidu.com/books/(pk)

响应结果

网络状态码(网络状态信息和网络状态码捆绑出现, 不需要额外设置):

  • 1xx: 基本信息
  • 2xx: 成功
  • 3xx: 重定向
  • 4xx: 客户端错误---400错误请求; 403请求无权限; 404请求资源不存在
  • 5xx: 服务端错误

数据状态码与数据状态信息: 通过接口文档, 给前端开发者阅读的对请求结果的描述

  • 0: 成功
  • 1: 失败---1xx
  • 2: 无数据---2xx

数据体: 常量, 数组, 字典, 如果有子资源(图片, 音频, 视频), 用url链接标识

'''
		{
    		"status": 0,
    		"msg": 'ok',
    		"results": [{
    			"name": "西游记",
    			"img": "https://api.baidu.com/media/book/xxx.png",
    		}]
		}
'''

CBV生命周期与debug使用

CBV生命周期

CommonMiddleware中间件完成url与函数的映射关系, 将函数地址的句柄与url建立对应关系

Scoll from Source: 定位到文件所在位置

Show Options menu-->Show Members, 显示文件中所有的成员(属性和方法)

wsgi协议在请求来时按照一定标准将前端数据拆解封装到request对象中, 并将后端的响应数据按照一定标准封装到response对象返回给前端

以单下划线开头定义的变量或函数表示内部使用不对外提供(便于内部查找)

执行as_view方法返回view

view为一个普通函数, 既没有绑定给类, 也没有绑定给对象

view方法内部会实例化出self对象, 该对象为调用as_view方法的类来实例化

as_view()-->view-->view()-->self.dispatch()-->视图类中的视图方法()-->...

'''
def fn(): pass


fn.a = 10
print(fn.a)  # 10


# G:\...\base.py
class View(object):
    ...
    @classonlymethod
    def as_view(cls, **initkwargs):
        ...
        def view(request, *args, **kwargs):
            self = cls(**initkwargs)  # self为BookView视图类的对象
            ...
            self.request = request  # request为按照wsgi协议类封装的对象, 
            self.args = args  # url正则表达式匹配到的无名分组参数
            self.kwargs = kwargs  # url正则表达式匹配到的有名分组参数
            return self.dispatch(request, *args, **kwargs)
        
        # # 记录调用as_view的CBV视图类的信息
        view.view_class = cls  
        view.view_initkwargs = initkwargs
		...
        
        return view
'''

debug模式

Resume Program: 调到下一个断电

View Breakpoints: 查看断点所在文件

Mute Breakpoints: 使断点临时失效

Show Execute Point: 光标移到当前断点位置

Step Over: 逐行执行, 遇到函数不进入

Step Into: 逐行执行, 遇到函数进入

Step Out: 跳出函数