一 emement-ui使用

首先在終端下載安裝:npm install element-ui

在vue項目中的main.js下:

import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.use(ElementUI);

二 LuffyCity之建表

from django.db import models
from django.contrib.contenttypes.models import ContentType
from django.contrib.contenttypes.fields import
 
 GenericForeignKey

from django.contrib.contenttypes.fields import GenericRelation
# Create your models here.

# class CourseType(models.Model):
class Course(models.Model):
    """專題課程"""
    # unique=True 唯一性約束


    name = models.CharField(max_length=128, unique=True)
    course_img = models.CharField(max_length=255)
    brief 
 
= models.TextField(verbose_name="課程概述", max_length=2048)

    level_choices = ((0, ‘初級‘), (1, ‘中級‘), (2, ‘高級‘))
    # 默認值為1 ,中級
    level = models.SmallIntegerField(choices=level_choices, default=1)
    pub_date = models.DateField(verbose_name="發布日期", blank=True, null=True)
    period = models.PositiveIntegerField(verbose_name="
 
建議學習周期(days)", default=7)
    # help_text 在admin中顯示的幫助信息
    order = models.IntegerField("課程順序", help_text="從上一個課程數字往後排")

    status_choices = ((0, ‘上線‘), (1, ‘下線‘), (2, ‘預上線‘))
    status = models.SmallIntegerField(choices=status_choices, default=0)
    # 用於GenericForeignKey反向查詢，不會生成表字段，切勿刪除
    price_policy = GenericRelation("PricePolicy")

    def __str__(self):
        return self.name

    class Meta:
        verbose_name_plural = "專題課"


class CourseDetail(models.Model):
    """課程詳情頁內容"""
    course = models.OneToOneField("Course", on_delete=models.CASCADE)
    hours = models.IntegerField("課時")
    # 課程的標語 口號
    course_slogan = models.CharField(max_length=125, blank=True, null=True)
    # video_brief_link = models.CharField(verbose_name=‘課程介紹‘, max_length=255, blank=True, null=True)
    # why_study = models.TextField(verbose_name="為什麽學習這門課程")
    # what_to_study_brief = models.TextField(verbose_name="我將學到哪些內容")
    # career_improvement = models.TextField(verbose_name="此項目如何有助於我的職業生涯")
    # prerequisite = models.TextField(verbose_name="課程先修要求", max_length=1024)
    # 推薦課程
    # related_name 基於對象的反向查詢,用於替換表名小寫_set
    recommend_courses = models.ManyToManyField("Course", related_name="recommend_by", blank=True)
    teachers = models.ManyToManyField("Teacher", verbose_name="課程講師")

    def __str__(self):
        return "%s" % self.course

    class Meta:
        verbose_name_plural = "課程詳細"



class PricePolicy(models.Model):
    """價格與有課程效期表"""
    content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE)  # 關聯course or degree_course
    object_id = models.PositiveIntegerField()
    content_object = GenericForeignKey(‘content_type‘, ‘object_id‘)

    # course = models.ForeignKey("Course")
    valid_period_choices = ((1, ‘1天‘), (3, ‘3天‘),
                            (7, ‘1周‘), (14, ‘2周‘),
                            (30, ‘1個月‘),
                            (60, ‘2個月‘),
                            (90, ‘3個月‘),
                            (180, ‘6個月‘), (210, ‘12個月‘),
                            (540, ‘18個月‘), (720, ‘24個月‘),
                            )
    valid_period = models.SmallIntegerField(choices=valid_period_choices)
    price = models.FloatField()
    class Meta:
        unique_together = ("content_type", ‘object_id‘, "valid_period")
        verbose_name_plural = "價格策略"

    def __str__(self):
        return "%s(%s)%s" % (self.content_object, self.get_valid_period_display(), self.price)

class Teacher(models.Model):
    """講師、導師表"""
    name = models.CharField(max_length=32)
    image = models.CharField(max_length=128)
    brief = models.TextField(max_length=1024)

    def __str__(self):
        return self.name

    class Meta:

        verbose_name_plural = "講師"

