【实战项目】Django-Vue011---课程详情页面前端、课程详情后台、视频托管、搜索课程功能、支付宝支付介绍

初遇我ㄖ寸の热情呢？

已于 2023-12-07 16:37:13 修改

阅读量94

点赞数

分类专栏：【测试开发】Django-Vue项目开发---知识点细讲文章标签： django 音视频前端

于 2023-03-04 20:16:06 首次发布

本文链接：https://blog.csdn.net/qq_37615098/article/details/129338548

版权

【测试开发】Django-Vue项目开发---知识点细讲专栏收录该内容

13 篇文章

订阅专栏

课程详情页面前端

视频播放功能

	第三方插件：vue-video-player

使用步骤

	第一步：
		安装：cnpm install vue-video-player --S 或
			cnpm install vue-video-player --save
			cnpm install vue-video-player@5.0.2 --S     （我装的这个版本，没有问题。不指定版本的话，可能会报错）
	第二步：在main.js中引入
	    require('video.js/dist/video-js.css');
	    require('vue-video-player/src/custom-theme.css');
	    import VideoPlayer from 'vue-video-player'
	    Vue.use(VideoPlayer);

在这里插入图片描述

	第三步：把静态资源（图片）放到assrts/img文件夹
		enum.svg
		chapter-player.svg
		cart-yellow.svg

写一个课程相亲页面组件

	现在需要在ActualCourse页面点击课程，跳转到课程详情页面来，就需要传一个课程ID

在这里插入图片描述

	现在就是需要跳转到这个页面的时候，把课程的id带过来

前端路由跳转

在html中这样实现

		写一个<router-link to='/detail'>点我看妹子</router-link>

在这里插入图片描述

在js中这样实现

		上面的方式是在html里面跳转的，还可以在js里面跳转，可以给h3标签加一个事件，在methods里面写一个方法对着这个事件，这个方法里面就写
		this.$router.push('/detail')

在这里插入图片描述

	现在就来到了CourseDetail.vue这个组件上面了

前端路由跳转时，携带参数

方式一：

src/router/index.js中配置

		    {
		        path: '/course/detail/:pk', //http://localhost:8080/course/detail/3
		        name: 'CourseDetail',
		        component: CourseDetail
		    }, //配置路由
		在路由跳转的时候
			<router-link to='/course/detail/2'>点我看妹子</router-link>
		在详情页面
			this.$route.params.pk，就可以拿到上面的2

在这里插入图片描述

方式二：

还有一种方式是通过问号的方式来传：http://localhost:8080/course/detail/?pk=2

			这样的话，路由得改一下

在这里插入图片描述

	这个项目中，我们使用第一种，现在在课程详情页，可以获取到课程id了

前端this. $ro u t er 和 t hi s .$ route的区别？

	就不是一个东西
	this.$router是路由对象，能够实现路由的跳转
		this.$router.push("/home")
		this.$router.go("/home")

课程详情后台

实现两个接口

根据id查看课程详情接口
根据课程id查询该课程所有的章节（章节中带课时）

根据id查看课程详情接口

	我们上面已经实现了，查询所有课程的接口已经实现了，现在要实现查询单个课程的接口，只需要加一个单词就可以了

在这里插入图片描述

	这样就可以了

在这里插入图片描述

	现在这个里面缺少难度等级

在这里插入图片描述

	可以在models里面重写一个方法

在这里插入图片描述

根据课程id查询该课程所有的章节

在这里插入图片描述

	现在需要添加这个里面的数据
	就是查询所有的课程章节，再根据课程id过滤

在这里插入图片描述

	章节(CourseChapter)和课时(CourseSection)是一对多的关系，关联字段在多的一方(CourseSection)。章节查课时是反向查询，用表名小写_set,
	在课时(CourseSection)表中chapter字段有related_name='coursesections'，所以反向查询的时候，直接用coursesections

在这里插入图片描述

	上面是用子序列化实现的（多条的时候，需要加一个many=True）

在这里插入图片描述

视频托管

现在网站上面有视频，视频可以放在项目里面，但是如果有并发的话，都在播放视频，那么网站的带宽容易达到瓶颈，所以需要有一个第三方的视频托管
后面只要用第三方的带宽，后面只要钱够，再多的视频都可以

在这里插入图片描述

第三方文件服务器

	阿里oss
	七牛云（国内go语言的推崇者）
	腾讯

大规模公司，不用第三方（自建文件存储）

	ceph
	Fastdfs
	minio(分布式文件存储)

用七牛云

在这里插入图片描述

	但是这种上传不好，需要自己的后台跟他的文档sdk对接

在这里插入图片描述

	把这个地址复制了之后，放在项目里面，可以放在表里面
	可以通过人家提供的sdk，用代码上传到七牛云
	参考：https://developer.qiniu.com/kodo/1242/python

代码：

