如何在Django中处理React发送的POST请求并执行业务逻辑后返回用户信息

以下完全匹配你提到的用户持20金币购买15金币商品的判定场景，前后端完整实现步骤如下：

1 Django后端核心逻辑实现 #

后端负责所有核心业务规则校验、数据操作，避免前端篡改数据绕过规则。

• 模型定义（示例）

# models.py
from django.db import models
from django.contrib.auth.models import User

# 用户账户表，存储金币余额
class UserAccount(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name="account")
    coins = models.IntegerField(default=0)

# 商品表，存储商品售价等信息
class Product(models.Model):
    name = models.CharField(max_length=100)
    price = models.IntegerField(default=0)

• 购买接口视图

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.views.decorators.csrf import csrf_exempt
from .models import UserAccount, Product
import json

# 注意：生产环境请移除@csrf_exempt，前端请求携带csrf token即可
@csrf_exempt
@require_POST
def purchase_product(request):
    data = json.loads(request.body)
    product_id = data.get("product_id")
    # 已登录用户ID直接从请求上下文取，禁止前端传，防止篡改
    current_user_id = request.user.id

    if not product_id or not current_user_id:
        return JsonResponse({"msg": "参数缺失"}, status=400)
    
    # 查询用户账户和对应商品信息
    try:
        user_account = UserAccount.objects.get(user_id=current_user_id)
        target_product = Product.objects.get(id=product_id)
    except (UserAccount.DoesNotExist, Product.DoesNotExist):
        return JsonResponse({"msg": "用户或商品不存在"}, status=404)

    # 匹配你要求的判定逻辑：金币数量大于商品售价则扣减
    if user_account.coins > target_product.price:
        user_account.coins -= target_product.price
        user_account.save()
        # 返回用户最新信息
        return JsonResponse({
            "code": 0,
            "msg": "购买成功",
            "data": {
                "username": user_account.user.username,
                "remaining_coins": user_account.coins
            }
        }, status=200)
    else:
        # 余额不足返回指定提示
        return JsonResponse({
            "code": 1,
            "msg": "user does not have sufficient funds"
        }, status=400)

• 接口路由配置

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("api/purchase/", views.purchase_product, name="purchase_product"),
]

2 React端POST请求实现 #

前端仅负责触发请求、展示返回结果，核心逻辑全部交由后端处理。
示例使用axios发请求，也可以替换为原生fetch：

import axios from "axios"
import { useState } from "react"

// 假设全局存储了用户信息，购买成功后更新即可
const [userInfo, setUserInfo] = useState({
  username: "test",
  coins: 20
})

const handleBuy = async (productId) => {
  try {
    const res = await axios.post(
      "/api/purchase/",
      { product_id: productId },
      { withCredentials: true } // 携带登录凭证，让后端识别当前用户
    )
    if(res.data.code === 0) {
      // 购买成功，更新前端展示的用户金币
      setUserInfo(prev => ({
        ...prev,
        coins: res.data.data.remaining_coins
      }))
    }
  } catch (err) {
    // 捕获错误，展示余额不足提示或其他报错
    alert(err.response?.data?.msg || "购买失败，请重试")
  }
}

// 商品购买按钮调用示例
// <button onClick={() => handleBuy(1)}>购买售价15金币的商品</button>

注意事项 #

• 生产环境不要移除csrf校验，前端请求头统一携带X-CSRFToken即可，避免跨站请求伪造风险
• 不要让前端传递商品售价、用户ID这类核心参数，全部由后端查询获取，防止恶意用户篡改请求刷取道具

内容的提问来源于stack exchange，提问作者Danielodicho P