三 vue綁定圖片

3.1vue前端頁面

<template>
    <div class="course">
        <h1>我是課程</h1>
        <el-row>
            <el-col :span="8" v-for="course in courses">
                <el-card :body-style="{ padding: ‘0px‘ }">
                    <img :src=‘course.course_img.course_img‘ class="image">
                    <div style="padding: 14px;">
                        <span>{{course.name}}</span>
                        <div class="bottom clearfix">
                            <time class="time">{{ currentDate }}</time>
                            <el-button type="text" class="button">
                                <router-link :to="{‘name‘:‘courseDetail‘,‘params‘:{‘id‘:course.id}}">詳情</router-link>
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                courses: [],
                currentDate: new Date()
            }
        },
        methods: {
            init: function () {
                let _this = this;
                this.$http.request({
                    url: this.$url + ‘course/‘,
                    method: ‘get‘
                }).then(function (response) {
                    console.log(response.data);
                    _this.courses = response.data.data

                })
            }
        },
        mounted: function () {
            this.init()
        }

    }


</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>

3.2後臺django代碼:

3.2.1序列化

from rest_framework import serializers
from app01 import models


class CourseSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Course
        fields = [‘id‘, ‘name‘, ‘course_img‘]
    course_img = serializers.SerializerMethodField()
    def get_course_img(self,obj):
        return {‘course_img‘:‘http://127.0.0.1:8000/media/‘+obj.course_img}


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):
        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} for teacher in obj.teachers.all()]

3.2.2views

from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from app01 import models
from app01.utils.commonUtils import MyResponse
from app01.mySer import CourseSerializer, CourseDetailSerializer
from rest_framework.viewsets import ViewSetMixin

from django.core.exceptions import ObjectDoesNotExist
from django.conf import settings

from rest_framework.pagination import LimitOffsetPagination


# Create your views here.

class Course(ViewSetMixin, APIView):
    def get_course(self, request, *args, **kwargs):

        response = MyResponse()
        course_list = models.Course.objects.all()
        # 加分頁器
        page = LimitOffsetPagination()
        page.default_limit=2
        page.max_limit=3
        page_list = page.paginate_queryset(course_list,request,self)


        course_ser = CourseSerializer(instance=page_list, many=True)
        response.msg = ‘查詢成功‘
        response.data = course_ser.data
        print(response.get_dic)

        return Response(response.get_dic)

    def get_course_detail(self, request, pk, *args, **kwargs):
        response = MyResponse()
        try:
            course_detail = models.CourseDetail.objects.get(course_id=pk)
            course_detail_ser = CourseDetailSerializer(instance=course_detail, many=False)
            response.msg = ‘查詢成功‘
            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 = ‘未知錯誤‘
        print(response.get_dic)
        return Response(response.get_dic)

3.3.3路由

from django.conf.urls import url
from django.contrib import admin

from app01.views import course,img

from django.views.static import serve

from django.conf import settings

urlpatterns = [
    url(r‘^admin/‘, admin.site.urls),

    url(r‘^img/$‘, img.Img.as_view()),

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

    url(r‘^media/(?P<path>.*)‘,serve,{‘document_root‘:settings.MEDIA_ROOT}),


]

四 vue頁面跳轉

<template>
    <div class="courseDetail">
        <h1>我是courseDetail頁面</h1>
        <!--{{course_detail}}-->

        <div>
            <h3>{{course_detail.course_name}}</h3>
            <h3>{{course_detail.course_slogan}}</h3>
            <p v-for="teacher in course_detail.teachers"><span>
        {{teacher.name}}:{{teacher.brief}}
      </span>
            </p>
            <h2>推薦課程</h2>
            <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) {
                    console.log(response.data);
                    console.log(response.data.data);
                    _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);
                this.course_id = to.params.id;
                this.init()
            }
        }

    }


</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>

Django-vue之emement-ui,綁定圖片,頁面掛載,路由跳轉