一 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>