2021-08-02 前端搜素导航栏 搜索接口 搜索页面 支付宝支付介绍 支付宝二次封装 订单相关表 支付接口 支付前台 回调页面 支付成功回调接口

上节回顾

1 课程相关接口
	-课程分类
    -所有课程接口
    	-分页（基本上所有的获取多条数据，都要分页）
        -排序功能
        -过滤功能：安装分类过滤（django-filter）
        	-第一种：
            	filter_backends=[DjangoFilterBackend]
                filter_fields=['course_category']  # 依据的是Course(课程)表
            -第二种：（实现区间过滤）
            	filter_backends=[DjangoFilterBackend]
                filter_class = CourseFilterSet
                class CourseFilterSet(FilterSet):
    				class Meta:
        				model = models.Course
                         fields = ['course_category',]
                            
            -第三种：自己写
            	-自定义一个过滤类：继承基类：BaseFilterBackend，重写filter_queryset，返回的数据，就是过滤后的数据
                -配置在视图类上
                filter_backends=[自定义的类，]
        -序列化  
        	-子序列化（不需要传instance）
            
    
    -获取单个课程接口（在视图类上配置一个RetrieveModelMixin类即可）
    
    -课程章节接口（课时）
    	-获取所有课程章节
        -过滤：根据课程id过滤
    
    	
2 前端页面

3 视频托管（文件，图片。。。）
	-自有文件服务器（安全）
    	-fastdfs
        -ceph
        -minio
        -。。。
    -第三方文件服务器
    	-阿里oss：对象存储
        -七牛云
    	
        
   
去ioe：ibm服务器，oracle数据库，emc：存储
		-浪潮，联想
    	-mysql，国产数据库
        -国产存储
        
政务云
	-阿里
    -腾讯
    -华为
        
9 需求是继承class CourseView(GenericViewSet,ListModelMixin,RetrieveModelMixin):实现不同接口，使用不同的序列化类
    def get_serializer_class(self):  # 返回哪个序列化类，当前接口就以该序列化类进行序列化
        print(self.request)
        if self.action=='list':
            print('获取所有')
            return self.serializer_class
        else:
            print('其他情况')
            from .serializer import CourseDetailSerializer
            return CourseDetailSerializer
            	

今日内容

1 前端搜索导航栏

Head.vue

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



# js
#data：
 // 搜索相关
is_search_tip: true,
search_placeholder: '',
search_word: ''
#methods
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.$router.push(`/course/search/${
   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;
},
#### 样式
  .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;
    }

2 搜索接口

1 全文检索，尽量不要使用mysql，使用mysql，性能会非常低，需要用到专业的搜索引擎：Elasticsearch：分布式全文检索引擎

from rest_framework.filters import SearchFilter

from luffy_api.utils.response import APIResponse
class CourseSearchView(GenericViewSet, ListModelMixin):
    queryset = Course.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
    serializer_class = CourseSerializer
    filter_backends = [SearchFilter]
    search_fields = ['name',]
    pagination_class = CommonPageNumberPagination

    # 后期改接口，可能要查好几种课程
    # 加入全文检索，使用es实现
    # def list(self, request, *args, **kwargs):
    #     search=request.query_params.get('search')
    #     # 实战课
    #     response=super().list(request, *args, **kwargs)
    #     # 免费课
    #     course_list=CourseFree.objects.all().filter(name__contains=search)
    #     # 序列化
    #
    #     return APIResponse(result={'actual_course':response.data,'free_course':ser.data})

3 搜索页面

3.1 SearchCourse.vue

<template>
    <div class="search-course course">
        <Header/>

        <!-- 课程列表 -->
        <div class="main">
            <div v-if="course_list.length > 0" class="course-list">
                <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