Vue与Django数据交互

首先配置路由信息，理论上都会添加二级路由：所以会有请求转发

1 from django.conf.urls import url,include
2 
3  url(r'^api/(?P<version>\w+)/',include("api.urls")),

此时请求会转发给二级路由：api.urls

1    url(r'^course/$',course.CourseView.as_view({"get":"list"})),
2    url(r'^course/(?P<pk>\d+)/$',course.CourseView.as_view({"get":"retrieve"})),

对应去执行相应路由的视图类方法。

因为路由中涉及到版本配置，所以需要在Django的setting文件夹里配置rest_framework组件参数：

1 REST_FRAMEWORK = {
2     'DEFAULT_RENDERER_CLASSES':['rest_framework.renderers.JSONRenderer','rest_framework.renderers.BrowsableAPIRenderer',],
3 
4     'DEFAULT_VERSIONING_CLASS':'rest_framework.versioning.URLPathVersioning',
5     'ALLOWED_VERSIONS':['v1','v2'], # 允许的版本
6     'VERSION_PARAM':'version', # 参数
7     'DEFAULT_VERSION':'v1', # 默认版本
8 
9 }

因为需要执行as.view()方法，所以类必须继承含有此方法的类

 1 from rest_framework.viewsets import ViewSetMixin
 2 from rest_framework.response import Response
 3 from rest_framework.views import APIView
 4 
 5 class CourseView(ViewSetMixin,APIView):
 6 
 7     def list(self,request,*args,**kwargs):
 8         """
 9         课程列表接口
10         :param request: 
11         :param args: 
12         :param kwargs: 
13         :return: 
14         """
15         ret={"code":1000,"data":None}
16         try:
17             queryset=models.Course.objects.all()
18             ser=CourseSerializer(instance=queryset,many=True)
19             ret["data"]=ser.data
20         except Exception as e:
21             ret["code"]=1001
22             ret["error"]="获取数据失败"
23         return Response(ret)
24 
25     def retrieve(self,request,*args,**kwargs):
26         """
27         课程详情接口
28         :param request: 
29         :param args: 
30         :param kwargs: 
31         :return: 
32         """
33         ret = {"code": 1000, "data": None}
34         try:
35             cid=kwargs.get("pk")
36             obj = models.Course_detail.objects.filter(c_detail_id=cid).first()
37             ser = DetailCourseSerializer(instance=obj, many=False)
38             ret["data"] = ser.data
39         except Exception as e:
40             ret["code"] = 1001
41             ret["error"] = "获取数据失败"
42         return Response(ret)

在执行对应的路由时会分流，根据是否传递参数，判断执行不同的路由。不带参数，执行list方法，返回全部queryset数据。带参数，执行retrieve方法，返回此obj对象的全部数据。

在访问数据库前，先设置其相应的状态码，以及数据字典键。在访问数据库后，得到一个queryset对象或者一个obj对象，需要先将queryset指定类进行序列化，才可以将序列化好的字典数据传递给Vue进行数据显示。

1 from api import models

  from rest_framework import serializers

 class CourseSerializer(serializers.ModelSerializer):
2     class Meta:
3         model= models.Course
4         fields="__all__"

简单的数据序列化，可以直接按照model里面的字段指定。

遇到较复杂的数据字段，比如需要跨表去获取字段，则可以通过指定字段来实现，用source

 1 class DetailCourseSerializer(serializers.ModelSerializer):
 2     title=serializers.CharField(source="c_detail.title")
 3     course_img=serializers.CharField(source="c_detail.course_img")
 4     level = serializers.CharField(source="c_detail.get_level_display")
 5 
 6     related_course=serializers.SerializerMethodField()
 7 
 8     class Meta:
 9         model=models.Course_detail
10         fields=["title","course_img","level","slogon","reason","related_course"]
11 
12     def get_related_course(self,obj):
13         # print(type(obj))
14         queryset=obj.related_course.all()
15         return [{"id":row.id,"title":row.title}for row in queryset]