如何在Python/Django项目中实现前端BMI计算与后端存储

一、调整模型（可选：自动计算并保存BMI值） #

如果需要把计算好的BMI值留存到数据库，可以给BMI模型添加字段并实现自动计算逻辑：

from django.db import models

class BMI(models.Model):
    Name = models.CharField(max_length=50)
    Surname = models.CharField(max_length=50)
    Weight = models.IntegerField()  # 单位：千克
    Height = models.IntegerField()  # 单位：厘米
    bmi_value = models.FloatField(blank=True, null=True)  # 存储计算后的BMI

    def calculate_bmi(self):
        # 身高转米，BMI公式：体重(kg) ÷ (身高(m))²
        if self.Height > 0:
            height_in_m = self.Height / 100
            return round(self.Weight / (height_in_m ** 2), 2)
        return 0

    def save(self, *args, **kwargs):
        # 保存数据时自动计算BMI
        self.bmi_value = self.calculate_bmi()
        super().save(*args, **kwargs)

    def __str__(self):
        return f"{self.Name} {self.Surname}"

二、更新表单 #

补充姓名相关字段，让用户可以完整提交信息：

from django import forms
from django.forms import ModelForm
from .models import BMI

class BMIForm(ModelForm):
    class Meta:
        model = BMI
        fields = ['Name', 'Surname', 'Weight', 'Height']
        widgets = {
            'Weight': forms.NumberInput(attrs={'placeholder': '请输入体重（千克）'}),
            'Height': forms.NumberInput(attrs={'placeholder': '请输入身高（厘米）'}),
        }

三、完善视图函数 #

处理表单的GET/POST请求，验证并保存用户提交的数据：

from django.shortcuts import render, redirect
from .models import BMI
from .forms import BMIForm

def Home(request):
    if request.method == 'POST':
        form = BMIForm(request.POST)
        if form.is_valid():
            form.save()  # 触发模型的save方法自动计算BMI
            return redirect('home')  # 保存后重定向到首页
    else:
        form = BMIForm()
    
    # 可选：传递最近的BMI记录到前端展示
    recent_records = BMI.objects.all().order_by('-id')[:5]
    
    return render(request, 'Experiment/Home.html', {
        'form': form,
        'recent_records': recent_records
    })

四、前端模板实现实时计算 #

在Home.html中添加表单和JavaScript，监听输入变化实时计算BMI：

<!DOCTYPE html>
<html>
<head>
    <title>BMI计算器</title>
    <style>
        .container { max-width: 600px; margin: 2rem auto; padding: 2rem; border: 1px solid #eee; border-radius: 8px; }
        .form-group { margin-bottom: 1.2rem; }
        label { display: block; margin-bottom: 0.5rem; }
        input { width: 100%; padding: 0.6rem; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; }
        .bmi-result { margin: 1.5rem 0; padding: 1rem; background-color: #f8f8f8; border-radius: 4px; font-size: 1.3em; }
        .records { margin-top: 2rem; }
    </style>
</head>
<body>
    <div class="container">
        <h1>BMI计算器</h1>
        <form method="POST">
            {% csrf_token %}
            <div class="form-group">
                {{ form.Name.label_tag }}
                {{ form.Name }}
            </div>
            <div class="form-group">
                {{ form.Surname.label_tag }}
                {{ form.Surname }}
            </div>
            <div class="form-group">
                {{ form.Weight.label_tag }}
                {{ form.Weight }}
            </div>
            <div class="form-group">
                {{ form.Height.label_tag }}
                {{ form.Height }}
            </div>
            <div class="bmi-result">
                当前BMI值：<span id="bmi-output">0.00</span>
            </div>
            <button type="submit" style="padding: 0.8rem 1.5rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">保存记录</button>
        </form>

        <!-- 展示最近记录 -->
        {% if recent_records %}
        <div class="records">
            <h2>最近记录</h2>
            <ul>
                {% for record in recent_records %}
                <li>{{ record.Name }} {{ record.Surname }} - 体重{{ record.Weight }}kg，身高{{ record.Height }}cm，BMI: {{ record.bmi_value }}</li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>

    <script>
        // 获取输入元素
        const weightInput = document.getElementById('id_Weight');
        const heightInput = document.getElementById('id_Height');
        const bmiOutput = document.getElementById('bmi-output');

        // 实时计算BMI
        function updateBMI() {
            const weight = parseFloat(weightInput.value) || 0;
            const height = parseFloat(heightInput.value) || 0;
            
            if (height > 0) {
                const heightInM = height / 100;
                const bmi = weight / (heightInM ** 2);
                bmiOutput.textContent = bmi.toFixed(2);
            } else {
                bmiOutput.textContent = '0.00';
            }
        }

        // 监听输入变化
        weightInput.addEventListener('input', updateBMI);
        heightInput.addEventListener('input', updateBMI);
    </script>
</body>
</html>

核心逻辑说明 #

• 实时计算：通过前端JavaScript监听输入框的input事件，直接在浏览器内完成BMI计算，无需后端请求，实现即时反馈。
• 后端保存：表单提交时，后端验证数据有效性，调用模型的save方法自动计算并存储BMI值。
• 历史记录：可选展示最近的BMI记录，方便用户查看过往数据。

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