路飞学城项目之课程搜索关键字接口及支付宝支付功能

一切随心走_水瓶

于 2021-01-14 20:07:48 发布

阅读量1.2k

点赞数

分类专栏： python 文章标签： python django

本文链接：https://blog.csdn.net/wcg920212/article/details/112614422

版权

python 专栏收录该内容

107 篇文章 7 订阅

订阅专栏

本文介绍了Django中实现搜索关键字接口的后端逻辑，包括根据课程标题和简介进行搜索，并展示了前端路由配置、视图函数、序列化器和模板的详细代码。此外，详细讲解了支付宝支付功能，包括支付接口、公钥私钥配置、Python二次封装包aliapy的使用，以及支付流程和回调接口配置。文章提供了完整的代码示例和配置步骤。

摘要由CSDN通过智能技术生成

文章目录

1、课程之搜索关键字接口

1、需要写搜索的后端接口(直接去数据库查)
  根据课程标题(要有搜索关键字)
  根据课程简介(要有搜索关键字)
2、专业的搜索引擎(ES: 专注于大数据量的搜索)

路由配置

router.register('search', views.CourseSearchCourseView, basename='CourseSearchCourseView')

视图函数

class CourseSearchCourseView(GenericViewSet, ListModelMixin):
    queryset = models.Course.objects.filter(is_show=True, is_delete=False).all()
    serializer_class = serializer.CourseSerializer
    filter_backends = [SearchFilter]
    search_fields = ['name', 'brief']
    pagination_class = pageNumber.PageNumber

序列化器

还是使用课程的序列化器CourseSerializer

class CourseSerializer(serializers.ModelSerializer):
    teacher = TeacherSerializer(many=False)

    class Meta:
        model = models.Course
        fields = (
            'id',
            'name',
            'course_img',
            'brief',
            'attachment_path',
            'pub_sections',
            'price',
            'students',
            'period',
            'sections',
            'course_type_name',
            'level_name',
            'status_name',
            'teacher',
            'section_list',
        )

前端展示

// 路由配置: index.js
import SearchCourse from "../views/SearchCourse";
{
    path: '/course/search',
    name: 'SearchCourse',
    component: SearchCourse,
}

<!--Header.vue-->

<template>
    <div class="header">
        <div class="slogan">
            <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
        </div>
        <div class="nav">
            <ul class="left-part">
                <li class="logo">
                    <router-link to="/">
                        <img src="../assets/img/head-logo.svg" alt="">
                    </router-link>
                </li>
                <li class="ele">
                    <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
                </li>
                <li class="ele">
                    <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
                </li>
                <li class="ele">
                    <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
                </li>
            </ul>

            <div class="right-part" v-if="username">
                <span>{{username}}</span> |
                <span @click="logout">注销</span>
            </div>
            <div class="right-part" v-else>
                <span @click="put_login">登录</span> |
                <span @click="put_register">注册</span>
                <Login v-if="is_login" @close="close_login" @go="put_register"/>
                <Register v-if="is_register" @close="close_register" @go="put_login"/>
            </div>
        </div>
        <form class="search">
            <div class="tips" v-if="is_search_tip">
                <span @click="search_action('Python')">Python</span>
                <span @click="search_action('Linux')">Linux</span>
            </div>
            <input type="text" :placeholder="search_placeholder" @focus="on_search" @blur="off_search"
                   v-model="search_word">
            <button type="button" class="glyphicon glyphicon-search" @click="search_action(search_word)">搜索</button>
        </form>
    </div>
</template>

