Node.js+Express开发BMI计算器时出现NaN错误的求助

我看了你的代码，出现Your BMI is NaN是因为几个关键的小错误，咱们一个个来修复：

1. 后端缺少表单数据解析中间件 #

Express 默认不会自动解析 POST 请求的表单数据，所以你需要在代码开头添加中间件来处理表单提交的内容：

const express = require("express");
const app = express();

// 新增这一行，用来解析表单格式的POST数据
app.use(express.urlencoded({ extended: true }));

app.get("/", function(req, res){
    res.sendFile(__dirname + "/index.html");
});
// ... 其他代码保持不变

2. 错误的字符串包裹导致转数字失败 #

你在获取体重和身高时，把req.body.weight用引号包起来了——这相当于你在尝试把字符串"req.body.weight"转成数字，这肯定会得到NaN！去掉引号直接使用变量即可：

// 错误写法
// var weight = parseInt("req.body.weight");
// var height = parseInt("req.body.height");

// 正确写法
var weight = parseInt(req.body.weight);
var height = parseInt(req.body.height);

3. 前端input类型不符合规范 #

HTML里并没有type="weight"和type="height"这种输入类型，应该用type="number"来约束用户输入数字，避免非数字内容导致的计算异常，同时可以加上单位提示让用户更清楚输入要求：

<!-- 错误写法 -->
<!-- <input type="weight" name="weight" placeholder="Please type your weight">;
<input type="height" name="height" placeholder="Please type your height">; -->

<!-- 正确写法 -->
<input type="number" name="weight" placeholder="Please type your weight (kg)">
<input type="number" name="height" placeholder="Please type your height (m)">

另外记得去掉input标签后面多余的分号，这属于无效的HTML语法。

额外优化建议 #

可以添加输入验证逻辑，避免用户未输入或输入无效数值就提交的情况，同时把BMI结果保留两位小数更美观：

app.post("/", function(req, res){
    var weight = parseInt(req.body.weight);
    var height = parseInt(req.body.height);
    
    // 验证输入是否有效
    if (isNaN(weight) || isNaN(height) || height <= 0 || weight <= 0) {
        res.send("Please enter valid weight and height!");
        return;
    }
    
    var bmi = weight / (height * height);
    res.send(`Your BMI is ${bmi.toFixed(2)}`);
});

把这些修改完成后，你的BMI计算器就能正常运行啦！

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