luffy-15/区间过滤,搜索功能前端后端,支付宝
2024-04-23 23:21:28
这里写目录标题
- 一.区间过滤
- 二.搜索功能
- 2.1后端代码
- 2.2前端搜索页面
- 2.2.1views/SearchCourse.vue
- 2.2.2router/index.js
- 2.2.3components / Header.vue
- 三.支付宝
- 3.0结构
- 3.1luffyapi/ luffyapi / lib / al_pay / settings.py
- 3.2luffyapi/ luffyapi / lib / al_pay / pay.py
- 3.3apps/order/views.py
- 3.4apps/order/urls.py
一.区间过滤
# 方式一：自己写过滤类，配置到视图类的
# 继承了drf的过滤类,自己重写一下
# course/SearchBackend.py
class SearchByPrice(BaseFilterBackend):def filter_queryset(self, request, queryset, view):price_gt=request.GET.get('price_gt')price_lt=request.GET.get('price_lt')queryset = queryset.filter(price__gt=price_gt,price__lt=price_lt)return queryset# 配置到视图类
# course/views.py/CourseView
filter_backends = [SearchByPrice]
'''===============================>'''
# 方式二：借助django—fileter# 1 写一个类：# course/SearchBackend.pyfrom . import modelsfrom django_filters import filtersclass CourseFilterSet(FilterSet):# 区间过滤：field_name关联的Model字段；lookup_expr设置规则；gt是大于，gte是大于等于；min_price = filters.NumberFilter(field_name='price', lookup_expr='gte')max_price = filters.NumberFilter(field_name='price', lookup_expr='lte')class Meta:model = models.Course# 如果过滤条件仅仅就是Model已有的字段，方式一更好# 但是方式二可以自定义过滤字段fields = ['course_category','min_price', 'max_price']# 2 配置到视图类上# course/views.py/CourseViewfilter_backends = [DjangoFilterBackend]filter_class = CourseFilterSet
二.搜索功能
1 搜索的后端接口-课程标题（要有搜的关键字）-课程简介（要有搜的关键字）-专业的搜索引擎（ES：专注于大数据量的搜索）
2 这次咱们写的就是去数据库查
2.1后端代码
course/views.py
from rest_framework.filters import SearchFilter
class CourserSearchView(GenericViewSet,ListModelMixin):queryset = Course.objects.filter(is_delete=False, is_show=True).order_by('-orders')serializer_class =CourseSerializer# 内置搜索filter_backends = [SearchFilter]search_fields = ['name', 'brief']pagination_class = BasicPagination# def list(self, request, *args, **kwargs):# res=super().list(request, *args, **kwargs)# # 实战课数据# res.data## # 免费课数据# data2## # 轻课# data3# return APIRespone(lite_course=data3,)
course/urls.py
router.register('search',CourseSearchView,'CourseSearchView')
2.2前端搜索页面
2.2.1views/SearchCourse.vue
<template><div class="search-course course"><Header/><!-- 课程列表 --><div class="main"><div v-if="course_list.length > 0"><h1>总共搜到到{{course_total}}门课程</h1></div><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="'/course/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"><spanclass="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.$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.2router/index.js
import SearchCourse from '../views/SearchCourse.vue'{path: '/course/search',name: 'SearchCourse',component: SearchCourse}
2.2.3components / 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"><div v-if="username"><span>{{username}}</span>|<span @click="logout">注销</span></div><div 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></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);}//把当前路径加入到了sessionStoragesessionStorage.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() {//清空cookiethis.$cookies.remove('username')this.$cookies.remove('token')this.$cookies.remove('icon')this.$cookies.remove('id')//清空usernamethis.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>
三.支付宝
1 使用在线支付功能-支付宝支付（讲它）-微信支付-银联支付（用的比较少）2 使用支付宝支付-商户号（营业执照）----》沙箱环境（测试）-appkey： 测试的key-secretkey：3 对称加密和非对称加密-对称加密：加密密码和解密密码是一个-非对称加密：公钥和私钥-公钥加密（即便截获到加密内容和公钥，只要没有私钥，也解不出来）-私钥解密4 商家号（营业执照申请），沙箱环境测试用户名：babdgw8208@sandbox.com密码：111111用户号：测试账号沙箱版的支付宝用户名：bfxtlv8393@sandbox.com密码：111111支付密码：1111115 生成公钥，私钥-借助于支付宝提供的工具：https://opendocs.alipay.com/open/291/105971#LDsXr-用这个工具生成公钥和私钥-把公钥配置在支付宝的网站上----》生成一个支付宝公钥6 前端点击立即支付，发送请求-post请求，数据库写入操作-生成一个订单（订单表插入数据，订单状态为待支付）-生成支付链接，返回给前端-前端拿到支付链接，跳转到支付页面（支付宝页面）-用户扫描付款（输入用户名密码付款）-支付宝收到付款成功，get回调咱们的系统-支付宝还会发送post回调，咱们系统接收到以后，修改订单状态
7 流程：-1 生成私钥和公钥-2 把公钥配置在沙箱环境-3 复制出支付宝公钥，粘贴在项目中-4 复制出私钥粘贴在项目中-5 视图类-6 前端发送post请求，测试生成的支付链接，完成支付
# 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# 7、公钥私钥设置
"""
# alipay_public_key.pem
-----BEGIN PUBLIC KEY-----
支付宝公钥
-----END PUBLIC KEY-----# app_private_key.pem
-----BEGIN RSA PRIVATE KEY-----
用户私钥
-----END RSA PRIVATE KEY-----
"""# 8、支付宝链接
"""
开发：https://openapi.alipay.com/gateway.do
沙箱：https://openapi.alipaydev.com/gateway.do
"""
3.0结构
libs├── iPay # aliapy二次封装包│ ├── __init__.py # 包文件│ ├── pem # 公钥私钥文件夹│ │ ├── alipay_public_key.pem # 支付宝公钥文件│ │ ├── app_private_key.pem # 应用私钥文件│ ├── pay.py # 支付文件└── └── settings.py # 应用配置
3.1luffyapi/ luffyapi / lib / al_pay / settings.py
import os
# 应用私钥Path=os.path.join(os.path.dirname(os.path.abspath(__file__)), 'pem', 'app_private_key.pem')
print(Path)
APP_PRIVATE_KEY_STRING = open(Path,encoding='utf-8').read()# 支付宝公钥
ALIPAY_PUBLIC_KEY_STRING = open(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'pem', 'alipay_public_key.pem'),encoding='utf-8').read()# 应用ID
APP_ID = '2016092000554611'# 加密方式
SIGN = 'RSA2'# 是否是支付宝测试环境(沙箱环境)，如果采用真是支付宝环境，配置False
DEBUG = True# 支付网关
GATEWAY = 'https://openapi.alipaydev.com/gateway.do' if DEBUG else 'https://openapi.alipay.com/gateway.do'
3.2luffyapi/ luffyapi / lib / al_pay / pay.py
from alipay import AliPay
from . import settings# 支付对象
alipay = AliPay(appid=settings.APP_ID, # 商家的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
3.3apps/order/views.py
# 1.pip install python-alipay-sdk
# 2.记得在dev中注册一下order这个app
# 3.在总路由中配置一下order的路由 from rest_framework.views import APIView
from rest_framework.response import Response
from lib.al_pay.pay import gateway,alipayclass PayView(APIView):def post(self, request, *args, **kwargs):subject = "充气娃娃"# 电脑网站支付，需要跳转到https://openapi.alipay.com/gateway.do? + order_stringorder_string = alipay.api_alipay_trade_page_pay(out_trade_no="20161112",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_stringprint(pay_url)return Response({'pay_url': pay_url})3.4apps/order/urls.py
from django.urls import path
from order import viewsurlpatterns = [path('pay',views.PayView.as_view()),
]
参考博客
luffy-15/区间过滤,搜索功能前端后端,支付宝相关推荐
- uniapp 如何给搜索框设值_uni-app搜索功能前后端开发（页面）
uni-app搜索功能前后端开发(页面) 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 借助的插件地址 展示 前端是使用vue, ...
- uni-app搜索功能前后端开发（页面）
uni-app搜索功能前后端开发(页面) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 借助的插件地址 插件地址 展示 前端是 ...
- Android 实现ListView的A-Z字母排序和过滤搜索功能，实现汉字转成拼音
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/12684155 前段时间因为换工作的缘故又恰巧碰到国庆节,所以有段时间自己没有更新博客了 ...
- Android 使用RecyclerView实现（仿微信）的联系人A-Z字母排序和过滤搜索功能
之前做项目的时候遇到一个需求是实现品牌的字母排序功能,网上的资料很多,但是有一部分有bug,这篇文章是我学习和解决部分bug之后的总结.今天带来的是RecyclerView的A-Z字母排序和过滤搜索功 ...
- Android实现ListView的A-Z字母排序和过滤搜索功能，实现汉字转成拼音
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/12684155 前段时间因为换工作的缘故又恰巧碰到国庆节,所以有段时间自己没有更新博客了 ...
- android列表字母排序,Android 实现ListView的A-Z字母排序和过滤搜索功能，实现汉字转成拼音...
[实例简介]Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音 [实例截图] [核心代码] package com.example.sortlistview; imp ...
- Android实现ListView的A-Z字母排序和过滤搜索功能
原文地址: http://blog.csdn.net/xiaanming/article/details/12684155 首先先看下效果图 上面是一个带删除按钮的EditText,我们在输入框中 ...
- 互联网晚报 | 05月05日 星期四 | 美联储宣布加息 50 个基点；百度宣布新一轮干部轮岗；支付宝上线“数字人民币搜索功能...
美联储 5 月 5 日宣布加息 50 个基点,为该央行 2000 年来最大幅度加息 北京时间5月5日凌晨02:00,美联储公布利率决议结果,将基准利率上调50个基点至0.75%-1.00%区间,符 ...
- React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
最新文章
- 三线表是什么？R语言使用table1包绘制（生成）三线表、使用单变量分列构建三线表、编写自定义三线表结构（将因子变量细粒度化重新构建三线图）、编写自定义函数在三线表中添加p值
- Listener 监听器
- C/C++面试题精选
- linux重启sshd命令,重启sshd服务
- 设置安全性根据Folder关联的条目模板设置上传文档安全性
- BZOJ1578: [Usaco2009 Feb]Stock Market 股票市场
- 8月日更，我的困难与感悟
- python色标_在Python中用色标可视化移动速度
- 计算机管理中看不到本地用户,win7系统计算机管理中没有本地用户和组的解决方法...
- day22 随机输出ArrayList
- redhat7安装Oracle11g数据库全过程
- 笔记本开启WiFi共享后无法联网
- 汉语语法与人工智能--NLP哈工大
- android 自定义indicator,Android实现自定义Indicator的导航控件
- 56个有效且健康的减肥小绝招
- 这是一个全民销售的时代
- GBase产品系列介绍
- 日“隼鸟二号”首次降落“龙宫”取样
- 教师学计算机内容包括哪些,中学计算机教师类论文参考文献 中学计算机教师核心期刊参考文献有哪些...
- C语言中的随机数生成器