lement-ui、接口、restful规范、drf、跨域问题

django解决跨域

'''
1）安装django-cors-headers模块

2）在settings.py中配置
# 注册app
INSTALLED_APPS = [
	...
	'corsheaders'
]
3）添加中间件
MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]
4）允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
'''

element-ui

安装

cnpm i element-ui -S

配置main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

使用：官方API

https://element.eleme.cn/#/zh-CN/component/installation

<!--案例-->
<el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
</el-row>

web接口

# 请求工具：postman => https://www.getpostman.com/

# 接口：url链接，通过向链接发生不同的类型请求与数据得到相应的响应数据

# http://127.0.0.1:8888/test/
# https://api.map.baidu.com/place/v2/search
'''
ak: 6E823f587c95f0148c19993539b99295
region: 上海
query: 肯德基
output: json
'''

RESTful接口规范

# REST: 表征性状态转移(Representational State Transfer)
# RESTful规范：web数据请求接口设计规范
# 规范规定了两部分：1、url链接应该怎么写 2、返回的数据格式如何写
1）通常使用https请求
2）域名：有api关键字出现
	-- https://api.example.com  (存在跨域问题)
	-- https://example.com/api
3）版本：不同版本需要标注
	-- https://example.com/api/v1 | -- https://example.com/api/1
	-- https://example.com/api/v2 | -- https://example.com/api/2
4）资源：请求的目标数据称之为资源，资源一般都有名词复数表示
	-- https://example.com/api/v1/books  (之前不规范的案例: /get_books/)
5）操作方式：不从请求链接体现操作方式，从请求方式上决定操作方式
	-- get：https://example.com/api/v1/books  获取所有
	-- post：https://example.com/api/v1/books  新增一本
	-- put：https://example.com/api/v1/book/1  更新id=1的一本
	-- patch：https://example.com/api/v1/book/1  更新id=1的一本
	-- delete：https://example.com/api/v1/book/1  删除id=1的一本
6）资源过滤：通过接口传递参数来过滤资源
	-- https://example.com/api/v1/books?limit=10  限制10条
7）状态码：返回数据要标准状态码，通过在数据中 {"status": 200}
	-- SUCCESS("0", "查询成功")
	-- NODATA("1xx", "非正确，无数据，显示基本信息")
	-- FEAILED("2xx", "查询失败")
8）错误信息：请求失败需要标注错误信息  {"message": "请求参数不合法"}
9）操作结果：请求操作成功的返回结果 {"results": []}
	-- get：返回资源列表 | 返回单一资源
	-- post：返回单一新增资源
	-- put：返回更新的资源
	-- patch：返回更新的资源
	-- delete：返回空文档
10）子资源返回资源接口：返回的资源如果有子资源，返回子资源的链接地址，如查找书，书的封面图片就可以url表示

drf简易书写TESTful规范接口

#路由层
from app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^cbv/', views.CBVTest.as_view()),
    url(r'^books/', views.books),
    url(r'^book/(?P<id>d+)/', views.book),
]

# 视图层
from django.http import JsonResponse
book_list = [{'id': 1, 'name': '红楼梦'}, {'id': 2, 'name': '水浒传'}]
def books(request):
    if request.method == "GET":
        if 'ak' not in request.GET:
            return JsonResponse({
                'status': '101',
                'msg': 'ak不存在'
            }, json_dumps_params={'ensure_ascii': False})
        ak = request.GET.get('ak')
        if ak != '123abc':
            return JsonResponse({
                'status': '200',
                'msg': 'ak非法'
            }, json_dumps_params={'ensure_ascii': False})
        return JsonResponse({
                'status': '0',
                'msg': 'ok',
                'results': book_list
            }, json_dumps_params={'ensure_ascii': False})
    if request.method == 'POST':
        name = request.POST.get('name')
        id = len(book_list) + 1
        book = {'id': id, 'name': name}
        book_list.append(book)
        return JsonResponse({
            'status': '0',
            'msg': 'ok',
            'results': book
        }, json_dumps_params={'ensure_ascii': False})

CBV源码分析

# 视图层
from django.shortcuts import render, HttpResponse
from django.views import View
class CBVTest(View):
    # 通过调度(dispatch)分发请求
    def dispatch(self, request, *args, **kwargs):
        pass
        super().dispatch(request, *args, **kwargs)
        pass

    def get(self, request):
        return render(request, 'cbv.html')

    def post(self, request):
        return HttpResponse('cbv post method')

<!-- 模板层 -->
<form action="/cbv/" method="post">
    {% csrf_token %}
    <input type="text" name="usr">
    <button type="submit">提交</button>
</form>

# 路由层
from app import views
urlpatterns = [
    url(r'^cbv/', views.CBVTest.as_view()),
]

drf安装与使用

# 1）安装drf：pip3 install djangorestframework
# 2）settings.py注册app：INSTALLED_APPS = [..., 'rest_framework']
# 3）基于cbv完成满足RSSTful规范的接口

# 视图层
from rest_framework.views import APIView
from rest_framework.response import Response
user_list = [{'id': 1, 'name': 'Bob'}, {'id': 2, 'name': 'Tom'}]
class Users(APIView):
    def get(self, request, *args, **kwargs):
        return Response({
            'status': 0,
            'msg': 'ok',
            'results': user_list
        })
    def post(self, request, *args, **kwargs):
        # request对formdata，urlencoded，json三个格式参数均能解析
        name = request.data.get('name')
        id = len(user_list) + 1
        user = {'id': id, 'name': name}
        user_list.append(user)
        return Response({
            'status': '0',
            'msg': 'ok',
            'results': user
        })

# 路由层
from app import views
urlpatterns = [
    url(r'^users/', views.Users.as_view()),
]

request源码分析

# as_view()
	# 核心走了父类as_view
	view = super(APIView, cls).as_view(**initkwargs)
    # 返回的是局部禁用csrf认证的view视图函数
    return csrf_exempt(view)
    
# dispatch(self, request, *args, **kwargs)
	# 二次封装request对象
	request = self.initialize_request(request, *args, **kwargs)
    # 自定义request规则
    self.initial(request, *args, **kwargs)
    
# initialize_request(self, request, *args, **kwargs)
	# 原生request封装在request._request
    
# initial(self, request, *args, **kwargs)
	# 认证
	self.perform_authentication(request)
    # 权限
    self.check_permissions(request)
    # 频率
    self.check_throttles(request)

ApiView