网站搜索引擎优化公司vue手机网站开发
分析
- 查看订单的本质是查询并在页面展示订单数据，根据之前提交订单的设计可知，订单涉及到基本订单信息和商品订单信息两个部分，所以需要从两张表查询数据。
- 因是查询，所以采用get方法，将查询到的数据展示在user_center_order.html模板。
- 订单属于用户数据，所以在users应用中的views.py中定义视图类UserOrderInfoView，继承LoginRequiredMixin，保证登录状态，并在其get方法中实现查看功能。
实现
users应用中的views.py中定义视图类UserOrderInfoView
class UserOrderInfoView(LoginRequiredMixin, View):def get(self, request, page_num):"""提供我的订单页面"""user = request.user# 通过用户对象反向查询订单信息，[关联模型小写]_set是 Django 默认的反向关系管理器名称orders = user.orderinfo_set.all().order_by('-create_time')for order in orders:# 绑定订单状态order.status_name = OrderInfo.ORDER_STATUS_CHOICES[order.status - 1][1]# 绑定支付状态order.pay_method_name = OrderInfo.PAY_METHOD_CHOICES[order.pay_method - 1][1]order.sku_list = []# 正向查询订单商品order_goods = order.skus.all()for order_good in order_goods:sku = order_good.skusku.count = order_good.countsku.amount = sku.price * sku.countorder.sku_list.append(sku)# 分页处理page_num = int(page_num)try:paginator = Paginator(orders, constants.ORDERS_LIST_LIMIT)page_orders = paginator.page(page_num)total_page = paginator.num_pagesexcept EmptyPage as e:return HttpResponseNotFound('订单不存在')context = {'page_orders': page_orders,'total_page': total_page,'page_num': page_num,}return render(request, 'user_center_order.html', context)
在users应用的urls.py中增加路由
path('orders/info/<int:page_num>/', views.UserOrderInfoView.as_view(), name='myorderinfo'),
user_center_order.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/jquery.pagination.css') }}"><link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}"><link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}"><script type="text/javascript" src="{{ static('js/jquery-1.12.4.min.js') }}"></script><script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script><script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
</head>
<body>
<div id="app"><div class="header_con"><div class="header" v-cloak><div class="welcome fl">欢迎来到小鱼商城!</div><div class="fr"><div v-if="username" class="login_btn fl">欢迎您：<em>[[ username ]]</em><span>|</span><a href="{{ url('users:logout') }}">退出</a></div><div v-else class="login_btn fl"><a href="{{ url('users:login') }}">登录</a><span>|</span><a href="{{ url('users:register') }}">注册</a><a href="{{ url('users:register') }}">注册</a></div><div class="user_link fl"><span>|</span><a href="{{ url('users:info') }}">用户中心</a><span>|</span><a href="{{ url('carts:info') }}">我的购物车</a><span>|</span><a href="{{ url('users:myorderinfo',args=(1,)) }}">我的订单</a></div></div></div></div><div class="search_bar clearfix"><a href="{{ url('contents:index') }}" class="logo fl"><img src="{{ static('images/logo.png') }}"></a><div class="search_wrap fl"><form method="get" action="/search/" class="search_con"><input type="text" class="input_text fl" name="q" placeholder="搜索商品"><input type="submit" class="input_btn fr" name="" value="搜索"></form><ul class="search_suggest fl"><li><a href="#">索尼微单</a></li><li><a href="#">优惠15元</a></li><li><a href="#">美妆个护</a></li><li><a href="#">买2免1</a></li></ul></div></div><div class="main_con clearfix"><div class="left_menu_con clearfix"><h3>用户中心</h3><ul><li><a href="{{ url('users:info') }}">· 个人信息</a></li><li><a href="{{ url('users:address') }}">· 收货地址</a></li><li><a href="{{ url('users:myorderinfo',args=(1,)) }}" class="active">· 全部订单</a></li><li><a href="{{ url('users:resetpwd') }}">· 修改密码</a></li></ul></div><div class="right_content clearfix"><h3 class="common_title2">全部订单</h3>{% for order in page_orders %}<ul class="order_list_th w978 clearfix"><li class="col01">{{ order.create_time.strftime('%Y-%m-%d %H:%M:%S') }}</li><li class="col02">订单号：{{ order.order_id }}</li></ul><table class="order_list_table w980"><tbody><tr><td width="55%">{% for sku in order.sku_list %}<ul class="order_goods_list clearfix"><li class="col01"><img src="/static/images/goods/{{ sku.default_image.url }}.jpg"></li><li class="col02"><span>{{ sku.name }}</span></li><li class="col03">{{ sku.count }}</li><li class="col04">{{ sku.amount }}元</li></ul>{% endfor %}</td><td width="15%">{{ order.total_amount }}元<br>含运费：{{ order.freight }}元</td><td width="15%">{{ order.pay_method_name }}</td><td width="15%"><a @click="oper_btn_click('{{ order.order_id }}', {{ order.status }})" class="oper_btn">{{order.status_name }}</a></td></tr></tbody></table>{% endfor %}<div class="pagenation"><div id="pagination" class="page"></div></div></div></div><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 © 2024 北京小鱼商业股份有限公司 All Rights Reserved</p><p>电话：010-****888 京ICP备*******8号</p></div>
</div>
<script type="text/javascript" src="{{ static('js/common.js') }}"></script>
<script type="text/javascript" src="{{ static('js/user_center_order.js') }}"></script>
<script type="text/javascript" src="{{ static('js/jquery.pagination.min.js') }}"></script>
<script type="text/javascript">$(function () {$('#pagination').pagination({currentPage: {{ page_num }},totalPage: {{ total_page }},callback: function (current) {{#location.href = '/orders/info/1/';#}location.href = '/orders/info/' + current + '/';}})});
</script>
</body>
</html>
最后，将其它模板中注释掉的查看订单的语句释放掉，即可看到查询订单的效果。