网站注册平台怎么注册,申请空间 建立网站吗,阿里云 wordpress主机,义乌对外寻找代加工文章目录 前言一、课程列表页面a.后端代码b.前端代码 二、课程详情页面a. 视频播放功能的集成1.获取上传视频的链接地址2.集成在前端页面中1使用vue-alipayer视频播放组件2使用video标签 b. 页面主要内容展示1.后端代码1分析表2核心逻辑 2.前端代码3.效果图 前… 文章目录 前言一、课程列表页面a.后端代码b.前端代码 二、课程详情页面a. 视频播放功能的集成1.获取上传视频的链接地址2.集成在前端页面中1使用vue-alipayer视频播放组件2使用video标签 b. 页面主要内容展示1.后端代码1分析表2核心逻辑 2.前端代码3.效果图 前言 随着数字化教育的兴起构建一个高效、用户友好的线上教育平台至关重要。本文将探讨如何使用Django与Vue.js 3结合实现一个包含课程列表和课程详情页含视频播放功能的线上教育平台部分。本文主要介绍了如何设计数据库模型、处理数据查询、构建动态前端界面并集成视频播放功能为用户带来流畅的学习体验。 一、课程列表页面 获取所有一级分类获取所有二级分类获取所有课程(课程分页处理)点击方向和分类时获取此方向或者此分类下的数据信息 页面展示 a.后端代码 url配置信息 path(nav/cates/, CategoryView.as_view()), #课程列表页面 /project-方向/一级分类 ----- 侧边栏-获取一二级分类 -path(nav/category/, CateView.as_view()), #课程列表页面 /project-二级分类#课程列表页面 / projectpath(courseSearch/, CourseSearch.as_view()), # /project页面--搜索课程---获取方向、分类及课程信息 # 2.获取一、二级分类
class CategoryView(APIView):def get(self, request):# 查询所有一级分类parent is null# query_setcategories CategoryModel.objects.filter(is_delete0,parent__id__isnullTrue) #query_setclist [] #侧边栏 二级分类显示几个for category in categories:# 获取一级下面所有的二级分类操作显示二级分类数据条数sondata category.son.all()[0:2] #query_set# d对二级数据进行序列化操作son SonCategorySerializer(sondata, manyTrue)clist.append({id: category.id, name: category.name, son: son.data})return Response({code:200, data:clist})# 2.2 categoryId指定类别时展示categoryId的子分类
# 获取project页面的二级分类
class CateView(APIView):def get(self, request):categoryId int(request.GET.get(categoryId))print(categoryId)if categoryId:category CategoryModel.objects.filter(is_deleteFalse, parent_idcategoryId).all()else:category CategoryModel.objects.filter(is_deleteFalse, parent_id__isnullFalse).all()cates SonCategorySerializer(category, manyTrue)return Response({cood: 200, cateList: cates.data})# 8.搜索课程
class CourseSearch(APIView):def get(self,request):topId int(request.GET.get(topId))cid int(request.GET.get(cid))page int(request.GET.get(page))pageSize int(request.GET.get(pageSize))print(page,pageSize)if topId:course CourseModel.objects.filter(topidtopId)if cid:course CourseModel.objects.filter(parent_idcid)if not topId and not cid:course CourseModel.objects.all()courseTotal CourseSerializer(course,manyTrue)coursePage Paginator(course, pageSize)courseList CourseSerializer(coursePage.get_page(page),manyTrue)return Response({code: 200,pagetion:{page:page,pageSize:pageSize,total:len(courseTotal.data)},cousers: courseList.data})b.前端代码 主要代码方向、分类、课程的获取与展示- src/views/Course.vue div classtypediv classtype-wrap!-- 方向 --div classone warpspan classname方向/spanul classitemsli :class{cur: course.current_direction 0}a href click.preventcourse.current_direction0全部/a/lili :class{cur: course.current_direction direction.id} v-fordirection in category.dataa href click.preventcourse.current_directiondirection.id{{direction.name}}/a/li/ul/div!-- 分类 --div classtwo warpspan classname分类/spanul classitemsli :class{cur: course.current_category 0}a href click.preventcourse.current_category0不限/a/lili :class{cur: course.current_category category.id} v-forcategory in category.cateLista href click.preventcourse.current_categorycategory.id{{category.name}}/a/li/ul/div/div
/div!-- Main课程部分 --
div classmaindiv classmain-wrapdiv classfilter clearfixdiv classsort la href :class{on:course.ordering-id} click.prevent.stopcourse.ordering(course.ordering-id?:-id)最新/aa href :class{on:course.ordering-students} click.prevent.stopcourse.ordering(course.ordering-students?:-students)销量/aa href :class{on:course.ordering-orders} click.prevent.stopcourse.ordering(course.ordering-orders?:-orders)推荐/a/divdiv classother r clearfixa classcourse-line l href target_blank学习路线/a/div/divul classcourse-list clearfix!-- 遍历展示课程信息 --li classcourse-card v-forcourse_info in category.course_listrouter-link :to/project/${course_info.id}div classimgimg :srccourse_info.picurl alt/divp classtitle ellipsis2{{course_info.name}}/pp classonespan{{ course_info.level }} · {{ course_info.sales }}人报名/span/pp classtwo clearfixspan classprice l red bold v-ifcourse_info.price ! undefined{{parseFloat(course_info.price).toFixed(2)}}/spanspan classprice l red bold v-else{{parseFloat(course_info.price).toFixed(2)}}/spanspan classorigin-price l delete-line v-ifcourse_info.price ! undefined{{parseFloat(course_info.price).toFixed(2)}}/spanel-popconfirm title您确认添加当前课程加入购物车吗 confirm.prevent.stopadd_course_to_cart(course_info) confirmButtonText买买买 cancelButtonText误操作template #referencespan classadd-shop-cart r click.stop.preventimg classicon imv2-shopping-cart src../assets/cart2.svg加购物车/span/template/el-popconfirm/p/router-link/li/ul!-- 分页功能 --div classpagediv styleposition: absolute;left: 50%;transform: translateX(-50%)el-paginationstylemargin: auto background layoutprev, pager, next:totalcategory.pageTion.total:page-sizecategory.pageTion.pageSizecurrent-changechange//div/div/div
/divimport category from ../api/cetory.js;//category.get_category();
category.search_course(0, 0,pageTion);
category.get_cate(0); src/api/cetory.js import { reactive } from vue;
import http from ../http;
const category reactive({data: [], // 方向 / 一级分类course_list: [], // 课程信息cateList: [], //二级分类pageTion: {}, // 分页get_category(id) {return http.get(/home/nav/cates/, { params: { cateid: id } }).then(response {//课程列表页面-project-获取方向一级分类// console.log(response.data.data*************/home/nav/cates/******************);// console.log(response.data.data);this.data response.data.data;})},get_cate(categoryId) {return http.get(/home/nav/category/, { params: { categoryId: categoryId } }).then(response {//课程列表页面-project-获取二级分类// console.log(response.data*********************/home/nav/category/***************************);// console.log(response.data);this.cateList response.data.cateList;})},// 分页、搜索对应方向或分类的课程topid--方向cid--分类search_course(topId, cid, page) {const params {topId: topId,cid: cid,page: page.page,pageSize: page.pageSize}return http.get(/home/courseSearch/, { params }).then(response {console.log(response.data****************/home/courseSearch/*********************);console.log(response.data);this.course_list response.data.cousers;this.pageTion response.data.pagetion;})},
})export default category;
二、课程详情页面
a. 视频播放功能的集成 这里以七牛云服务器 存储视频 vue-alipayer视频播放组件为例实现视频播放功能 七牛云官网地址https://www.qiniu.com/vue-alipayer视频播放组件地址https://github.com/liho98/vue-aliplayer-v2 演示效果https://player.alicdn.com/aliplayer/index.html 1.获取上传视频的链接地址 具体操作步骤如下 1.七牛云注册登录https://www.qiniu.com/2.点击对象存储 3.创建存储空间 4.创建成功 5.上传一段视频用于在课程详情页面展示 6.视频上传成功 7.查看文件详情可获得文件链接 2.集成在前端页面中
1使用vue-alipayer视频播放组件 AliPlayerV3refplayerclassh-64 md:h-96 w-full rounded-lgstyleheight: 100%; width: 100%;:sourcecourse.info.course[0].video_url:covercourse.info.course_cover:optionsoptionsplayonPlay($event)pauseonPause($event)playingonPlaying($event)/source属性绑定的值存放视频播放地址。通过向后端发送请求获取数据库中的数据 页面效果如下图 2使用video标签 可参考菜鸟教程https://www.runoob.com/html/html-videos.html 示例代码 video width320 height240 controlssource srchttp://sgigui51q.hb-bkt.clouddn.com/scenery.mp4 typevideo/mp4
/video b. 页面主要内容展示
1.后端代码
1分析表 1.课程表CourseModel 新加字段total_jie总节数、hours总时长、vide_url课程总介绍、question常见问题 2.课程章表 字段id、名称、课程id外键、总节数、时间用于页面展示、总时长秒 3.课程节表 字段id、名称、课程id、章id外键、视频id、时间、时长秒 4.教师表课程表teacher字段关联教师表 字段id、姓名、头像、介绍、教授的课程 5.用户表 字段id、用户名、手机号、密码、积分、头像、个性签名 6.评价表 字段id、userid外键、courseid外键、评价、评分 7.回复表 字段id、回复人id用户id、评价id外键、内容 2核心逻辑
# 0.课程详情
class CourseDetailView(APIView):def get(self, request, id):r.delete_str(testdata)# 先取一下缓存test_data r.get_str(testdata)if test_data:# 序列化 str--jsontest_data json.loads(test_data)return Response({message:test111111,data:test_data})course_list CourseModel.objects.filter(idid)ser CourseSerializer(course_list, manyTrue)# 放入缓存 json--strr.set_str(testdata,json.dumps(ser.data))return Response({message:test22222222222,code:200,data:ser.data})# 1.获取章节信息
class ChaptersView(APIView):def get(self, request, id):# 根据课程id查对应章节course CourseModel.objects.filter(idid).first()# course chapterschapt course.chapters.all()ser ChaptersSerializer(chapt, manyTrue)return Response({code: 200, data: ser.data})#2.评论及其回复
class CommentView(APIView):def get(self, request, id):# id--- 课程id ---对应查询课程下面的评论comments CommentModel.objects.filter(course_idid)comments_ser CommentsSerializer(comments, manyTrue)return Response({code: 200, data: comments_ser.data})
2.前端代码 课程详情页面src/views/Info.vue templatediv classdetailHeader/!-- 主体内容 --div classmain!-- 课程详情 -上半部分 --div classcourse-infodiv classwrap-left!-- 视频播放器 --AliPlayerV3refplayerclassh-64 md:h-96 w-full rounded-lgstyleheight: 100%; width: 100%;:sourcecourse.info.course[0].video_url:covercourse.info.course_cover:optionsoptionsplayonPlay($event)pauseonPause($event)playingonPlaying($event)//divdiv classwrap-righth3 classcourse-name{{course.info.course[0].name}}/h3p classdata{{course.info.course[0].sales}}人在A学nbsp;nbsp;nbsp;nbsp;课程总时长{{course.info.pub_lessons}}课时/{{course.info.lessons}}课时nbsp;nbsp;nbsp;nbsp;难度{{course.info.course[0].level}}/pdiv classsale-time v-if!course.info.discount.typep classsale-type课程价格 ¥{{parseFloat(course.info.course[0].price).toFixed(2)}}/p/divp classcourse-price v-ifcourse.info.discount.price ! undefinedspan活动价/spanspan classdiscount¥{{parseFloat(course.info.discount.price).toFixed(2)}}/spanspan classoriginal¥{{parseFloat(course.info.price).toFixed(2)}}/span/pp classcourse-price v-ifcourse.info.credit0span抵扣积分/spanspan classdiscount{{course.info.credit}}/span/pdiv classbuydiv classbuy-btnbutton classbuy-now立即购买/buttonbutton classfree免费试学/button/divel-popconfirm title您确认添加当前课程加入购物车吗 confirmadd_course_to_cart confirmButtonText买买买 cancelButtonText误操作template #referencediv classadd-cartimg src../assets/cart-yellow.svg alt加入购物车/div/template/el-popconfirm/div/div/div!-- 课程标签、课程选项卡 -中间部分 --div classcourse-tabul classtab-listli :classcourse.tabIndex1?active: clickcourse.tabIndex1详情介绍/lili :classcourse.tabIndex2?active: clickcourse.tabIndex2课程章节 span :classcourse.tabIndex!2?free: v-ifcourse.info.can_free_study(试学)/span/lili :classcourse.tabIndex3?active: clickcourse.tabIndex3用户评论 /lili :classcourse.tabIndex4?active: clickcourse.tabIndex4常见问题/li/ul/div!-- 课程内容 -章节-下半部分 --!-- 章节{{course.chapter_list[0].name}} --div classcourse-content!-- 选项卡-内容 --div classcourse-tab-list!-- 选项卡1详情介绍 --div classtab-item v-ifcourse.tabIndex1 v-htmlcourse.info.course[0].describe/div!-- 选项卡2课程章节 --div classtab-item v-ifcourse.tabIndex2div classtab-item-titlep classchapter课程章节/pp classchapter-length共{{course.chapter_list.length}}章 {{course.info.course[0].hours}}个课时/p/divdiv classchapter-item v-forchapter,index in course.chapter_list :keyindexp classchapter-titleimg src../assets/1.svg alt第{{chapter.id}}章·{{chapter.name}}/pdiv classchapter-title stylepadding-left: 2.4rem; v-ifchapter.summary v-htmlchapter.summary/div!-- jie:{{chapter.sections}} --ul classlesson-listli classlesson-item v-forlesson,index in chapter.sections :keyindexp classnamespan classindex{{chapter.orders}}-{{lesson.orders}}/span{{lesson.name}}span classfree v-iflesson.free_trail免费/span/pp classtime{{lesson.duration}} img src../assets/chapter-player.svg/pbutton classtry v-iflesson.free_trail立即试学/buttonbutton classtry v-else购买课程/button/li/ul/div/div!-- 选项卡3用户评论 --div classtab-item v-ifcourse.tabIndex3h2用户评论/h2div classteacher-contentdiv classcont1img styleborder-radius: 50%; :srccourse.comments_list[0].user.avatarp classteacher-name{{course.comments_list[0].user.username}}/p/divdiv classnarrative v-htmlcourse.comments_list[0].message/div /div/div!-- 选项卡4常见问题 --div classtab-item v-ifcourse.tabIndex4h2常见问题/h2div v-htmlcourse.info.course[0].question/div/div/div!-- 课程旁边的老师 --!-- 教师{{course.info.course[0].teacher}} --div classcourse-sidediv classteacher-infoh4 classside-titlespan授课老师/span/h4div classteacher-contentdiv classcont1img styleborder-radius: 50%; :srccourse.info.course[0].teacher.avatardiv classnamep classteacher-name{{course.info.course[0].teacher.name}}/pp classteacher-title{{course.info.course[0].teacher.get_role_display}}角色教师教授的课程{{course.info.course[0].teacher.courses}}/p/div/divdiv classnarrative v-htmlcourse.info.course[0].teacher.introduce/div/div/div/div/div/divFooter//div
/template课程详情src/api/course.js get_course() {// 获取课程详情return http.get(/info/courses/${this.course_id}/).then(response {console.log(response.data:**************/info/courses/*******************);console.log(response.data);this.info.course response.data.data;return this.get_course_chapters();})},get_course_chapters() {// 获取指定课程的章节列表return http.get(/info/chapters/${this.course_id}/).then(response {// console.log(response.data---*******************/info/chapters********************);// console.log(response.data);this.chapter_list response.data.data;})},get_comments_list() {// 获取对应课程下面的评论信息return http.get(/info/comments/${this.course_id}/).then(response {console.log(response.data-----------/info/comments/*****************);console.log(response.data);console.log(response.data.data);this.comments_list response.data.data;})},
3.效果图 详情介绍 课程章节 用户评论 常见问题
