【新星计划】【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-9购物车、提交订单、订单提交成功页面功能实现
【新星计划】【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-9购物车、提交订单、订单提交成功页面功能实现
天道Vax的时间宝藏
发布于 2021-08-11 15:53:40
发布于 2021-08-11 15:53:40
购物车页面功能实现
购物车页面主要两个功能:
- 显示购物车商品详细数据.
- 增加商品删除功能.
我们在 cart 应用的 views.py 模块中增加 show_cart 视图函数, 来显示购物车商品数据, 代码如下:
def show_cart(request):
"""展示购物车商品"""
# 读取购物车商品列表
cart_goods_list = []
# 商品总数
cart_goods_count = 0
# 商品总价
cart_goods_money = 0
for goods_id, goods_num in request.COOKIES.items():
if goods_id == 'csrftoken':
continue
cart_goods = GoodsInfo.objects.get(id=goods_id)
cart_goods.goods_num = goods_num
cart_goods.total_money = int(goods_num) * cart_goods.goods_price
cart_goods_list.append(cart_goods)
# 累加购物车商品总数
cart_goods_count = cart_goods_count + int(goods_num)
# 累计商品总价
cart_goods_money += int(goods_num) * cart_goods.goods_price
return render(request, 'cart.html', {'cart_goods_list': cart_goods_list,
'cart_goods_count': cart_goods_count,
'cart_goods_money': cart_goods_money})cart.html 模板代码数据如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>天天生鲜-购物车</title>
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
</head>
<body>
<div class="header_con">
<div class="header">
<div class="welcome fl">欢迎来到天天生鲜!</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="index.html" class="logo fl"><img src="/static/images/logo.png"></a>
<div class="sub_page_name fl">| 购物车</div>
</div>
<div class="total_count">全部商品<em>{{ cart_goods_count }}</em>件</div>
<ul class="cart_list_th clearfix">
<li class="col01">商品名称</li>
<li class="col02">商品单位</li>
<li class="col03">商品价格</li>
<li class="col04">数量</li>
<li class="col05">小计</li>
<li class="col06">操作</li>
</ul>
{% for cart_goods in cart_goods_list %}
<ul class="cart_list_td clearfix">
<li class="col01"></li>
<li class="col02"><img src="/static/{{ cart_goods.goods_img }}"></li>
<li class="col03">奇异果<br><em>{{ cart_goods.goods_price }}元/{{ cart_goods.goods_unit }}</em></li>
<li class="col04">{{ cart_goods.goods_unit }}</li>
<li class="col05">{{ cart_goods.goods_price }}元</li>
<li class="col06">{{ cart_goods.goods_num }}</li>
<li class="col07">{{ cart_goods.goods_price }}元</li>
<li class="col08"><a href="/cart/remove_cart/?id={{ cart_goods.id }}">删除</a></li>
</ul>
{% endfor %}
<ul class="settlements">
<li class="col01">.</li>
<li class="col02">.</li>
<li class="col03">合计(不含运费)：<span>¥</span><em>{{ cart_goods_money }}</em><br>共计<b>{{ cart_goods_count }}</b>件商品</li>
<li class="col04"><a href="/cart/place_order/">去结算</a></li>
</ul>
<div class="footer">
<div class="foot_link">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
<p>电话：010-****888 京ICP备*******8号</p>
</div>
</body>
</html>如下模板代码用于显示购物车商品数据:
{% for cart_goods in cart_goods_list %}
<ul class="cart_list_td clearfix">
<li class="col01"></li>
<li class="col02"><img src="/static/{{ cart_goods.goods_img }}"></li>
<li class="col03">奇异果<br><em>{{ cart_goods.goods_price }}元/{{ cart_goods.goods_unit }}</em></li>
<li class="col04">{{ cart_goods.goods_unit }}</li>
<li class="col05">{{ cart_goods.goods_price }}元</li>
<li class="col06">{{ cart_goods.goods_num }}</li>
<li class="col07">{{ cart_goods.goods_price }}元</li>
<li class="col08"><a href="/cart/remove_cart/?id={{ cart_goods.id }}">删除</a></li>
</ul>
{% endfor %}如下代码显示购物车的总商品数量、商品总价:
<li class="col03">合计(不含运费)：<span>¥</span><em>{{ cart_goods_money }}</em><br>共计<b>{{ cart_goods_count }}</b>件商品</li>我们的购物车页面提供了删除购物车商品的功能, 该功能的链接代码如下:
<li class="col08"><a href="/cart/remove_cart/?id={{ cart_goods.id }}">删除</a></li>当用户要删除某个购物车商品时, 该请求由 cart 应用下的 remove_cart 视图来处理, 该视图函数实现如下:
def remove_cart(request):
"""删除购物车商品"""
# 获得要删除的商品ID
goods_id = request.GET.get('id', '')
if goods_id:
# 获得上一页面地址
prev_url = request.META['HTTP_REFERER']
# 写入到 cookie 中
response = redirect(prev_url)
# 判断商品是否存在
goods_count = request.COOKIES.get(goods_id, '')
if goods_count:
response.delete_cookie(goods_id)
return response首先要获得删除商品的 ID, 代码如下:
goods_id = request.GET.get('id', '')如果该商品在购物车中存在, 则删除它. 删除完成之后跳转到上一页面, 也就是购物车页面, 代码如下:
if goods_id:
# 获得上一页面地址
prev_url = request.META['HTTP_REFERER']
# 写入到 cookie 中
response = redirect(prev_url)
# 判断商品是否存在
goods_count = request.COOKIES.get(goods_id, '')
if goods_count:
response.delete_cookie(goods_id)提交订单页面功能实现
当购物车商品数据确认无误之后, 点击结算按钮跳转到订单提交页面, 在该页面用户就需要填写收货地址、联系电话、联系人等信息.
我们在 cart 应用下的 views.py 模块中新增如下视图函数:
def place_order(request):
"""提交订单页面"""
# 读取购物车商品列表
cart_goods_list = []
# 商品总数
cart_goods_count = 0
# 商品总价
cart_goods_money = 0
for goods_id, goods_num in request.COOKIES.items():
if goods_id == 'csrftoken':
continue
cart_goods = GoodsInfo.objects.get(id=goods_id)
cart_goods.goods_num = goods_num
cart_goods.total_money = int(goods_num) * cart_goods.goods_price
cart_goods_list.append(cart_goods)
# 累加购物车商品总数
cart_goods_count = cart_goods_count + int(goods_num)
# 累计商品总价
cart_goods_money += int(goods_num) * cart_goods.goods_price
return render(request, 'place_order.html', {'cart_goods_list': cart_goods_list,
'cart_goods_count': cart_goods_count,
'cart_goods_money': cart_goods_money})并在 ttsx/urls.py 模块中配置该视图对应的请求网址, 新增配置如下:
from django.conf.urls import include, url
from django.contrib import admin
from goods.views import index # 导入视图函数
from goods.views import detail
from goods.views import goods
from cart.views import add_cart
from cart.views import show_cart
from cart.views import place_order
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^index/$', index),
url(r'^detail/$', detail),
url(r'^cart/add_cart/$', add_cart),
url(r'^goods/$', goods),
url(r'^cart/show_cart/$', show_cart),
url(r'^cart/place_order/$', place_order),
]cart.html 模板代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>天天生鲜-提交订单</title>
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
</head>
<body>
<div class="header_con">
<div class="header">
<div class="welcome fl">欢迎来到天天生鲜!</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="/" class="logo fl"><img src="/static/images/logo.png"></a>
<div class="sub_page_name fl">| 提交订单</div>
</div>
<h3 class="common_title">商品列表</h3>
<div class="common_list_con clearfix">
<ul class="goods_list_th clearfix">
<li class="col01">商品名称</li>
<li class="col02">商品单位</li>
<li class="col03">商品价格</li>
<li class="col04">数量</li>
<li class="col05">小计</li>
</ul>
{% for cart_goods in cart_goods_list %}
<ul class="goods_list_td clearfix">
<li class="col01">1</li>
<li class="col02"><img src="/static/{{ cart_goods.goods_img }}"></li>
<li class="col03">{{ cart_goods.goods_name }}</li>
<li class="col04">{{ cart_goods.goods_unit }}</li>
<li class="col05">{{ cart_goods.goods_price }}元</li>
<li class="col06">{{ cart_goods.goods_num }}</li>
<li class="col07">{{ cart_goods.total_money }}元</li>
</ul>
{% endfor %}
</div>
<h3 class="common_title">收货地址</h3>
<form action="/cart/submit_order/" method="post">
{% csrf_token %}
<div class="common_list_con clearfix">
<dl>
<dd>
<table>
<tr>
<td>收货地址:</td><td><input style="width: 350px; height: 23px;" type="text" name="addr"></td>
</tr>
<tr>
<td>收货人:</td><td><input style="width: 350px; height: 23px;" type="text" name="recv"></td>
</tr>
<tr>
<td>联系电话:</td><td><input style="width: 350px; height: 23px;" type="text" name="tele"></td>
</tr>
<tr>
<td>备注:</td><td><textarea style="width: 350px; height: 100px; font-size: 12px;" name="extra"></textarea></td>
</tr>
</table>
</dd>
</dl>
</div>
<h3 class="common_title">支付方式</h3>
<div class="common_list_con clearfix">
<div class="pay_style_con clearfix">
<input type="radio" name="pay_style" checked>
<label class="cash">货到付款</label>
</div>
</div>
<h3 class="common_title">总金额结算</h3>
<div class="common_list_con clearfix">
<div class="settle_con">
<div class="total_goods_count">共<em>{{ cart_goods_count }}</em>件商品，总金额<b>{{ cart_goods_money }}元</b></div>
<div class="transit">运费：<b>10元</b></div>
<div class="total_pay">实付款：<b>{{ cart_goods_money|add:10 }}元</b></div>
</div>
</div>
<div class="order_submit clearfix">
<input type="submit" value="提交订单"/>
</div>
</form>
<div class="footer">
<div class="foot_link">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
<p>电话：010-****888 京ICP备*******8号</p>
</div>
<div class="popup_con">
<div class="popup">
<p>订单提交成功！</p>
</div>
<div class="mask"></div>
</div>
</body>
</html>我们在模板中新增了一个 form 表单用于提交订单数据, 代码如下:
<form action="/cart/submit_order/" method="post">
{% csrf_token %}
<div class="common_list_con clearfix">
<dl>
<dd>
<table>
<tr>
<td>收货地址:</td><td><input style="width: 350px; height: 23px;" type="text" name="addr"></td>
</tr>
<tr>
<td>收货人:</td><td><input style="width: 350px; height: 23px;" type="text" name="recv"></td>
</tr>
<tr>
<td>联系电话:</td><td><input style="width: 350px; height: 23px;" type="text" name="tele"></td>
</tr>
<tr>
<td>备注:</td><td><textarea style="width: 350px; height: 100px; font-size: 12px;" name="extra"></textarea></td>
</tr>
</table>
</dd>
</dl>
</div>
<h3 class="common_title">支付方式</h3>
<div class="common_list_con clearfix">
<div class="pay_style_con clearfix">
<input type="radio" name="pay_style" checked>
<label class="cash">货到付款</label>
</div>
</div>
<h3 class="common_title">总金额结算</h3>
<div class="common_list_con clearfix">
<div class="settle_con">
<div class="total_goods_count">共<em>{{ cart_goods_count }}</em>件商品，总金额<b>{{ cart_goods_money }}元</b></div>
<div class="transit">运费：<b>10元</b></div>
<div class="total_pay">实付款：<b>{{ cart_goods_money|add:10 }}元</b></div>
</div>
</div>
<div class="order_submit clearfix">
<input type="submit" value="提交订单"/>
</div>
</form>
该 form 表单将订单数据提交到 /cart/submit_order/ 页面进行处理, 代码如下:
<form action="/cart/submit_order/" method="post">
{% csrf_token %}其中 {% csrf_token %} 主要用于安全设置, 这是django提供的防护错误, 用于防护跨站请求伪造. 在如果提交的表单是以 post 方式提交的话, 那么需要我们在 form 表单内部加上该代码.
代码 {{ cart_goods_money|add:10 }} 的含义为 cart_goods_money 的值 加上10. add 是django模板语法中提供的过滤器函数, 使用语法就是:
{{ 变量|过滤器函数:参数 }}用户填写完收货信息之后, 点击提交订单按钮, 将表单提交到了 /cart/submit_order/ 页面, 我们在 cart 应用下的 views.py 模块中新增 submit_order 视图函数用于处理订单提交. 该视图函数实现如下:
def submit_order(request):
"""保存订单"""
# 获得订单信息
addr = request.POST.get('addr', '')
recv = request.POST.get('recv', '')
tele = request.POST.get('tele', '')
extra = request.POST.get('extra', '')
# 保存订单信息
order_info = OrderInfo()
order_info.order_addr = addr
order_info.order_tele = tele
order_info.order_recv = recv
order_info.order_extra = extra
# 生成订单编号
order_info.order_id = str(int(time.time() * 1000)) + str(int(time.clock() * 1000000))
order_info.save()
# 跳转页面
response = redirect('/cart/submit_success/?id=%s' % order_info.order_id)
# 保存订单商品信息
for goods_id, goods_num in request.COOKIES.items():
if goods_id == 'csrftoken':
continue
# 查询商品信息
cart_goods = GoodsInfo.objects.get(id=goods_id)
# 创建订单商品信息
order_goods = OrderGoods()
order_goods.goods_info = cart_goods
order_goods.goods_order = order_info
order_goods.goods_num = goods_num
order_goods.save()
# 删除购物车信息
response.delete_cookie(goods_id)
return response配置该视图与网址的对应关系, 编辑 ttsx/urls.py 模块如下:
from django.conf.urls import include, url
from django.contrib import admin
from goods.views import index # 导入视图函数
from goods.views import detail
from goods.views import goods
from cart.views import add_cart
from cart.views import show_cart
from cart.views import place_order
from cart.views import submit_order
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^index/$', index),
url(r'^detail/$', detail),
url(r'^cart/add_cart/$', add_cart),
url(r'^goods/$', goods),
url(r'^cart/show_cart/$', show_cart),
url(r'^cart/place_order/$', place_order),
url(r'^cart/submit_order/$', submit_order),
]首先我们获得表单提交的数据, 这里需要大家注意, 如果表单以 post 方提交的话, 那么表单中提交的数据会被存储在 request 对象的 POST 字典中.
# 获得订单信息
addr = request.POST.get('addr', '')
recv = request.POST.get('recv', '')
tele = request.POST.get('tele', '')
extra = request.POST.get('extra', '')我们的订单信息保存分为两部分, 第一部分是订单基本信息, 存储在 OrderInfo 模型所对应的数据库表中, 代码如下:
# 保存订单信息
order_info = OrderInfo()
order_info.order_addr = addr
order_info.order_tele = tele
order_info.order_recv = recv
order_info.order_extra = extra
# 生成订单编号
order_info.order_id = str(int(time.time() * 1000)) + str(int(time.clock() * 1000000))
order_info.save()然后将订单中的商品信息存储在 OrderGoods 模型所对应的表中. 首先我们创建了一个重定向响应对象, 指定订单提交成功之后要跳转的页面:
# 跳转页面
response = redirect('/cart/submit_success/?id=%s' % order_info.order_id)然后保存订单商品信息到数据库中, 并删除购物车中商品数据, 代码如下:
# 保存订单商品信息
for goods_id, goods_num in request.COOKIES.items():
if goods_id == 'csrftoken':
continue
# 查询商品信息
cart_goods = GoodsInfo.objects.get(id=goods_id)
# 创建订单商品信息
order_goods = OrderGoods()
order_goods.goods_info = cart_goods
order_goods.goods_order = order_info
order_goods.goods_num = goods_num
order_goods.save()
# 删除购物车信息
response.delete_cookie(goods_id)当订单提交成功之后, 删除购物车中的商品信息, 跳转到 submit_success 页面, 并传递过去订单编号.
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-05-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。