我最近在做毕设，关于点餐系统的。现在需要将数据库中保存的所有用户订单都在前端页面显示。每一个订单中的商品及数量不一定相同。我采用的数据交互的数据格式是JSON数据。我在后端，每次都将每一个订单的所包含的每一样商品数据以字典的形式存在列表中。然后在前端将这一列表转存到前端js代码中定义的列表中。
之前学习了一段时间vue，就通过v-for指令从列表中依次将每一订单的商品信息渲染到前端页面上。但是我发现前端页面最终显示的商品信息却都是最后一个订单中的商品信息。遍历的最后一个订单中商品信息会将前面遍历的订单中的商品信息覆盖掉。
我尝试着在每次获取到一个订单编号的时候就直接去后端数据库中获取当前订单编号的商品信息，但还是没有解决上面出现的问题。
以下是我的相关代码：
前端js：
get_allOrder_info() {
var url = 'http://127.0.0.1:8000' + '/allOrders/info/';
axios.get(
url,
{
params: {
page: this.page,
page_size: this.page_size,
ordering: this.ordering
},
responseType: 'json',
withCredentials: true
}
)
.then(response => {
this.order_infos = response.data.order_list;
this.count = response.data.count;
for (var i = 0; i < this.order_infos.length; i++) {
this.order_id = this.order_infos[i].id;
console.log(this.order_id);
// this.get_allOrder_good(this.order_infos[i].id);
var url = 'http://127.0.0.1:8000' + '/allOrders/good/';
axios.get(
url,
{
params: {
order_id: this.order_id,
ordering: this.ordering
},
responseType: 'json',
withCredentials: true
}
)
.then(response => {
this.order_goods = response.data.order_good_list;
console.log(response.data.order_good_list);
// console.log(this.order_goods[1].name);
})
.catch(error => {
console.log(error + '获取订单商品表失败');
})
}
})
.catch(error => {
console.log(error + '获取订单信息表失败');
})
},
前端html：
<!-- TODO:要通过 v-for 指令循环显示出订单'基本信息'表中的数据 -->
<div class="detail" v-for="info in order_infos">
<ul class="order_list">
<li>
<span class="orderId">订单编号：<em>[[info.id]]</em></span>
<span class="create_time">成交时间：<em>[[info.create_time]]</em></span>
</li>
</ul>
<table class="order_list_table">
<tr>
<td class="td1">
<!-- TODO:要通过 v-for 指令循环显示出订单'商品'表中的数据 -->
<ul class="order_goods_list clearfix" v-for="good in order_goods">
<li class="col01"><img :src="good.image_url"></li>
<li class="col02">[[good.name]]</li>
<li class="col03">[[good.price]]<span>元</span></li>
<li class="col04">[[good.count]]</li>
</ul>
</td>
<td class="td2">[[info.pay_method]]</td>
<td class="td3">[[info.amount]]<span>元</span></td>
<td class="td4">[[info.status]]</td>
</tr>
</table>
</div>
后端python，Django：
class AllOrderInfosView(View):
def get(self, request):
page = request.GET.get('page')
page_size = request.GET.get('page_size')
ordering = request.GET.get('ordering')
orders = OrderInfo.objects.filter(status=1, is_delete=False).order_by(ordering)
# 分页
paginator = Paginator(orders, per_page=page_size)
# 获取指定页面的数据
page_orders = paginator.page(page)
order_list = []
for order in page_orders.object_list:
order_list.append({
'id': order.order_id,
'amount': order.total_amount,
'create_time': order.create_time,
'pay_method': order.get_pay_method_display(),
'status': order.get_status_display()
})
# 得到总页数
total_num = paginator.num_pages
return JsonResponse({'code': 0, 'errmsg': 'ok', 'order_list': order_list, 'count': total_num})
class AllOrderGoodsView(View):
def get(self, request):
order_id = request.GET.get('order_id')
ordering = request.GET.get('ordering')
product_list = []
order_products = OrderGoods.objects.filter(order_id=order_id).order_by(ordering)
for order_product in order_products:
product_list.append({
'count': order_product.count,
'price': order_product.price,
'name': order_product.product.product_name,
'image_url': order_product.product.img_url
})
return JsonResponse({'code': 0, 'errmsg': 'ok', 'order_good_list': product_list})
