python代码实现购物车(django的redis与vue)
- 安装模块
- pip install django-redis
- 后端代码
# 购物车
class CartView(APIView):
# 初始化函数
def __init__(self):
self.conn = get_redis_connection('default') # 获取购物车信息
def get(self,request):
# 读取数据 (获取前端传来的id)
uid = request.GET.get('id')
key = 'cart_{}'.format(uid) # cart_1
tmp = self.conn.hgetall(key) # {b'a9':b'20',b'a10':b'13'}
if not tmp:
return Response({
"status":201,
"msg":"购物车为空"
})
data = {k.decode('utf-8')[1:]:v.decode('utf-8') for k,v in tmp.items()}
# 如何获取商品Id
goods = models.Goods.objects.filter(id__in=data).all()
data_list = []
datax = {k.decode('utf-8'): v.decode('utf-8') for k, v in tmp.items()} # {'a10': '13', 'a9': '20'}
for good in goods:
gid = good.id
info = {"id":gid,"name":good.name,"store":good.store,"price":float(good.price),"img":good.img,"count":datax.get('a'+str(gid))}
data_list.append(info)
return Response({
"status":200,
"msg": "",
"data":data_list
})
# 添加购物车信息
def post(self,request):
data = request.data
uid = data.get('uid','')
gid = 'a'+ str(data.get('gid',''))
count = data.get('count',0)
# 存入redis
key = 'cart_'+ str(uid)
self.conn.hset(key,gid,count)
return Response({
"msg":"已设置"
}) # 删除购物车信息
def delete(self,request):
uid = request.data.get('uid',"")
gid = request.data.get('gid',"")
key = 'cart_{}'.format(uid)
field = 'a{}'.format(gid)
tmp = self.conn.hdel(key,field)
print(tmp)
return Response({
"msg":""
})
- 前端
<template>
<div id='cart'>
<div class="total_count">全部商品<em>2</em>件</div>
<ul class="cart_list_th clearfix">
<li class="col01">商品名称</li>
<li class="col03">商品价格</li>
<li class="col04">数量</li>
<li class="col05">小计</li>
<li class="col06">操作</li>
</ul>
<ul class="cart_list_td clearfix" v-for="(i,index) in goods">
<li class="col01"></li>
<li class="col02"><img :src="src+i.img"></li>
<li class="col03">{{i.name}}</li>
<li class="col05">{{i.price}}元</li>
<li class="col06">
<div class="num_add">
<a href="javascript:;" class="add fl" @click="add(index)">+</a>
<input type="text" class="num_show fl" v-model="i.count">
<a href="javascript:;" class="minus fl" @click="minus(index)">-</a>
</div>
</li>
<li class="col07">{{i.count*i.price}}元</li>
<li class="col08"><a href="javascript:;" @click="delx(i.id)">删除</a></li>
</ul>
<ul class="settlements">
<li class="col01"></li>
<li class="col02"></li>
<li class="col03">合计(不含运费):<span>¥</span><em>{{totalPrice}}</em><br>共计<b>2</b>件商品</li>
<li class="col04"><a @click="pay">去结算</a></li>
</ul>
</div>
</template>
<script>
export default {
name:'cart',
data() {
return {
goods:[],
src:'/hou/static/goods/',
totalPrice:0
}
},
// 页面加载之前获取购物车参数信息
mounted(){
// 方法共用
this.get_data()
},
methods:{
// 添加点击事件 加一
add:function(index){
this.goods[index].count++;
this.totalPricefn(index,'+');
},
// 添加点击事件 减一
minus:function(index){
if(this.goods[index].count>1){
this.goods[index].count--;
this.totalPricefn(index,'-');
} },
// 计算总价
totalPricefn:function(index,params){
if(params=='+'){
this.totalPrice += this.goods[index].price*1;
}else if(params =='-'){
this.totalPrice -= this.goods[index].price*1;
}else{
this.totalPrice += this.goods[index].price*this.goods[index].count;
}
},
// 支付
pay:function(){
let data = {
"total":this.totalPrice,
} this.axios({
url:'/api/pay/pay/',
method:'get',
params:data
}).then(res=>{
//
let url = res.data.url;
location.href = url;
})
},
// 删除商品
delx:function(id){
let data = {
'uid':localStorage.getItem('uid'),
'gid':id
}
this.axios({
url:'/api/goods/cart/',
method:'delete',
data:data
}).then(res=>{
this.get_data();
})
},
// 获取初始信息
get_data:function(){
this.axios({
url:'/api/goods/cart/',
method:'get',
params:{"id":localStorage.getItem('uid')}
}).then(res=>{
this.goods = res.data.data;
this.totalPrice = 0;
this.goods.forEach((item,index)=>{
this.totalPricefn(index,'');
}) })
}
}
}
</script>
python代码实现购物车(django的redis与vue)的更多相关文章
- Python代码样例列表
扫描左上角二维码,关注公众账号 数字货币量化投资,回复“1279”,获取以下600个Python经典例子源码 ├─algorithm│ Python用户推荐系统曼哈顿算法实现.py│ ...
- 【updating】python读书笔记-The Django Book2.0(for django1.4)
原文:http://www.djangobook.com/en/2.0/frontmatter.html 译文:http://djangobook.py3k.cn/2.0/ 或者http://docs ...
- python 全栈开发,Day101(redis操作,购物车,DRF解析器)
昨日内容回顾 1. django请求生命周期? - 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端 请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者po ...
- python用Django+Celery+Redis 监视程序(一)
C盘创建一个目录就叫DjangoDemo,然后开始在该目录下操作. 1.新建Django工程与应用 运行pip install django 安装django 这里我们建一个名为demo的项目和hom ...
- python代码自动补全配置及Django入门Demo
django入门代码示例小博客:https://pan.baidu.com/s/1pLjLPSv 1.自动补全功能 许多人都知道 iPython 有很好的自动补全能力,但是就未必知道 python 也 ...
- [转载]基于Redis的Bloomfilter去重(附Python代码)
前言: “去重”是日常工作中会经常用到的一项技能,在爬虫领域更是常用,并且规模一般都比较大.去重需要考虑两个点:去重的数据量.去重速度.为了保持较快的去重速度,一般选择在内存中进行去重. 数据量不大时 ...
- 【Azure Redis 缓存】使用Python代码获取Azure Redis的监控指标值 (含Powershell脚本方式)
问题描述 通过Metrics监控页面,我们能得知当前资源(如Redis)的运行情况与各种指标.如果我们需要把指标下载到本地或者生成JSON数据导入到第三方的监控平台呢?Azure是否可以通过Pytho ...
- python web框架——扩展Django&tornado
一 Django自定义分页 目的:自定义分页功能,并把它写成模块(注意其中涉及到的python基础知识) models.py文件 # Create your models here. class Us ...
- django celery redis 定时任务
0.目的 在开发项目中,经常有一些操作时间比较长(生产环境中超过了nginx的timeout时间),或者是间隔一段时间就要执行的任务. 在这种情况下,使用celery就是一个很好的选择. cele ...
随机推荐
- HDU - 3068 最长回文(manacher算法)
题意:给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 分析: manacher算法: 1.将字符串中每个字符的两边都插入一个特殊字符.(此操作的目的是,将字符串 ...
- 洛谷 P5542 [USACO19FEB]Painting The Barn
题目传送门 解题思路: 二维差分的板子题.题解传送门 AC代码: #include<iostream> #include<cstdio> using namespace std ...
- content编码
1.content有5种属性 a.content:“” //为空 b.content:attr(TItle) //可以获取当前选中标签的属性值 eg: ...
- CSS根据屏幕分辨率宽度自动适应的办法
CSS根据屏幕分辨率宽度自动适应的办法 第一种办法是js选择CSS <SCRIPT language=JavaScript><!-- Beginif (screen.width == ...
- 【机器学习实战学习笔记(1-1)】k-近邻算法原理及python实现
笔者本人是个初入机器学习的小白,主要是想把学习过程中的大概知识和自己的一些经验写下来跟大家分享,也可以加强自己的记忆,有不足的地方还望小伙伴们批评指正,点赞评论走起来~ 文章目录 1.k-近邻算法概述 ...
- OC Swift混编-Swift.h File not found
https://www.jianshu.com/p/f860fe1718ca 2016.09.13 11:53* 字数 266 阅读 1935评论 1喜欢 1 今天碰到个神坑,本人项目是OC项目,最近 ...
- LIS是什么?【通讯】
Ⅲ最后一点,通讯. 从字面意义来看,通讯是一种沟通形式,信息交互的媒介.在LIS中,通讯主要指的是仪器通讯,也就是仪器与电脑-LIS系统的信息交互方式,也可以称为仪器接口. 在LIS中,通讯是最基础也 ...
- preg_match()//explode()// 输出函数//assert()//trim()
1.preg_match() 这是一个正则表达式匹配的函数,其用法如下: 查找文本字符串"php": <?php //模式分隔符后的"i"标记这是一个大小 ...
- Ubuntu上运行tensorflow C++的完整例子
个人博客原文:http://www.bearoom.xyz/2019/08/25/ubuntu-tensorflow-cc-example/ 之前记录的运行Tensorflow的C++接口的例子都是零 ...
- HttpClient4.x 上传文件
https://blog.csdn.net/wsdtq123/article/details/78888734