目录
一、前端数据展示
思路总结：
- 前端mounted 绑定方法，加载页面即发送数据请求到后端
- 后端接受请求处理，根据路由，执行视图函数。
- 实例化MyResponse对象，生成基于RESTful规范的数据字典
- 通过DRF序列化组件，处理数据
- 处理数据逻辑
- 结果存于MyResponse对象实力中，通过Response进行返回
- 前端取出后台传输数据，response.data内
- 前端通过{{}}进行渲染
''' 后端路由 ''' 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)
二、前端带参跳转，后端获取参数
思路总结：
2-1 前端代码
- 前端链接发送跳转请求
<!--跳转路由courseDetail，携带参数params，注意params key名不可变--> <router-link :to="{'name':'courseDetail','params':{'id':course.id}}">详情</router-link>- 配置转跳路由（vue）
- 跳转网页监听路由变化，获取参数
- 跳转页面带参执行方法，将参数给予后台
- 后台接受设置有名分组，接受参数
url(r'^course/$', Course.Course.as_view({'get':'get_list'})), url(r'^course/(?P<pk>\d+)', Course.Course.as_view({'get': 'get_detail'})),- 后台执行视图函数，通过Response返回前台
- 前端接受数据渲染
<template> <div class="courseDetail"> <h1>courseDetail页面</h1> <h4>当前页id</h4>{{course_id}} <h4>后端传输的所有数据</h4>{{course_detail}} <div> <h4>课程名称</h4> <h5>{{course_detail.course_name}}</h5> <h4>课程简介</h4> <h5>{{course_detail.course_slogan}}</h5> <p v-for="teacher in course_detail.teachers"> <span> <h4>老师姓名:</h4><img :src="teacher.image" class="teaimage">{{teacher.name}} <h4>老师简介:</h4>{{teacher.brief}} </span> </p> <h4>推荐课程</h4> <p v-for="course in course_detail.recommend_courses"> <span> <router-link :to="{'name':'courseDetail','params':{'id':course.id}}">{{course.name}}</router-link> </span> </p> </div> </div> </template> <script> export default { data: function () { return { course_id: this.$route.params.id, course_detail: {}, } }, methods: { init: function () { let _this = this this.$http.request({ url: _this.$url + 'course/' + _this.course_id, method: 'get' }).then(function (response) { _this.course_detail = response.data.data }).catch(function (response) { console.log(response) }) }, }, mounted: function () { this.init() }, watch: { //监听路由的变化 '$route': function (to, from) { console.log('---->to', to) console.log('---->from', from) //从前一个页面获取详情课程的id，并保存 this.course_id = to.params.id //用当前的课程id去后台加载数据回来 this.init() }, } } </script> <style> .teaimage{ width:50px; } </style>2-2 后端代码
''' MySerializers - CourseDetailSerializer ''' from rest_framework import serializers from LearnOnline import models class CourseDetailSerializer(serializers.ModelSerializer): class Meta: model = models.CourseDetail fields = '__all__' # 将课程的名字放入返回的数据，从课程表内获取数据 course_name = serializers.CharField(source='course.name') # 获取推荐课程 recommend_courses = serializers.SerializerMethodField() def get_recommend_courses(self, obj): # obj.recommend_courses.all()拿到的是该课程所有的推荐课程,queryset对象,放了一个个的课程对象 # obj值得是当前调用的表，即CourseDetail表，等同于 CourseDetail.recommend_courses.all() return [{'id': course.pk, 'name': course.name,} for course in obj.recommend_courses.all()] # 获取该课程的教师表信息 teachers = serializers.SerializerMethodField() def get_teachers(self, obj): return [{'id': teacher.pk, 'name': teacher.name, 'brief': teacher.brief,'image':teacher.image} for teacher in obj.teachers.all()] ''' 路由 ''' url(r'^course/$', Course.Course.as_view({'get':'get_list'})), url(r'^course/(?P<pk>\d+)', Course.Course.as_view({'get': 'get_detail'})), ''' 视图函数 ''' from rest_framework.views import APIView from rest_framework.response import Response from LearnOnline import models from LearnOnline import MySerializers from LearnOnline.utils.commonUtils import MyResponse from LearnOnline.MySerializers import CourseSerializer, CourseDetailSerializer from rest_framework.viewsets import ViewSetMixin from django.core.exceptions import ObjectDoesNotExist from django.conf import settings 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) def get_detail(self, request, pk, *args, **kwargs): ''' 接受传输的课程id 查询对应的信息 ''' response = MyResponse() print(pk) try: # 因为查的是课程详情表,传过来的pk 是课程表的主键，正向查询 course_detail = models.CourseDetail.objects.get(course_id=pk) course_detail_ser = CourseDetailSerializer(instance=course_detail, many=False) response.data = course_detail_ser.data except ObjectDoesNotExist as e: response.status = 101 response.msg = '您要查询的课程不存在' except Exception as e: response.status = 105 if settings.DEBUG: response.msg = str(e) else: response.msg = '未知错误' return Response(response.get_dic)2-3 前端展示
三、路由跳转参数显示设置