from qiniu import Auth
q = Auth("JpRJVI2xXqUtFKpoSdlCfseRIVbf0jNv7g0fhEHQ", "1Qiqh_zAXXYPMFAaNQrof_lQbp8jUqLBPG1M7I-7")
# -*- coding: utf-8 -*-
# flake8: noqa
from qiniu import Auth, put_file, etag
import qiniu.config
#需要填写你的 Access Key 和 Secret Key
access_key = 'Access_Key'
secret_key = 'Secret_Key'
#构建鉴权对象
q = Auth(access_key, secret_key)
#要上传的空间
bucket_name = 'testxxff'
#上传后保存的文件名
key = '1.mp4'
#生成上传 Token，可以指定过期时间等
token = q.upload_token(bucket_name, key, 3600)
#要上传文件的本地路径
localfile = 'D:\py_project\luffy_api\luffy_api\media\春节序曲.mp4'
ret, info = put_file(token, key, localfile, version='v2')
print(info)
assert ret['key'] == key
assert ret['hash'] == etag(localfile)

搜索课程功能

页面上都有一个搜索框，放在头部组件里面的，好要有一个搜索页面
后端需要配合一个接口

在这里插入图片描述

现在需要后端配合一个搜索的接口

在这里插入图片描述

如果想全文检索-----> 只要在brief中有关键字，就能搜索出来------> 类似于百度
如果使用mysql的like搜索，数据量越大，速度越慢
后面我们可以使用专业的搜索引擎 -----> Elasticsearch：ES  分布式全文搜索引擎

支付宝支付介绍

购买课程，付款
付款：支付宝付款、微信支付、银联支付
	申请使用支付宝支付，需要有一个商户号（用户把钱付到商户号里面去了，提现到银行卡的时候，需要扣手续费）
		（不需要营业执照也可以申请，需要拍一个门头）
	我们开发的时候，就需要商户号、公钥、私钥就行
	开发测试阶段，使用支付宝提供的沙箱环境（测试环境），可以无限花钱
支付宝沙箱环境
	https://openhome.alipay.com/platform/appDaily.htm?tab=info
	扫码可以进入支付宝的沙箱环境，实名认证一下
	下载app后
		买家账号：tivtyq1690@sandbox.com
		登录密码：111111
		支付密码：111111

支付宝支付的流程
	咱们网站点击立即购买----》跳转到支付宝支付页面----》手机扫码（手动输入用户名密码）----》把钱付给了支付宝（你商户中了）---》跳转回咱们自己的网站支付成功页面---》支付宝会回调我们的地址，携带订单号，我们的项目通过订单号，修改订单状态即可（从待支付修改为已支付）

支付宝支付的开发流程
	前端点击立即购买（需要登录）
	调咱们项目的下单接口---》生成订单（订单状态是待支付）---》返回支付连接
	前端拿到支付连接---》跳转到支付连接（支付宝地址）
	用户付款完成后，支付宝会回调到我们的前端（get回调）---》我们在前端显示支付成功
	支付宝还有一个post回调---》我们项目需要配合一个接口---》修改订单状态（已支付）

咱们要写的接口
	下单接口
    支付宝的post回调接口
    我们前端支付成功回调接口（不着急）

支付宝官方提供了：API和SDK（没有python的sdk，有API，但是比较麻烦）
	第三方封装了SDK
		https://github.com/fzlee/alipay
		pip install python-alipay-sdk
    下载，生成支付连接
    生成公钥和私钥（https://openhome.alipay.com/develop/sandbox/app）
		公钥
		私钥
    使用自己的私钥和支付宝公钥（***********）

    支付宝支付测试：
        https://openhome.alipay.com/develop/sandbox/app
        生成一个支付链接看看是不是可以使用

在这里插入图片描述

代码：

# 支付demo
from alipay import AliPay
from alipay.utils import AliPayConfig

# 应用私钥字符串
app_private_key_string = open(".\sy").read()
# 支付宝公钥字符串
alipay_public_key_string = open(".\zfbgy").read()
alipay = AliPay(
	appid="2021000122611646",  #
	app_notify_url=None,  # the default notify path
	app_private_key_string=app_private_key_string,
	alipay_public_key_string=alipay_public_key_string,
	sign_type="RSA2",  # RSA or RSA2
	debug=True,  # False by default
	verbose=False,  # useful for debugging
	config=AliPayConfig(timeout=15)  # optional, request timeout
)

res = alipay.api_alipay_trade_page_pay(
	subject='萎靡内衣',
	out_trade_no='100010101010',
	total_amount=float(9999),  # 只有生成支付宝链接时，不能用Decimal
	return_url='http://10.103.47.193:8080/actual-course',  # get回调
	notify_url='http://10.103.47.193:8080/actual-course',  # post回调
)
print('https://openapi.alipaydev.com/gateway.do?' + res)