31.Django大型电商项目之加入购物车——Django的增加、删除、修改、查询实操
2023-09-27 14:23:04 时间
1. 加入购物车
views
# netshop\cartapp\views.py
from django.shortcuts import render, redirect
from django.http import HttpResponse, HttpResponseBadRequest
from utils.cartmanager import *
# Create your views here.
# 购物车视图
def cartView(request):
# 获取表单数据
# 1.获取购物车操作
flag = request.POST.get('flag')
if flag == 'add':
# 加入购物车
dbCartManageObj = getCartManger(request)
dbCartManageObj.add(**request.POST.dict())
return redirect('/cartapp/queryAll/')
# 查询购物车列表
def queryAll(request):
dbCartManageObj = getCartManger(request)
cartitemList = dbCartManageObj.queryAll()
return render(request,'cartapp/cart.html',{'cartitemList':cartitemList})
templates
{% extends 'base.html' %}
{% block title %}购物车列表页面{% endblock %}
{% block main %}
<section class="cartMain">
<div class="cartMain_hd">
<ul class="order_lists cartTop">
<li class="list_chk">
<!--所有商品全选-->
<input type="checkbox" id="all" class="whole_check" style="display: inline-block;position:relative;left: -8px;top: 4px">
全选
</li>
<li class="list_con">商品信息</li>
<li class="list_info">商品参数</li>
<li class="list_price">单价</li>
<li class="list_amount">数量</li>
<li class="list_sum">金额</li>
<li class="list_op">操作</li>
</ul>
</div>
<div class="cartBox">
<div class="order_content">
<ul style="position: relative" class="order_lists" goodsid="5" sizeid="17" colorid="17">
<li class="list_chk">
<input type="checkbox" id="checkbox_2" class="son_check" style="display: inline-block;position:absolute;left: 21px;top: 54px">
</li>
<li class="list_con">
<div class="list_img"><a href="javascript:;"><img src="./首页_files/bai_mt1VrH5.jpg" alt=""></a></div>
<div class="list_text"><a href="javascript:;">秋装时尚印花复古时尚休闲两件套装裙子</a></div>
</li>
<li class="list_info">
<p>颜色：白色</p>
<p>尺寸：S</p>
</li>
<li class="list_price">
<p class="price">￥35.00</p>
</li>
<li class="list_amount">
<div class="amount_box">
<a href="javascript:;" class="reduce reSty" goodsid="5" colorid="17" sizeid="17">-</a>
<input type="text" value="5" class="sum" readonly="">
<a href="javascript:;" class="plus" goodsid="5" colorid="17" sizeid="17">+</a>
</div>
</li>
<li class="list_sum">
<p class="sum_price">￥175.0</p>
</li>
<li class="list_op">
<p class="del"><a href="javascript:;" class="delBtn" goodsid="5" colorid="17" sizeid="17">移除商品</a></p>
</li>
</ul>
<ul style="position: relative" class="order_lists" goodsid="4" sizeid="14" colorid="14">
<li class="list_chk">
<input type="checkbox" id="checkbox_2" class="son_check" style="display: inline-block;position:absolute;left: 21px;top: 54px">
</li>
<li class="list_con">
<div class="list_img"><a href="javascript:;"><img src="./首页_files/lv_cTMJg2K.jpg" alt=""></a></div>
<div class="list_text"><a href="javascript:;">梦娜世家2017女式新款修身中长款毛领时尚显瘦欧美气质羽绒服A88</a></div>
</li>
<li class="list_info">
<p>颜色：绿色</p>
<p>尺寸：160</p>
</li>
<li class="list_price">
<p class="price">￥99.00</p>
</li>
<li class="list_amount">
<div class="amount_box">
<a href="javascript:;" class="reduce reSty" goodsid="4" colorid="14" sizeid="14">-</a>
<input type="text" value="6" class="sum" readonly="">
<a href="javascript:;" class="plus" goodsid="4" colorid="14" sizeid="14">+</a>
</div>
</li>
<li class="list_sum">
<p class="sum_price">￥594.0</p>
</li>
<li class="list_op">
<p class="del"><a href="javascript:;" class="delBtn" goodsid="4" colorid="14" sizeid="14">移除商品</a></p>
</li>
</ul>
</div>
</div>
<!--底部-->
<div class="bar-wrapper">
<div class="bar-right">
<div class="piece">已选商品<strong class="piece_num" id="all_count">0</strong>件</div>
<div class="totalMoney">共计: <strong class="total_text" id="all_price">0.00</strong></div>
<div class="calBtn"><a href="javascript:;" id="jiesuan">结算</a></div>
</div>
</div>
</section>
<section class="model_bg" style="display: none;"></section>
<section class="my_model" style="display: none;">
<p class="title">删除宝贝<span class="closeModel">X</span></p>
<p>您确认要删除该宝贝吗？</p>
<div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a>
</div>
</section>
<input type="hidden" name="csrfmiddlewaretoken" value="JyaqZY2G1WlHajMF9aSD7GTIUKqBai918GdZmW8skri98iVfK7FipbnrGijHCf0A">
{% endblock %}
{% block footerjs %}
<script>
$('.plus').click(function(event){
// <!--将数据同步到服务器-->
var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
var goodsid = $(this).attr('goodsid')
var colorid = $(this).attr('colorid')
var sizeid = $(this).attr('sizeid')
var data={
goodsid:goodsid,
colorid:colorid,
sizeid:sizeid,
csrfmiddlewaretoken:csrfmiddlewaretoken,
type:'plus'
}
$.ajax({
async:false,
url:'/cart/',
data:data,
type:'post',
success:function(data) {
},
error:function(){
// <!--按钮设置了两个点击事件-->
event.stopImmediatePropagation()
}
})
})
$('.reduce').click(function(event){
// <!--将数据同步到服务器-->
if ($(this).next('input').val()<=1){
event.stopImmediatePropagation()
return;
}
var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
var goodsid = $(this).attr('goodsid')
var colorid = $(this).attr('colorid')
var sizeid = $(this).attr('sizeid')
var data={
goodsid:goodsid,
colorid:colorid,
sizeid:sizeid,
csrfmiddlewaretoken:csrfmiddlewaretoken,
type:'minus'
}
$.ajax({
async:false,
url:'/cart/',
type:'post',
data:data,
success:function(data) {
},
error:function(){
// <!--按钮设置了两个点击事件-->
event.stopImmediatePropagation()
}
})
})
$('.delBtn').click(function(){
var goodsid= $(this).attr('goodsid');
var colorid= $(this).attr('colorid');
var sizeid= $(this).attr('sizeid');
$('.dialog-sure').attr('goodsid',goodsid).attr('colorid',colorid).attr('sizeid',sizeid)
})
$('.dialog-sure').click(function(event){
var goodsid= $(this).attr('goodsid');
var colorid= $(this).attr('colorid');
var sizeid= $(this).attr('sizeid');
var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val();
var data={
goodsid:goodsid,
colorid:colorid,
sizeid:sizeid,
csrfmiddlewaretoken:csrfmiddlewaretoken,
type:'delete'
}
$.ajax({
type:'post',
url:'/cart/',
data:data,
async:false,
success:function(result) {
},
error:function(event){
//停止事件传播
event.stopImmediatePropagation()
}
})
})
//在购物车页面点击登录按钮后回转到购物车页面
$('.sign > a').click(function(event){
var link = $(this).attr('href')
$(this).attr('href',link+"?redirct=cart")
})
//单击结算按钮
$('#jiesuan').click(function(){
cks = $('.son_check')
var cartitem = []
$.each(cks,function(index,ck){
if($(ck).prop('checked')){
var goodsid = $(ck).parents('.order_lists').attr('goodsid')
var sizeid = $(ck).parents('.order_lists').attr('sizeid')
var colorid = $(ck).parents('.order_lists').attr('colorid')
cartitem.push(JSON.stringify({'goodsid':goodsid,'sizeid':sizeid,'colorid':colorid}))
}
})
if(cartitem.length==0){
return;
}
var url = '/order/?cartitems='+cartitem;
$(this).attr('href',url);
})
</script>
{% endblock %}
models
from django.db import models
from userapp.models import UserInfo
from goodsapp.models import *
# Create your models here.
# 购物车模型类
class CartItem(models.Model):
goodsid = models.PositiveBigIntegerField(verbose_name='商品id')
colorid = models.PositiveBigIntegerField(verbose_name='颜色id')
sizeid = models.PositiveBigIntegerField(verbose_name='尺寸id')
count = models.PositiveBigIntegerField(default=0,verbose_name='商品数量')
isdelete = models.BooleanField(default=False,verbose_name='是否删除')
user = models.ForeignKey(UserInfo, on_delete=models.CASCADE,verbose_name='用户')
def getColor(self):
return Color.objects.get(id=self.colorid)
def getGoods(self):
return Goods.objects.get(id=self.goodsid)
def getSize(self):
return Size.objects.get(id=self.sizeid)
def getTotalPrice(self):
return self.getGoods().price*self.count
2. 购物车列表——获取数据
上一步中，我们是完成了购物车模型（数据表）的建立，点击添加到购物车，加入到数据库中。并且完成了静态页面，这里，要把数据改成动态的。
templates——修改商品列表
<div class="cartBox">
<div class="order_content">
{% for cartitem in cartitemList %}
<ul style="position: relative" class="order_lists" goodsid="{{cartitem.goodsid}}" sizeid="{{cartitem.sizeid}}" colorid="{{cartitem.colorid}}">
<li class="list_chk">
<input type="checkbox" id="checkbox_2" class="son_check" style="display: inline-block;position:absolute;left: 21px;top: 54px">
</li>
<li class="list_con">
<div class="list_img"><a href="javascript:;"><img src="{{cartitem.getColor.colorurl}}" alt=""></a></div>
<div class="list_text"><a href="javascript:;">{{cartitem.getGoods.gname}}</a></div>
</li>
<li class="list_info">
<p>颜色：{{cartitem.getGoods.price}}</p>
<p>尺寸：{{cartitem.getSize.sname}}</p>
</li>
<li class="list_price">
<p class="price">￥{{cartitem.getGoods.price}}</p>
</li>
<li class="list_amount">
<div class="amount_box">
<a href="javascript:;" class="reduce reSty" goodsid="{{cartitem.goodsid}}" sizeid="{{cartitem.sizeid}}" colorid="{{cartitem.colorid}}">-</a>
<input type="text" value="{{cartitem.count}}" class="sum" readonly="">
<a href="javascript:;" class="plus" goodsid="{{cartitem.goodsid}}" sizeid="{{cartitem.sizeid}}" colorid="{{cartitem.colorid}}">+</a>
</div>
</li>
<li class="list_sum">
<p class="sum_price">￥{{cartitem.getTotalPrice}}</p>
</li>
<li class="list_op">
<p class="del"><a href="javascript:;" class="delBtn" goodsid="{{cartitem.goodsid}}" sizeid="{{cartitem.sizeid}}" colorid="{{cartitem.colorid}}">移除商品</a></p>
</li>
</ul>
{% endfor %}
</div>
</div>
3. 修改购物车商品数量
我们已经完成了数据的获取。
当我们选择商品的数量时，并没有对数据库的内容进行修改，这里，我们就得修改商品数量时候，修改数据库中的数据
templates
在前端中，我们将按钮进行绑定事件，调用视图中写的获取数据方法。
$('.plus').click(function(event){
// <!--将数据同步到服务器-->
var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
var goodsid = $(this).attr('goodsid')
var colorid = $(this).attr('colorid')
var sizeid = $(this).attr('sizeid')
var data={
goodsid:goodsid,
colorid:colorid,
sizeid:sizeid,
csrfmiddlewaretoken:csrfmiddlewaretoken,
flag:'plus'
}
$.ajax({
async:false,
url:'/cartapp/cartView/',
data:data,
type:'post',
success:function(data) {
},
error:function(){
// <!--按钮设置了两个点击事件-->
event.stopImmediatePropagation()
}
})
})
$('.reduce').click(function(event){
// <!--将数据同步到服务器-->
if ($(this).next('input').val()<=1){
event.stopImmediatePropagation()
return;
}
var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
var goodsid = $(this).attr('goodsid')
var colorid = $(this).attr('colorid')
var sizeid = $(this).attr('sizeid')
var data={
goodsid:goodsid,
colorid:colorid,
sizeid:sizeid,
csrfmiddlewaretoken:csrfmiddlewaretoken,
flag:'minus'
}
$.ajax({
async:false,
url:'/cartapp/cartView/',
type:'post',
data:data,
success:function(data) {
},
error:function(){
// <!--按钮设置了两个点击事件-->
event.stopImmediatePropagation()
}
})
})
views
# netshop\cartapp\views.py
from django.shortcuts import render, redirect
from django.http import HttpResponse, HttpResponseBadRequest
from utils.cartmanager import *
# Create your views here.
# 购物车视图
def cartView(request):
# 获取表单数据
# 1.获取购物车操作
flag = request.POST.get('flag')
dbCartManageObj = getCartManger(request)
if flag == 'add':
# 加入购物车
dbCartManageObj.add(**request.POST.dict())
elif flag == 'plus':
# 增加商品数量
dbCartManageObj.update(step=1, **request.POST.dict())
elif flag == 'minus':
# 增加商品数量
dbCartManageObj.update(step=-1, **request.POST.dict())
return redirect('/cartapp/queryAll/')
4. 删除购物车信息——移除商品（不是真正的移除）
当我们点击移除商品时，会弹出一个确认框，点击确认时，发送请求修改商品是否被移除的字段和数量字段。
templates
$('.delBtn').click(function(){
var goodsid= $(this).attr('goodsid');
var colorid= $(this).attr('colorid');
var sizeid= $(this).attr('sizeid');
$('.dialog-sure').attr('goodsid',goodsid).attr('colorid',colorid).attr('sizeid',sizeid)
})
$('.dialog-sure').click(function(event){
var goodsid= $(this).attr('goodsid');
var colorid= $(this).attr('colorid');
var sizeid= $(this).attr('sizeid');
var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val();
var data={
goodsid:goodsid,
colorid:colorid,
sizeid:sizeid,
csrfmiddlewaretoken:csrfmiddlewaretoken,
flag:'delete'
}
$.ajax({
type:'post',
url:'/cartapp/cartView/',
data:data,
async:false,
success:function(result) {
},
error:function(event){
//停止事件传播
event.stopImmediatePropagation()
}
})
})
views
# netshop\cartapp\views.py
from django.shortcuts import render, redirect
from django.http import HttpResponse, HttpResponseBadRequest
from utils.cartmanager import *
# Create your views here.
# 购物车视图
def cartView(request):
# 获取表单数据
# 1.获取购物车操作
flag = request.POST.get('flag')
dbCartManageObj = getCartManger(request)
if flag == 'add':
# 加入购物车
dbCartManageObj.add(**request.POST.dict())
elif flag == 'delete':
# 删除商品
dbCartManageObj.update(**request.POST.dict())
return redirect('/cartapp/queryAll/')
相关文章
- 喜大普奔！Django官方文档终于出中文版了
- Django之缓存
- 设置Django+ uwsgi + nginx 的配置过程
- windows 下的Python虚拟环境（vitrualen）pycharm创建Django项目
- django创建web项目
- 1. Python_Django项目之大型电商项目介绍
- 161.Django-restframe基于视图类使用mixins实现最简易的增删改查
- 83.Django项目中使用验证码
- 45.Django模板
- 03.搭建Django项目
- Django框架入门
- python编程：linux环境gunicorn+nginx部署django项目
- Django创建项目和应用
- 解决Linux运行django项目报错SQLite 3.8.3 or later is required (
- Django 项目中添加静态文件夹
- django如何用邮箱代替用户名登录
- 使用 Visual Studio Code（VSCode）搭建简单的 Python + Django 开发环境
- Django运行访问项目出现的问题:Invalid HTTP_HOST header: '192.168.114.25:8001'. You may need to add u'192.168.114.25' to ALLOWED_HOSTS.
- Python Web开发框架Django
- Django项目关闭debug模式后,静态文件无法加载的解决办法
- Django 状态保持3.5
- using NGINX+uWSGI to deploy django project
- 当前，我们的DJANGO项目的requirements.txt文件
- Django中自定义过滤器的使用
- 三十八、python学习之Django框架(一):入门,介绍,设计模式,环境搭建,项目创建,基本配置,创建视图,静态文件,路由与反解析,App应用配置
- python学习之美多商城(十四):商品部分:CKEditor富文本编辑器在Django中的使用、添加项目测试数据