新星计划Django基于PythonWeb的Django框架设计实现天天生鲜系统-9购物车提交订单订单提交成功页面功能实现

Posted 2021-05-22 Vax_Loves_1314

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了新星计划Django基于PythonWeb的Django框架设计实现天天生鲜系统-9购物车提交订单订单提交成功页面功能实现相关的知识，希望对你有一定的参考价值。

购物车页面功能实现

购物车页面主要两个功能:

显示购物车商品详细数据.
增加商品删除功能.

我们在 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">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</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">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</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 页面, 并传递过去订单编号.

以上是关于新星计划Django基于PythonWeb的Django框架设计实现天天生鲜系统-9购物车提交订单订单提交成功页面功能实现的主要内容，如果未能解决你的问题，请参考以下文章

新星计划Django基于PythonWeb的Django框架设计实现天天生鲜系统-9购物车提交订单订单提交成功页面功能实现

Django基于PythonWeb的Django框架设计实现天天生鲜系统-7首页界面

Django基于PythonWeb的Django框架设计实现天天生鲜系统-1

Django基于PythonWeb的Django框架设计实现天天生鲜系统-2项目开发部署环境

Django基于PythonWeb的Django框架设计实现天天生鲜系统-5数据库操作

Django基于PythonWeb的Django框架设计实现天天生鲜系统-4创建视图