前端vue

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

main.js

<template>
  <div id="app">

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">路飞学城</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><router-link to="/">首页 <span class="sr-only">(current)</span></router-link></li>
        <li><router-link to="/course">免费课程</router-link></li>
        <li><router-link to="/micro">学位</router-link></li>
         <li><router-link to="/publicclass">直播公开课</router-link></li>
        <li class="dropdown">

          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="logout">注册</router-link></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

 <router-view/>

  </div>
</template>

<script>
  import 'bootstrap/dist/css/bootstrap.min.css'
  import login from './views/Login.vue'

  export default {
      name:'app',
      data(){
          return{


          }
      },

  }
</script>

<style>

a{
  text-align: center;
    padding: 0 20px;
    margin-right: 22px;
    position: relative;
}

  #bs-example-navbar-collapse-1{
    width: 1200px;
    height: 100%;

    margin: 0 auto;
  }
</style>

App.vue

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import course from './views/course'
import courseDetail from './views/courseDetail'
import login from './views/Login'



Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },

        {
            path: '/course/',
            name: 'course',
            component: course
        },
         {
            path: '/courseDetail/:id',
            name: 'courseDetail',
            component: courseDetail
        },
         {
            path: '/login/',
            name: 'login',
            component: login
        }




    ]
})

router.js

<template>
    <div class="course">
        <ul>
            <li v-for="obj in courseList">
                 <router-link :to="{name:'courseDetail',params:{'id':obj.id}}">{{obj.title}}</router-link>

            </li>
        </ul>
    </div>

</template>

<script>
    import axios from 'axios'


    export default {
        name: "course",
        data() {
            return {
                courseList: []
            }
        },

        components: {

        },
        mounted() {
            var that = this;
            axios.get('http://127.0.0.1:8105/course/')
                .then(function (response) {
                    that.courseList = response.data;

                })
        }
    }
</script>

<style scoped>

    li {
        list-style: none;
    }

    a {
        list-style: none;
        display: inline-block;
        text-align: center;
        padding: 0 20px;
        margin-right: 22px;
        position: relative;
    }

    a:hover {
        color: #84cc39;
        text-decoration: none;
    }

    a:link {
        color: #7f7f7f;
        text-decoration: none;
    }

</style>

course.vue

<template>
    <div class="courseDetail">
        <ul>
            <li>口号:{{coursedetail.slogon}}</li>
            <li>为什么学习:{{coursedetail.why}}</li>
            <li>课程：{{coursedetail.course}}</li>
            <li> 推荐课程：</li>
            <li v-for="item in coursedetail.recommend_courses">
                <router-link :to="{name:'courseDetail',params:{'id':item.id}}">{{item.title}}</router-link>
            </li>


        </ul>

    </div>

</template>

<script>
    import axios from 'axios'

    export default {
        name: "coursedetail",
        data() {
            return {
                coursedetail: [],
                id : this.$route.params.id
            }
        },
        mounted(){
            this.init();
        },

        methods: {
            init() {
                var that = this;
                // var id = this.$route.params.id;
                //
                axios.get('http://127.0.0.1:8105/courseDetail/' + this.id + '/')
                    .then(function (response) {
                        that.coursedetail = response.data;

                    }).catch(function (reason) {
                    console.log(reason);

                })

            }
        },
        watch:{
            '$route'(to,from){
               this.id=to.params.id;
                this.init();
            }
        }
    }
</script>

<style scoped>

</style>

courseDetail.vue

跨域

from django.utils.deprecation import MiddlewareMixin

class CORSMiddleware(MiddlewareMixin):

    def process_response(self,request,response):
        # 添加响应头

        # 允许你的域名来获取我的数据
        response['Access-Control-Allow-Origin'] = "*"

        # 允许你携带Content-Type请求头
        # response['Access-Control-Allow-Headers'] = "Content-Type"

        # 允许你发送DELETE,PUT
        # response['Access-Control-Allow-Methods'] = "DELETE,PUT,GET"

        return response

settings.py:

　　 MIDDLEWARE = [ 'api.util.mycor.CORSMiddleware', ]

后端Django

from django.conf.urls import url,include
from django.contrib import admin
from api import views
from rest_framework import routers
router=routers.DefaultRouter()
router.register('course',views.courseView)
router.register('courseDetail',views.courseDetailView)
router.register('ChapterView',views.ChapterView)

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.login.as_view()),
    url(r'^', include(router.urls)),

]

urls.py

from django.shortcuts import render
from rest_framework.views import APIView
from api.models import *
from rest_framework import serializers
from rest_framework.response import Response
from rest_framework.viewsets import ModelViewSet
from api.util.Myserializers import *
from rest_framework.response import Response
from rest_framework import exceptions
from django.http import JsonResponse

class courseView(ModelViewSet):
   
    queryset = Course.objects.all()
    serializer_class = courseViewSerializer

class courseDetailView(ModelViewSet):
    queryset = CourseDetail.objects.all()
    serializer_class = courseDetailViewSerializer


class ChapterView(ModelViewSet):
    queryset = Chapter.objects.all()
    serializer_class = ChapterViewSerializer

views.py

from rest_framework import serializers
from rest_framework.response import Response
from rest_framework.viewsets import ModelViewSet
from api.models import *

from api.models import *

class courseViewSerializer(serializers.ModelSerializer):
    class Meta:
        model=Course
        fields='__all__'

class courseDetailViewSerializer(serializers.ModelSerializer):
    course=serializers.CharField(source='course.title')
    recommend_courses=serializers.SerializerMethodField()
    class Meta:
        model=CourseDetail
        fields='__all__'
    def get_recommend_courses(self,obj):
        temp=[]
        for course in obj.recommend_courses.all():
            temp.append({'id':course.id,'title':course.title})

        return temp

class ChapterViewSerializer(serializers.ModelSerializer):
    class Meta:
        model=Chapter
        fields='__all__'

Myserializers.py

路飞学城1之课程与课程详细

前端vue

跨域

后端Django

猜你喜欢