<script>
    import Login from "./Login";
    import Register from "./Register";

    export default {
        name: "Header",
        data() {
            return {
                //sessionStorage中有url_path就使用它，没有就是 /
                url_path: sessionStorage.url_path || '/',
                is_login: false,
                is_register: false,
                username: '',
                is_search_tip: true,
                search_placeholder: '',
                search_word: ''
            }
        },
        methods: {
            goPage(url_path) {
                // 已经是当前路由就没有必要重新跳转
                if (this.url_path !== url_path) {
                    //js控制路由跳转
                    this.$router.push(url_path);
                }
                //把当前路径加入到了sessionStorage
                sessionStorage.url_path = url_path;

            },
            put_login() {
                this.is_login = true;
                this.is_register = false;
            },
            put_register() {
                this.is_login = false;
                this.is_register = true;
            },
            close_login() {
                this.is_login = false;
                this.username = this.$cookies.get('username')
            },
            close_register() {
                this.is_register = false;
            },
            logout() {
                //清空cookie
                this.$cookies.remove('username')
                this.$cookies.remove('token')
                this.$cookies.remove('icon')
                this.$cookies.remove('id')
                //清空username
                this.username = '';
            },
             search_action(search_word) {
                if (!search_word) {
                    this.$message('请输入要搜索的内容');
                    return
                }
                if (search_word !== this.$route.query.word) {
                    this.$router.push(`/course/search?word=${search_word}`);
                }
                this.search_word = '';
            },
            on_search() {
                this.search_placeholder = '请输入想搜索的课程';
                this.is_search_tip = false;
            },
            off_search() {
                this.search_placeholder = '';
                this.is_search_tip = true;
            },
        },
        created() {
            this.username = this.$cookies.get('username')
        },
        components: {
            Login,
            Register,
        }
    }
</script>

