学习网站项目学习 - Django & Vue - 前端数据渲染、前端带参转跳

目录

一、前端数据展示

 二、前端带参跳转，后端获取参数

 2-1 前端代码

2-2 后端代码

 2-3 前端展示

三、路由跳转参数显示设置

---

 

一、前端数据展示

思路总结：

1. 前端mounted 绑定方法，加载页面即发送数据请求到后端
2. 后端接受请求处理，根据路由，执行视图函数。
3. 实例化MyResponse对象，生成基于RESTful规范的数据字典
4. 通过DRF序列化组件，处理数据
5. 处理数据逻辑
6. 结果存于MyResponse对象实力中，通过Response进行返回
7. 前端取出后台传输数据，response.data内
8. 前端通过{ {}}进行渲染

'''
后端路由
'''
 url(r'^course/$', Course.Course.as_view({'get':'get_list'})),

'''
MyResponse 数据返回字典类
'''
class MyResponse():
    '''
    通用的返回类，实例化后可以将内部的属性变成字典形式传输；
    即，{status='100',msg=None}
    使用get_dic方法可以获取字典
    '''
    def __init__(self):
        self.status = 100
        self.msg = None

    @property
    def get_dic(self):
        return self.__dict__
'''
MySerializers DRF序列化组件
'''
class CourseSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Course
        fields = '__all__'

'''
视图函数
'''
class Course(ViewSetMixin, APIView):

    def get_list(self, request, *args, **kwargs):
        # 实例化MyResponse，即生成结束字典
        response = MyResponse()
        course_list = models.Course.objects.all()
        course_ser = MySerializers.CourseSerializer(instance=course_list, many=True)
        response.msg = '查询成功'
        response.data = course_ser.data

        return Response(response.get_dic)