Django无支付网关实现订单存入数据库技术求助

后端视图问题修正 #

你的代码存在多个关键问题导致订单无法正确存入数据库，以下是修正后的完整视图代码：

from django.shortcuts import render, redirect
from django.http.response import JsonResponse
import uuid

from cart.cart import Cart
from .models import Order, OrderItem

def add(request):
    cart = Cart(request)
    if request.POST.get('action') == 'post':
        # 解析前端传来的表单数据
        import json
        form_data = json.loads(request.POST.get('form', '{}'))
        
        user_id = request.user.id if request.user.is_authenticated else None
        carttotal = cart.get_total_price()
        # 生成唯一订单标识，避免重复订单
        order_key = str(uuid.uuid4())

        if not Order.objects.filter(order_key=order_key).exists():
            # 从表单数据中提取用户信息
            full_name = form_data.get('name')
            address = form_data.get('address')
            state = form_data.get('state')
            country = form_data.get('country')
            
            # 创建主订单记录
            order = Order.objects.create(
                user_id=user_id, 
                full_name=full_name, 
                address1=address,
                total_paid=carttotal, 
                order_key=order_key,
                billing_status=False
            )
            order_id = order.pk

            # 创建关联的订单项
            for item in cart:
                OrderItem.objects.create(
                    order_id=order_id, 
                    product=item['product'], 
                    price=item['price'], 
                    quantity=item['qty']
                )
        
        # 调用支付确认逻辑（根据实际支付流程调整）
        payment_confirmation(order_key)
        
        return JsonResponse({'success': '订单已创建', 'order_key': order_key})

def payment_confirmation(order_key):
    # 更新订单支付状态
    Order.objects.filter(order_key=order_key).update(billing_status=True)

def user_orders(request):
    if not request.user.is_authenticated:
        return redirect('login')
    user_id = request.user.id
    orders = Order.objects.filter(user_id=user_id, billing_status=True)
    # 返回渲染后的用户订单页面
    return render(request, 'orders/user_orders.html', {'orders': orders})

前端模板修正 #

前端代码存在语法错误、变量未定义等问题，以下是修正后的模板：

{% extends "../store/base.html" %}
{% load static %}
{% block title %}Order{% endblock %}
{% block content %}

<style>
  .account-form input {
    border: 2px solid #ccc;
    height: calc(2em + .75rem + 2px);
  }

  .form-control {
    border: 2px solid #ccc;
  }

  .account-form input:focus {
    border-color: #1497ff;
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075), 0 0 0px rgba(255, 0, 0, 0.6);
  }
</style>

<div class="container-fluid">
  <div class="row no-gutter">
    <div class="col-md-12">
      <div class="login d-flex align-items-center py-5">
        <div class="container">
          <div class="row">
            <div id="payment-form" class="col-12 col-lg-6 mx-auto">
              <h3 class="mb-3">Billing address</h3>
              <div id="card-errors" class="text-danger" role="alert"></div>
              <!-- 添加CSRF令牌用于POST请求验证 -->
              {% csrf_token %}
              <form id="order-form">
                <div class="row g-3">
                  <div class="col-sm-7">
                    <label for="custName" class="form-label">Customer Name</label>
                    <input type="text" name="name" class="form-control" id="custName" placeholder="" required>
                    <div class="invalid-feedback">
                      Valid first name is required.
                    </div>
                  </div>
                  <div class="col-12">
                    <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
                    <input type="email" name="email" class="form-control" id="email" placeholder="you@example.com">
                  </div>
                  <div class="col-12">
                    <label for="custAdd" class="form-label">Address</label>
                    <input type="text" name="address" class="form-control" id="custAdd" placeholder="1234 Main St" required>
                    <div class="invalid-feedback">
                      Please enter your address.
                    </div>
                  </div>
                  <div class="col-md-5">
                    <label for="country" class="form-label">Country</label>
                    <select class="form-select" id="country" name="country" required>
                      <option value="">Choose...</option>
                      <option>Zambia</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid country.
                    </div>
                  </div>
                  <div class="col-md-4">
                    <label for="state" class="form-label">State</label>
                    <select class="form-select" id="state" name="state" required>
                      <option value="">Choose...</option>
                      <option>Lusaka (Evelyne Hone College)</option>
                    </select>
                    <div class="invalid-feedback">
                      Please provide a valid state.
                    </div>
                  </div>
                </div>
                <hr class="my-4">
                <h4 class="mb-3">Orders</h4>
                <div class="mb-3">
                  <label class="form-label">Total Amount: {{ cart.get_total_price }}</label>
                </div>
                <hr class="my-4">
                <button id="make-payment" class="btn btn-primary w-100 fw-bold">Order Now</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // 获取CSRF令牌
  const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
  const total = {{ cart.get_total_price }};
  const form = document.getElementById('order-form');

  document.getElementById("make-payment").addEventListener('click', function(e){
    e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
    submitFormData();
  });

  function submitFormData(){
    console.log("payment button clicked");
    
    // 收集表单输入数据
    const userFormData = {
      'name': document.getElementById('custName').value,
      'email': document.getElementById('email').value,
      'total': total,
      'address': document.getElementById('custAdd').value,
      'state': document.getElementById('state').value,
      'country': document.getElementById('country').value
    };

    fetch('/add_order/', { // 确保此URL与urls.py中的路由配置一致
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRFToken': csrfToken
      },
      body: new URLSearchParams({
        'action': 'post',
        'form': JSON.stringify(userFormData)
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('订单提交成功！');
        // 此处可添加清空购物车的逻辑
        window.location.href = '/user_orders/'; // 跳转到用户订单列表页
      } else {
        document.getElementById('card-errors').textContent = data.error || '提交失败，请重试';
      }
    })
    .catch(error => {
      console.error('Error:', error);
      document.getElementById('card-errors').textContent = '网络错误，请稍后再试';
    });
  }
</script>

{% endblock %}

关键修正说明 #

1. 后端：

   • 生成唯一order_key（使用uuid），避免重复订单
   • 从前端接收表单数据，不再硬编码用户信息
   • 修复payment_confirmation函数逻辑，正确更新订单支付状态
   • user_orders视图返回渲染后的页面，而非直接返回查询集
   • 清理重复导入的模块

2. 前端：

   • 修复模板变量语法错误，正确显示购物车总价
   • 添加CSRF令牌验证，避免跨站请求伪造错误
   • 阻止表单默认提交行为，防止页面刷新
   • 正确收集表单字段数据，修复变量未定义问题
   • 优化fetch请求格式，确保后端能正确解析数据
   • 移除重复的按钮ID，修正CSS语法错误

后续步骤 #

1. 在urls.py中添加对应路由：

   from django.urls import path
   from . import views
   
   urlpatterns = [
       path('add_order/', views.add, name='add_order'),
       path('user_orders/', views.user_orders, name='user_orders'),
   ]
   

2. 确保Order模型包含user_id、full_name、address1、total_paid、order_key、billing_status等字段
3. 测试订单提交流程，检查数据库中是否生成Order和OrderItem记录

内容的提问来源于stack exchange，提问作者Given Sichilima