<style scoped>
    .header {
        background-color: white;
        box-shadow: 0 0 5px 0 #aaa;
    }

    .header:after {
        content: "";
        display: block;
        clear: both;
    }

    .slogan {
        background-color: #eee;
        height: 40px;
    }

    .slogan p {
        width: 1200px;
        margin: 0 auto;
        color: #aaa;
        font-size: 13px;
        line-height: 40px;
    }

    .nav {
        background-color: white;
        user-select: none;
        width: 1200px;
        margin: 0 auto;

    }

    .nav ul {
        padding: 15px 0;
        float: left;
    }

    .nav ul:after {
        clear: both;
        content: '';
        display: block;
    }

    .nav ul li {
        float: left;
    }

    .logo {
        margin-right: 20px;
    }

    .ele {
        margin: 0 20px;
    }

    .ele span {
        display: block;
        font: 15px/36px '微软雅黑';
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

    .ele span:hover {
        border-bottom-color: orange;
    }

    .ele span.active {
        color: orange;
        border-bottom-color: orange;
    }

    .right-part {
        float: right;
    }

    .right-part .line {
        margin: 0 10px;
    }

    .right-part span {
        line-height: 68px;
        cursor: pointer;
    }

    .search {
        float: right;
        position: relative;
        margin-top: 22px;
        margin-right: 10px;
    }

    .search input, .search button {
        border: none;
        outline: none;
        background-color: white;
    }

    .search input {
        border-bottom: 1px solid #eeeeee;
    }

    .search input:focus {
        border-bottom-color: orange;
    }

    .search input:focus + button {
        color: orange;
    }

    .search .tips {
        position: absolute;
        bottom: 3px;
        left: 0;
    }

    .search .tips span {
        border-radius: 11px;
        background-color: #eee;
        line-height: 22px;
        display: inline-block;
        padding: 0 7px;
        margin-right: 3px;
        cursor: pointer;
        color: #aaa;
        font-size: 14px;

    }

    .search .tips span:hover {
        color: orange;
    }
</style>

<!--SearchCourse.vue-->
<template>
    <div class="search-course course">
        <Header/>
        <!-- 课程列表 -->
        <div class="main">
            <div v-if="course_list.length > 0" class="course-list">
                <h1 v-if="course_list.length > 0">共有{{course_total}}门课程</h1>
                <div class="course-item" v-for="course in course_list" :key="course.name">
                    <div class="course-image">
                        <img :src="course.course_img" alt="">
                    </div>
                    <div class="course-info">
                        <h3>
                            <router-link :to="'/free/detail/'+course.id">{{course.name}}</router-link>
                            <span><img src="@/assets/img/avatar1.svg" alt="">{{course.students}}人已加入学习</span></h3>
                        <p class="teather-info">
                            {{course.teacher.name}} {{course.teacher.title}} {{course.teacher.signature}}
                            <span v-if="course.sections>course.pub_sections">共{{course.sections}}课时/已更新{{course.pub_sections}}课时</span>
                            <span v-else>共{{course.sections}}课时/更新完成</span>
                        </p>
                        <ul class="section-list">
                            <li v-for="(section, key) in course.section_list" :key="section.name"><span
                                    class="section-title">0{{key+1}}  |  {{section.name}}</span>
                                <span class="free" v-if="section.free_trail">免费</span></li>
                        </ul>
                        <div class="pay-box">
                            <div v-if="course.discount_type">
                                <span class="discount-type">{{course.discount_type}}</span>
                                <span class="discount-price">￥{{course.real_price}}元</span>
                                <span class="original-price">原价：{{course.price}}元</span>
                            </div>
                            <span v-else class="discount-price">￥{{course.price}}元</span>
                            <span class="buy-now">立即购买</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else style="text-align: center; line-height: 60px">
                没有搜索结果
            </div>
            <div class="course_pagination block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="filter.page"
                        :page-sizes="[2, 3, 5, 10]"
                        :page-size="filter.page_size"
                        layout="sizes, prev, pager, next"
                        :total="course_total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '../components/Header'

    export default {
        name: "SearchCourse",
        components: {
            Header,
        },
        data() {
            return {
                course_list: [],
                course_total: 0,
                filter: {
                    page_size: 10,
                    page: 1,
                    search: '',
                }
            }
        },
        created() {
            this.get_course()
        },
        watch: {
            '$route.query'() {
                this.get_course()
            }
        },
        methods: {
            handleSizeChange(val) {
                // 每页数据量发生变化时执行的方法
                this.filter.page = 1;
                this.filter.page_size = val;
            },
            handleCurrentChange(val) {
                // 页码发生变化时执行的方法
                this.filter.page = val;
            },
            get_course() {
                // 获取搜索的关键字
                this.filter.search = this.$route.query.word || this.$route.query.wd;

                // 获取课程列表信息
                this.$axios.get(`${this.$settings.base_url}/course/search/`, {
                    params: this.filter
                }).then(response => {
                    // 如果后台不分页，数据在response.data中；如果后台分页，数据在response.data.results中
                    this.course_list = response.data.results;
                    this.course_total = response.data.count;
                }).catch(() => {
                    this.$message({
                        message: "获取课程信息有误，请联系客服工作人员"
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .course {
        background: #f6f6f6;
    }

    .course .main {
        width: 1100px;
        margin: 35px auto 0;
    }

    .course .condition {
        margin-bottom: 35px;
        padding: 25px 30px 25px 20px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px 0 #f0f0f0;
    }

    .course .cate-list {
        border-bottom: 1px solid #333;
        border-bottom-color: rgba(51, 51, 51, .05);
        padding-bottom: 18px;
        margin-bottom: 17px;
    }

    .course .cate-list::after {
        content: "";
        display: block;
        clear: both;
    }

    .course .cate-list li {
        float: left;
        font-size: 16px;
        padding: 6px 15px;
        line-height: 16px;
        margin-left: 14px;
        position: relative;
        transition: all .3s ease;
        cursor: pointer;
        color: #4a4a4a;
        border: 1px solid transparent; /* transparent 透明 */
    }

    .course .cate-list .title {
        color: #888;
        margin-left: 0;
        letter-spacing: .36px;
        padding: 0;
        line-height: 28px;
    }

    .course .cate-list .this {
        color: #ffc210;
        border: 1px solid #ffc210 !important;
        border-radius: 30px;
    }

    .course .ordering::after {
        content: "";
        display: block;
        clear: both;
    }

    .course .ordering ul {
        float: left;
    }

    .course .ordering ul::after {
        content: "";
        display: block;
        clear: both;
    }

    .course .ordering .condition-result {
        float: right;
        font-size: 14px;
        color: #9b9b9b;
        line-height: 28px;
    }

    .course .ordering ul li {
        float: left;
        padding: 6px 15px;
        line-height: 16px;
        margin-left: 14px;
        position: relative;
        transition: all .3s ease;
        cursor: pointer;
        color: #4a4a4a;
    }

    .course .ordering .title {
        font-size: 16px;
        color: #888;
        letter-spacing: .36px;
        margin-left: 0;
        padding: 0;
        line-height: 28px;
    }

    .course .ordering .this {
        color: #ffc210;
    }

    .course .ordering .price {
        position: relative;
    }

    .course .ordering .price::before,
    .course .ordering .price::after {
        cursor: pointer;
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        border: 5px solid transparent;
        position: absolute;
        right: 0;
    }

    .course .ordering .price::before {
        border-bottom: 5px solid #aaa;
        margin-bottom: 2px;
        top: 2px;
    }

    .course .ordering .price::after {
        border-top: 5px solid #aaa;
        bottom: 2px;
    }

    .course .ordering .price_up::before {
        border-bottom-color: #ffc210;
    }

    .course .ordering .price_down::after {
        border-top-color: #ffc210;
    }

    .course .course-item:hover {
        box-shadow: 4px 6px 16px rgba(0, 0, 0, .5);
    }

    .course .course-item {
        width: 1100px;
        background: #fff;
        padding: 20px 30px 20px 20px;
        margin-bottom: 35px;
        border-radius: 2px;
        cursor: pointer;
        box-shadow: 2px 3px 16px rgba(0, 0, 0, .1);
        /* css3.0 过渡动画 hover 事件操作 */
        transition: all .2s ease;
    }

    .course .course-item::after {
        content: "";
        display: block;
        clear: both;
    }

    /* 顶级元素 父级元素  当前元素{} */
    .course .course-item .course-image {
        float: left;
        width: 423px;
        height: 210px;
        margin-right: 30px;
    }

    .course .course-item .course-image img {
        max-width: 100%;
        max-height: 210px;
    }

    .course .course-item .course-info {
        float: left;
        width: 596px;
    }

    .course-item .course-info h3 a {
        font-size: 26px;
        color: #333;
        font-weight: normal;
        margin-bottom: 8px;
    }

    .course-item .course-info h3 span {
        font-size: 14px;
        color: #9b9b9b;
        float: right;
        margin-top: 14px;
    }

    .course-item .course-info h3 span img {
        width: 11px;
        height: auto;
        margin-right: 7px;
    }

    .course-item .course-info .teather-info {
        font-size: 14px;
        color: #9b9b9b;
        margin-bottom: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid #333;
        border-bottom-color: rgba(51, 51, 51, .05);
    }

    .course-item .course-info .teather-info span {
        float: right;
    }

    .course-item .section-list::after {
        content: "";
        display: block;
        clear: both;
    }

    .course-item .section-list li {
        float: left;
        width: 44%;
        font-size: 14px;
        color: #666;
        padding-left: 22px;
        /* background: url("路径") 是否平铺 x轴位置 y轴位置 */
        background: url("/src/assets/img/play-icon-gray.svg") no-repeat left 4px;
        margin-bottom: 15px;
    }

    .course-item .section-list li .section-title {
        /* 以下3句，文本内容过多，会自动隐藏，并显示省略符号 */
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        max-width: 200px;
    }

    .course-item .section-list li:hover {
        background-image: url("/src/assets/img/play-icon-yellow.svg");
        color: #ffc210;
    }

    .course-item .section-list li .free {
        width: 34px;
        height: 20px;
        color: #fd7b4d;
        vertical-align: super;
        margin-left: 10px;
        border: 1px solid #fd7b4d;
        border-radius: 2px;
        text-align: center;
        font-size: 13px;
        white-space: nowrap;
    }

    .course-item .section-list li:hover .free {
        color: #ffc210;
        border-color: #ffc210;
    }

    .course-item {
        position: relative;
    }

    .course-item .pay-box {
        position: absolute;
        bottom: 20px;
        width: 600px;
    }

    .course-item .pay-box::after {
        content: "";
        display: block;
        clear: both;
    }

    .course-item .pay-box .discount-type {
        padding: 6px 10px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        margin-right: 8px;
        background: #fa6240;
        border: 1px solid #fa6240;
        border-radius: 10px 0 10px 0;
        float: left;
    }

    .course-item .pay-box .discount-price {
        font-size: 24px;
        color: #fa6240;
        float: left;
    }

    .course-item .pay-box .original-price {
        text-decoration: line-through;
        font-size: 14px;
        color: #9b9b9b;
        margin-left: 10px;
        float: left;
        margin-top: 10px;
    }

    .course-item .pay-box .buy-now {
        width: 120px;
        height: 38px;
        background: transparent;
        color: #fa6240;
        font-size: 16px;
        border: 1px solid #fd7b4d;
        border-radius: 3px;
        transition: all .2s ease-in-out;
        float: right;
        text-align: center;
        line-height: 38px;
        position: absolute;
        right: 0;
        bottom: 5px;
    }

    .course-item .pay-box .buy-now:hover {
        color: #fff;
        background: #ffc210;
        border: 1px solid #ffc210;
    }

    .course .course_pagination {
        margin-bottom: 60px;
        text-align: center;
    }
</style>

2、支付宝支付功能

2.1、简单介绍

1、支付宝API: 六大接口
https://docs.open.alipay.com/270/105900/

2、支付宝工作流程(见下图):
https://docs.open.alipay.com/270/105898/

3、支付宝8次异步通知机制(支付宝对我们服务器发送POST请求,索要 success 7个字符)
https://docs.open.alipay.com/270/105902/

1、在沙箱环境下实名认证: https://openhome.alipay.com/platform/appDaily.htm?tab=info
2、电脑网站支付API: https://docs.open.alipay.com/270/105900/
3、完成RSA密钥生成: https://docs.open.alipay.com/291/105971
4、在开发中心的沙箱应用下设置应用公钥: 填入生成的公钥文件中的内容
5、Python支付宝开源框架: https://github.com/fzlee/alipay
   >: pip install python-alipay-sdk --upgrade
6、公钥私钥设置
"""
# alipay_public_key.pem
-----BEGIN PUBLIC KEY-----
支付宝公钥
-----END PUBLIC KEY-----

# app_private_key.pem
-----BEGIN RSA PRIVATE KEY-----
用户私钥
-----END RSA PRIVATE KEY-----
"""
7、支付宝链接
开发: https://openapi.alipay.com/gateway.do
沙箱: https://openapi.alipaydev.com/gateway.do

在这里插入图片描述

2.2、aliapy二次封装包

2.2.1、GitHub开源框架

https://github.com/fzlee/alipay

2.2.2、依赖

pip install python-alipay-sdk --upgrade
# 如果抛ssl相关错误,代表缺失该包
>: pip install pyopenssl

2.2.3、结构

libs
    ├── iPay  							# aliapy二次封装包
    │   ├── __init__.py 				# 包文件
    │   ├── pem							# 公钥私钥文件夹
    │   │   ├── alipay_public_key.pem	# 支付宝公钥文件
    │   │   ├── app_private_key.pem		# 应用私钥文件
    │   ├── pay.py						# 支付文件
    └── └── settings.py  				# 应用配置

2.2.4、alipay_public_key.pem

-----BEGIN PUBLIC KEY-----
拿应用公钥跟支付宝换来的支付宝公钥
-----END PUBLIC KEY-----

2.2.5、app_private_key.pem

-----BEGIN RSA PRIVATE KEY-----
通过支付宝公钥私钥签发软件签发的应用私钥
-----END RSA PRIVATE KEY-----

2.2.6、setting.py

import os
# 应用私钥
APP_PRIVATE_KEY_STRING = open(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'pem', 'app_private_key.pem')).read()

# 支付宝公钥
ALIPAY_PUBLIC_KEY_STRING = open(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'pem', 'alipay_public_key.pem')).read()

# 应用ID
APP_ID = '2016093000631831'

# 加密方式
SIGN = 'RSA2'

# 是否是支付宝测试环境(沙箱环境)，如果采用真是支付宝环境，配置False
DEBUG = True

# 支付网关
GATEWAY = 'https://openapi.alipaydev.com/gateway.do' if DEBUG else 'https://openapi.alipay.com/gateway.do'

2.2.7、pay.py

from alipay import AliPay
from . import settings

# 支付对象
alipay = AliPay(
    appid=settings.APP_ID,
    app_notify_url=None,
    app_private_key_string=settings.APP_PRIVATE_KEY_STRING,
    alipay_public_key_string=settings.ALIPAY_PUBLIC_KEY_STRING,
    sign_type=settings.SIGN,
    debug=settings.DEBUG
)

# 支付网关
gateway = settings.GATEWAY

2.2.8、init.py

# 包对外提供的变量
from .pay import gateway, alipay

2.2.9、补充：在自己项目的配置文件中配置支付宝回调接口：settings.py | dev.py

# 上线后必须换成公网地址
# 后台基URL
BASE_URL = 'http://127.0.0.1:8000'
# 前台基URL
LUFFY_URL = 'http://127.0.0.1:8080'
# 支付宝同步异步回调接口配置
# 后台异步回调接口
NOTIFY_URL = BASE_URL + "/order/success/"
# 前台同步回调接口，没有 / 结尾
RETURN_URL = LUFFY_URL + "/pay/success"

总结

1、使用在线支付功能
   支付宝支付
   微信支付
   银联支付
2、使用支付宝支付
   商户号(营业执照) ---> 沙箱环境(测试)
   appkey
   secretkey
3、对称加密和非对称加密
   对称加密: 加密密码和解密密码是同一个
   非对称加密: 公钥和私钥
       公钥加密(即便截获到加密内容和公钥,只要没有私钥,也解不出来)
       私钥解密
4、商家号(营业执照申请),沙箱环境测试
		用户名: babdgw8208@sandbox.com
    	密码: 111111
   用户号: 测试账号
    	  沙箱版的支付宝
          用户名: bfxtlv8393@sandbox.com
          密码: 111111
          支付密码: 111111
5、生成公钥,私钥
   借助于支付宝提供的工具: https://opendocs.alipay.com/open/291/105971#LDsXr
   用这个工具生成公钥和私钥
   把公钥配置在支付宝的网站上 ---> 生成一个支付宝公钥
6、支付的具体操作流程:
	前端点击立即支付,发送请求
   	发送post请求,数据库写入操作
	生成一个订单(订单表插入数据,订单状态为待支付)
    生成支付链接,返回给前端
    前端拿到支付链接,跳转到支付页面(支付宝页面)
    用户扫描付款(输入用户名密码付款)
    支付宝收到付款成功,get回调我们自己的系统
    支付宝还会发送post回调,我们的系统接收到以后修改订单状态
7、步骤:
	(1) 生成私钥和公钥
    (2) 把公钥配置在沙箱环境
    (3) 复制出支付宝公钥,粘贴在项目中
    (4) 复制出私钥粘贴在项目中
    (5) 编写视图类
	
		路由: path('pay', views.PayView.as_view()),
		视图类:
		class PayView(APIView):
	    def post(self, request, *args, **kwargs):
	        subject = "商品名称"
	        # 电脑网站支付，需要跳转到https://openapi.alipay.com/gateway.do? + order_string
	        order_string = alipay.api_alipay_trade_page_pay(
	            out_trade_no="订单号",
	            total_amount=1000,
	            subject=subject,
	            return_url="https://www.baidu.com",  # 支付成功后跳转的地址
	            notify_url="https://example.com/notify"  # 可选, 不填则使用默认notify url
	        )
	        print(order_string)
	        pay_url = gateway + '?' + order_string
	        print(pay_url)
	        return Response({'pay_url': pay_url})
	(6) 前端发送post请求,测试生成的支付链接,完成支付