目錄

一、前端資料展示

 二、前端帶參跳轉，後端獲取引數

 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)
 

 

 二、前端帶參跳轉，後端獲取引數

思路總結：

 2-1 前端程式碼

1. 前端連結傳送跳轉請求

   <!--跳轉路由courseDetail，攜帶引數params，注意params key名不可變-->
   <router-link :to="{'name':'courseDetail','params':{'id':course.id}}">詳情</router-link>

2. 配置轉跳路由（vue）
   
3. 跳轉網頁監聽路由變化，獲取引數
   
4. 跳轉頁面帶參執行方法，將引數給予後臺
   
   
5. 後臺接受設定有名分組，接受引數

   url(r'^course/$', Course.Course.as_view({'get':'get_list'})),
   url(r'^course/(?P<pk>\d+)', Course.Course.as_view({'get': 'get_detail'})),

6. 後臺執行檢視函式，通過Response返回前臺
7. 前端接受資料渲染
   

<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 前端展示

三、路由跳轉引數顯示設定