如何在Django应用中添加三个功能按钮并修复加购提交问题

问题说明 #

我正在Django应用中添加三个功能按钮：

• 生成摩尔斯电码
• 加入购物车
• 立即购买

目前加入购物车按钮无法提交请求，我是Django新手。已实现摩尔斯电码转换功能，且拥有独立的购物车App，期望用户操作流程为：输入字符串→点击生成按钮→显示摩尔斯电码→展示加入购物车和立即购买选项。

现有代码 #

morsecode/views.py #

# morsecode/views.py
from django.shortcuts import render
from .forms import MorseCodeForm

MORSE_CODE_DICT = {
    'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.',
    'F': '..-.', 'G': '--.', 'H': '....', 'I': '..', 'J': '.---',
    'K': '-.-', 'L': '.-..', 'M': '--', 'N': '-.', 'O': '---',
    'P': '.--.', 'Q': '--.-', 'R': '.-.', 'S': '...', 'T': '-',
    'U': '..-', 'V': '...-', 'W': '.--', 'X': '-..-', 'Y': '-.--',
    'Z': '--..', '1': '.----', '2': '..---', '3': '...--',
    '4': '....-', '5': '.....', '6': '-....', '7': '--...',
    '8': '---..', '9': '----.', '0': '-----', ', ': '--..--',
    '.': '.-.-.-', '?': '..--..', '/': '-..-.', '-': '-....-',
    '(': '-.--.', ')': '-.--.-'
}

def text_to_morse(text):
    morse_code = []
    for char in text.upper():
        if char == ' ':
            morse_code.append(' ')
        else:
            morse_code.append(MORSE_CODE_DICT.get(char, char))
    return '\n'.join(morse_code)

def morsecode_converter(request):
    input_text = ''
    morse_code = ''

    if request.method == 'POST':
        form = MorseCodeForm(request.POST)
        if form.is_valid():
            input_text = form.cleaned_data['text_input']
            morse_code = text_to_morse(input_text)
    else:
        form = MorseCodeForm()

    return render(request, 'main.html', {'form': form, 'input_text': input_text, 'morse_code': morse_code})

morsecode/forms.py #

# morsecode/forms.py
from django import forms

class MorseCodeForm(forms.Form):
    text_input = forms.CharField(label='Enter text', max_length=100)

morsecode/main.html #

<!-- morsecode/main.html -->
{% extends "base.html" %}

{% block title %}Morse code Converter{% endblock %}

{% block content %}
<h2>Morse Code Converter</h2>
<div class = "container-main">

<form method="post" class = "form-container">
    {% csrf_token %}
    <div>
        {{ form.as_p }}
    </div>
    <button type="submit">Convert to Morse Code</button>
</form>

{% if input_text %}
<div class="result-container">
    <h2>Result</h2>
<p><strong>Input Text:</strong> {{ input_text }}</p>
<p><strong>Morse Code:</strong></p>
<pre>{{ morse_code }}</pre>
</div>
</div>
{% endif %}
{% endblock %}

购物车App创建代码 #

# 创建购物车项
CartItem.objects.create(user=request.user, product_name=product_name, price=price)

解决方案 #

1. 修改视图函数，处理购物车请求 #

更新morsecode/views.py，添加购物车和购买请求的处理逻辑：

# morsecode/views.py
from django.shortcuts import render, redirect
from django.contrib import messages
from .forms import MorseCodeForm
from cart.models import CartItem  # 根据实际购物车App路径调整导入
from decimal import Decimal

# 保留原有的MORSE_CODE_DICT和text_to_morse函数

def morsecode_converter(request):
    input_text = ''
    morse_code = ''

    if request.method == 'POST':
        # 处理加入购物车请求
        if 'add_to_cart' in request.POST:
            input_text = request.POST.get('input_text', '')
            if input_text:
                product_name = f"摩尔斯电码转换结果: {input_text}"
                price = Decimal('9.99')  # 可根据需求调整价格
                if request.user.is_authenticated:
                    CartItem.objects.create(
                        user=request.user,
                        product_name=product_name,
                        price=price
                    )
                    messages.success(request, '已成功加入购物车')
                else:
                    messages.warning(request, '请先登录再操作购物车')
                return redirect('morsecode_converter')
        
        # 处理立即购买请求
        elif 'buy_now' in request.POST:
            input_text = request.POST.get('input_text', '')
            if input_text:
                # 这里可添加订单创建、跳转支付页面等逻辑
                messages.success(request, '正在处理您的购买请求，请稍后')
                # 示例：return redirect('payment_page', product_name=product_name, price=price)
                return redirect('morsecode_converter')
        
        # 处理摩尔斯电码转换请求
        form = MorseCodeForm(request.POST)
        if form.is_valid():
            input_text = form.cleaned_data['text_input']
            morse_code = text_to_morse(input_text)
    else:
        form = MorseCodeForm()

    return render(request, 'main.html', {'form': form, 'input_text': input_text, 'morse_code': morse_code})

2. 更新HTML模板，添加购物车按钮表单 #

修改main.html，在结果区域添加包含隐藏字段的表单，用于传递转换结果并提交购物车请求：

<!-- morsecode/main.html -->
{% extends "base.html" %}

{% block title %}Morse code Converter{% endblock %}

{% block content %}
<h2>Morse Code Converter</h2>
<div class="container-main">

<form method="post" class="form-container">
    {% csrf_token %}
    <div>
        {{ form.as_p }}
    </div>
    <button type="submit">生成摩尔斯电码</button>
</form>

{% if input_text %}
<div class="result-container">
    <h2>转换结果</h2>
    <p><strong>输入文本:</strong> {{ input_text }}</p>
    <p><strong>摩尔斯电码:</strong></p>
    <pre>{{ morse_code }}</pre>

    <!-- 购物车操作表单 -->
    <form method="post" class="cart-actions">
        {% csrf_token %}
        <input type="hidden" name="input_text" value="{{ input_text }}">
        <button type="submit" name="add_to_cart">加入购物车</button>
        <button type="submit" name="buy_now">立即购买</button>
    </form>
</div>
{% endif %}
</div>
{% endblock %}

3. 额外注意事项 #

• 确保购物车App已在settings.py的INSTALLED_APPS中注册
• 若支持匿名用户购物，需改用Session存储购物车数据，而非关联request.user
• 价格字段若为DecimalField，需传入Decimal类型值，避免类型错误
• 可通过Django的messages框架向用户反馈操作结果

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