Vue向后端请求课程展示

<template>
  <div id="app">
    <router-link to="/index">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/micro">微职位</router-link>
    <router-link to="/news">深科技</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: #2c3e50;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
// 导入模块
import Index from '../components/Index'    
import Course from '../components/Course'
import Micro from '../components/Micro'
import News from '../components/News'
import Detail from '../components/Detail'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/course',
      name: 'course',
      component: Course
    },
    {
      path: '/detail/:id',
      name: 'detail',
      component: Detail
    },

    {
      path: '/micro',
      name: 'micro',
      component: Micro
    },{
      path: '/news',
      name: 'news',
      component: News
    }

  ],
  mode:'history'    //取出url里面的#号
})

<template>
  <div>
  <h1>课程列表</h1>
  <ul v-for="row in courseList">
      <li><router-link :to="{name:'detail',params:{id:row.id}}">{{row.title}}</router-link></li>
　　　　//这里利用：to来传入一个课程的ID，这样可以知道点击哪个课程的详细页。
  </ul>
  </div>
</template>

<script>
    export default {
        name: "course",
        data(){
          return {
            msg:"课程",
            courseList:[

            ]
          }
        },
        mounted:function () {
          //vue页面刚加载时执行
          this.initCourse()
        },
      methods:{

          initCourse:function () {
            //去通过ajax向接口发送请求并获取课程列表数据
            //axios/jquery
            //第一步在main.js中配置
            //第二部使用axios发送请求
            var that = this;
            this.$axios.request({
              url:'http://127.0.0.1:8000/api/v1/course/',
              method:'GET',
            }).then(function(ret){
              //ajax请求发送成功后，获取响应内容
                console.log(ret.data)
              if (ret.data.code ===1000){
                  that.courseList=ret.data.data
              }

            }).catch(function(ret){
              //上面发生异常执行这个

            })
          }
      }
    }
</script>
<style scoped>
</style>

<template>
    <h1>课程详细页面</h1>
</template>

<script>
    export default {
        name: "detail",  
      data(){
          return {

          }
      },
      mounted(){
          console.log(this);  #Vue对象
          console.log(this.$route.params.id)   #通过这个可以拿到这个ID，
      }
    }
</script>

<style scoped>

</style>

from rest_framework.views import APIView
from rest_framework.response import Response
from api import models
from rest_framework import serializers


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

from rest_framework.viewsets import GenericViewSet,ViewSetMixin
class CourseView(ViewSetMixin,APIView):
    def list(self,request,*args,**kwargs):
        '''
        课程列表接口
        :param request:
        :param args:
        :param kwargs:
        :return:
        '''
        ret = {'code': 1000, "data": None}
        try:
            query=models.Course.objects.all()
            ser = CourseSerializer(instance=query,many=True)
            ret["data"]=ser.data
        except Exception as e:
            ret["code"]=1001
            ret["error"]="获取课程失败"
        return Response(ret)

    def retrieve(self,request,*args,**kwargs):
        '''
        课程详细的接口
        :param request:
        :param args:
        :param kwargs:
        :return:
        '''
        ret = {'code': 1000, "data": None}
        try:
            pk=kwargs.get('pk')
            obj = models.Course.objects.filter(id=pk).first()
            ser = CourseSerializer(instance=obj,many=False)
            ret["data"] = ser.data
        except Exception as e:
            ret["code"]=1001
            ret["error"]="获取课程失败"
        return Response(ret)    

urlpatterns = [
    # url(r'^course/$', course.CourseView.as_view()),
    # url(r'^course/(?P<pk>d+)/$', course.CourseView.as_view()),

    #这种方案必须继承ViewSetMixin，它重写了as_view，可以往里添加参数
    url(r'^course/$', course.CourseView.as_view({"get":"list"})),
    url(r'^course/(?P<pk>d+)/$', course.CourseView.as_view({"get":"retrieve"})),

]        

1.查询所有课程：
http://127.0.0.1:8000/api/v1/course/
2.查询单个课程：
http://127.0.0.1:8000/api/v1/course/1/

from rest_framework.views import APIView
from rest_framework.response import Response
from api import models
from rest_framework import serializers


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


class CourseDetailSerializer(serializers.ModelSerializer):
    #o2o fk,choice
    title=serializers.CharField(source='course.title')      #只能这里通过跨表拿到以后，在下面展示 
    img=serializers.CharField(source='course.course_img')  
    level=serializers.CharField(source='course.get_level_display')  #通过get_level_display方法拿到choice对应的值，如果是方法需要加（），这里反射所以不加
    #m2m
    recommends = serializers.SerializerMethodField()     #这个因为是多对多字段，所以需要通过一个方法来拿到

    class Meta:
        model=models.CourseDetail
        fields=['course','title','recommends','level','img','slogon','why']  #想要展示的字段
        depth:1     #展示深度，这个就是说这个表如果有跟别的表跨表就会把那个表拿过来也序列化，深度越大，越往后关联的越多。

    def get_recommends(self,obj):       #这里通过拿到这个queryset
        #获取推荐的所有课程
        query=obj.recommend_courses.all()

        return [{'id':row.id,'title':row.title} for row in query]    #通过列表解析式将这个进行拆分成如下格式。



from rest_framework.viewsets import GenericViewSet,ViewSetMixin
class CourseView(ViewSetMixin,APIView):
    def list(self,request,*args,**kwargs):
        '''
        课程列表接口
        :param request:
        :param args:
        :param kwargs:
        :return:
        '''
        ret = {'code': 1000, "data": None}
        try:
            query=models.Course.objects.all()
            ser = CourseSerializer(instance=query,many=True)
            ret["data"]=ser.data
        except Exception as e:
            ret["code"]=1001
            ret["error"]="获取课程失败"
        return Response(ret)

    def retrieve(self,request,*args,**kwargs):
        '''
        课程详细的接口
        :param request:
        :param args:
        :param kwargs:
        :return:
        '''
        ret = {'code': 1000, "data": None}
        try:
            pk=kwargs.get('pk')
            obj = models.CourseDetail.objects.filter(course_id=pk).first()     #这里需要做的是这里会CourseDetail里面通过course_id跨表到course表
            ser = CourseDetailSerializer(instance=obj,many=False)    #这里使用了新的序列化类。
            ret["data"] = ser.data
        except Exception as e:
            ret["code"]=1001
            ret["error"]="获取课程失败"
        return Response(ret)