基于Django+mysql的点餐系统设计-第十二篇(H5:下单操作)重写
博客目录:
......
十、基于Django+mysql的点餐系统设计第十篇(H5手机移动端点餐:登录)
十一、基于Django+mysql的点餐系统设计-第十一篇(H5手机移动端点餐:购物车操作)
十二、基于Django+mysql点餐系统设计-第十二篇(移动端:会员下单处理)
十二、基于Django+mysql的点餐系统设计-第十二篇(H5:下单操作)重写
本章源码下载地址:https://github.com/hopeSuceess/testorder/tree/testorder_2022071801
前段时间忙其他事断更了两个多月,现在终于有精力继续写博客了。另外,电脑坏了,换了块主板后,做了系统重置,python、mysql、pychram、github、sourcetree等工具又重新进行了环境配置、设置,好麻烦。遇到了一些问题,还好都解决了。
言归正传,现在开始讲下单操作。当用户将选好的餐品置于购物车,在购物车点击"去结算",页面跳转到"提交订单"页面。"提交订单"页面显示餐品信息、价格、数量和总价。正常情况下,可以调支付方式的接口,进行支付宝支付或者微信支付。但是,为了方便,这里点击"提交订单",直接进行数据插入数据库的处理,同时,前端页面跳转到"订单处理"页面,订单处理页面提示"下单成功!",并展示订单号、消费金额。点击"继续购物",跳转到餐品选择首页。
首先说加载移动端订单页,在首页点击"去结算",页面跳到提交订单页。在mobile/urls.py中添加加载移动端订单页的路由:
# 订单处理
path('orders/add', index.addOrders, name="mobile_addorders"), # 加载移动端订单页
按照顺序,页面的请求会从路由跳转到具体的实现方法。加载订单的方法路径为mobile/views/index.py/addOrders()
def addOrders(request):
'''移动端下单表单页'''
# 尝试从session中获取名字为cartlist的购物车信息,若没有返回{}
cartlist = request.session.get('cartlist', {})
total_money = 0 # 初始化一个总金额
# 遍历购物车中的菜品并累加总金额
for vo in cartlist.values():
total_money += vo['num']*vo['price']
request.session['total_money'] = total_money # 放进session
return render(request,"mobile/addOrders.html")
解释下上面的代码逻辑:页面在点击去结算时触发了orders/add路由,路由将代码逻辑处理抛给了addOrders函数。addOrders函数是怎么处理的呢?
在缓存中获取购物车信息cartlist,如果cartlist不在缓存中,返回空;若缓存中存在cartlist,则for循环遍历cartlist,将每一个餐品的数目和价格相乘,并累加得出的总额放到total_money变量中,然后将total_money放到缓存中。每个餐品的数目和价格以及餐品总额都得到了,那么就将后端的处理逻辑传给前端吧。
在templates/mobile/addOrders.html中进行后端代码逻辑的接收。在addOrders.html中首选将每个餐品的图片名称、价格、数目显示出来。怎么显示呢?大家思考两分钟。
显示的逻辑是获取购物车(cartlist)的信息,然后对cartlist进行遍历,将每个餐品的图片名称、价格、数目遍历出来,如下图:
<div class="list-content cartlist order-Pro">
<ul>
{% for vo in request.session.cartlist.values %}
<li class="line">
<a href="#"><div class="pro-img"><img src="{% static 'uploads/product/' %}{{ vo.cover_pic }}" alt=""></div></a>
<div class="pro-con"><h3>{{ vo.name }}</h3><b>¥{{ vo.price }}</b>×{{ vo.num }}</div>
</li>
{% endfor %}
</ul>
</div>
至于支付方式,理想状态肯定是支持支付宝支付和微信支付了,但是由于本次没有接入支付宝支付和微信支付的接口,所以就先把这两个支付方式放到前端页面,后期有机会了可以再完善支付接口。
<!--支付方式-->
<div class="order-Delivery line" id="orderPays">
<p>支付方式</p>
<ol class="FilterContentList">
</ol>
<div class="list">
<ul class="line">
<li class="select" bank="4"><i class="icon-alipay"></i>支付宝支付<em class="icon-correct"></em></li>
<li bank="1"><i class="icon-weixinpay"></i>微信支付<em class="icon-correct"></em></li>
</ul>
</div>
</div>
接下来,完善总额和提交订单的逻辑。
<footer>
<div class="button"><button onclick="doSubmit()">提交订单</button></div>
<h4>实付款:¥{{ request.session.total_money }}</h4>
</footer>
通过在缓存中获取total_money来展现付款总额,提交订单的操作通过ajax触发doSubmit()方法。doSubmit逻辑如下:
//执行订单提交操作函数
function doSubmit(){
window.location.href = "{% url 'mobile_doaddorders' %}";
}
通过doSubmit()方法的执行,页面就可以进行订单的处理了。doSubmit()方法中要跳转的链接"mobile_doaddorders"引出了订单处理的逻辑。
首先,通过"mobile_doaddorders"找到orders/doadd路由,该路由的处理逻辑在哪呢?它在mobile/views/index.py下,具体实现逻辑如下:
path('orders/doadd', index.doAddOrders, name="mobile_doaddorders"), #执行移动端下单操作
通过路由跳转到处理订单处理操作的后端方法index.doAddOrders中,由于没有对接支付宝支付和微信支付的接口,在这里doAddOrders函数只需要将包括价格、数量等在内的餐品信息导入到数据库就可以了。
def doAddOrders(request):
'''执行移动端下单操作'''
try:
#执行订单信息的添加
od = Orders()
od.shop_id = request.session['shopinfo']['id']
od.member_id = request.session['mobileuser']['id']
od.user_id = 0
od.money = request.session['total_money']
od.status = 1 #订单状态:1进行中/2无效/3已完成
od.payment_status = 2 #支付状态:1未支付/2已支付/3已退款
od.create_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
od.update_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
od.save()
# 执行支付信息添加
op = Payment()
op.order_id = od.id #订单id号
op.member_id = request.session['mobileuser']['id']
op.type = 2 #1会员付款/2收银收款
op.bank = request.GET.get("bank", 3) # 收款银行渠道:1微信/2余额/3现金/4支付宝
op.money = request.session['total_money']
op.status = 2 # 支付状态:1未支付/2已支付/3已退款
op.create_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
op.update_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
op.save()
# 执行订单详情的添加
cartlist = request.session.get("cartlist", {}) # 获取购物车中的菜品信息
# 遍历购物车中的菜品并添加到订单详情中
for item in cartlist.values():
ov = OrderDetail()
ov.order_id = od.id # 订单id
ov.product_id = item['id'] # 菜品id
ov.product_name = item['name'] # 菜品名称
ov.price = item['price'] # 单价
ov.quantity = item['num'] #数量
ov.status = 1 # 状态:1正常/9删除
ov.save()
del request.session['cartlist']
del request.session['total_money']
except Exception as err:
print(err)
return render(request,"mobile/orderinfo.html", {"order": od})
通过看上面doAddOrders函数处理逻辑可知,订单信息、支付信息、订单详情三个数据库中插入的数据,大部分来源于缓存。当将缓存中的数据插入到数据库中后,将缓存中的cartlist、total_money。至此,订单处理的逻辑处理完了。
后端将订单处理完后,前端页面该怎么显示呢?后端逻辑处理完后,将处理结果渲染到mobile/orderinfo.html页面,并且带上订单信息也就是Orders数据库的数据。看下面mobile/orderinfo.html页面的代码逻辑:
{% extends 'mobile/base.html' %}
{% block mainbody %}
<!--头部-->
<header>
<div class="header">
<h1>订单处理</h1>
<a href="javascript:window.history.back();" class="return"><i></i></a>
</div>
</header>
<!--内容区-->
<article class="main-container loginContent">
<h3>下单成功!</h3>
<h4>订单号:{{ order.id }} 消费金额:{{ order.money }} </h4>
<div class="button"><button onclick="location.href='{% url 'mobile_index' %}'">继续购物</button></div>
</article>
{% endblock %}
分析一下mobile/orderinfo.html页面的代码:1、返回到上一步调用了现成的方法 javascript:window.history.back(); 2、将订单号和消费金额显示出来,因为后端已经将订单信息赋予给order传给前端了,所以直接获取订单信息的id号和金额就可以了 <h4>订单号:{{ order.id }} 消费金额:{{ order.money }} </h4> ;
3、如果在页面点击继续购物的话,会跳转到餐品首页。怎么实现的逻辑呢?当用户点击"继续购物"按钮时,触发了跳转链接,‘mobile_index’将页面引导到路由页面,MTV一整套循环后,跳转到了移动端餐品首页 <div class="button"><button onclick="location.href='{% url 'mobile_index' %}'">继续购物</button></div>
到这里,H5手机移动端点餐:下单操作讲完了。在下单操作快讲完的时候,发现移动端下单操作讲过,时隔两个多月再继续讲,忘了之前的进度了,下一篇要将大堂点餐的下单操作了。
请先 后发表评论~