Djnaog 之路飞学城前后端分离/api接口

路飞学城项目之前后端分离

前后端故名思议就是前端和后端分离开来,一个人写前端,一个人写后端.

前后端都是要基于restful协议进行的.那么什么是resful协议?

 

restful协议

 

后端主要是写接口,所谓的接口就是url,前端用ajax技术发送请求给后端,向后端拿想要的数据

而后端只需要返回json数据即可.

用Django的restframework框架写API接口

 

提供简单的model

model

class Course(models.Model):
    '''课程表'''
    Course_level=(
        (0,'低级'),
        (1,'中级'),
        (2,'高级'),
    )
    title=models.CharField(max_length=32,verbose_name='课程')
    img_src=models.CharField(max_length=64,default='static/images/logo.png')
    level=models.PositiveIntegerField(choices=Course_level,default=1)


    def __str__(self):
        return  self.title


class CourseDetail(models.Model):
    '''课程详细表'''
    name=models.CharField(max_length=255,verbose_name='口号')
    course=models.OneToOneField('Course',on_delete=models.CASCADE,related_name='c')
    why_study=models.TextField(verbose_name='为什么学习')
    recommend_course=models.ManyToManyField('Course',related_name='course_recomend',verbose_name='推荐课程',null=True,blank=True)

    def __str__(self):
        return self.name

class Chapter(models.Model):
    '''章节'''
    number_chapter=models.IntegerField(verbose_name='第几章节')
    title=models.CharField(max_length=32,verbose_name='章节名称')
    chapter_course=models.ForeignKey('Course',on_delete=models.CASCADE)

    def __str__(self):
        return '第%s章节%s'%(self.number_chapter,self.title)

里面涉及了多对多,一对多,还有choice字段,基本涵盖了大多数字段的类型

 

url:

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^api/(?P<version>\w+)/', include('api.urls')),
]

urlpatterns = [
    path('course/',course.CourseView.as_view({'get':'list'})),
    re_path(r'^course/(?P<pk>\d+)/$',course.CourseView.as_view({'get':'retrieve',
                                                                'put':'update',
                                                                'delete':'destroy'})),

]

 

获取所有的课程表

view:

class CourseView(ViewSetMixin,APIView):
    def list(self,request,*args,**kwargs):
        '''查看课程列表'''
        ret={'code':1000,'data':None}
        try:
            queryset=models.Course.objects.all()
            ser=apiserializer.CourseModelSerializer(instance=queryset,many=True)
            ret['data']=ser.data
        except Exception as e:
            ret['code']=1001
            ret['data']='获取数据错误'
        return Response(ret)

再来看序列化组件:

class CourseModelSerializer(ModelSerializer):
    '''Course表的序列化'''
    level=serializers.CharField(source='get_level_display')
    class Meta:
        model=models.Course
        fields=['id','title','img_src','level']
　　　　# 不建议用,因为有太多的无用信息
 　　　　#depth=1 #0-10

 

自定义字段需要写在fields里

get_level_display是取choice的中文名称

自定义字段后面会详细说明

 

前端vue接收数据:

main.js:

import axios from 'axios'
import Vuex from 'vuex'
Vue.use(Vuex);
Vue.prototype.$axios = axios;


const store = new Vuex.Store({
  state: {
      allCourseList:[],
      //这里面的状态跟每个组件的数据属性有关系
  },
  mutations: {
    GETCOURSELIST(state,newValue){
      state.allCourseList =newValue;
    },

  },

  actions:{
    GetCourseList(context,){
      axios.request({
        url:'http://127.0.0.1:8000/api/v2/course/',
        method:'GET',
      }).then(function(ret){
        context.commit('GETCOURSELIST',ret.data.data)
      }).catch(function(ret){
      })
    },
  },

});

main.js