Node.js(Express)后端BMI计算返回NaN而非正常计算结果问题

计算结果返回NaN是两个配置缺失导致的：

• HTML表单的体重、身高输入框未设置name属性。Express解析POST表单数据时，以输入框的name属性值作为键匹配req.body上的字段，未设置name时req.body.weight、req.body.height拿到的都是undefined，parseFloat(undefined)的返回值就是NaN，最终计算结果必然是NaN。
• 未配置Express的表单请求体解析中间件。缺少该配置时，req.body本身值为undefined，无论怎么取值都无法拿到正确的表单输入值。

1. 配置请求体解析中间件
   在所有路由定义之前，加入如下中间件配置：

// Express 4.16.0及以上版本内置urlencoded解析能力，直接用即可
app.use(express.urlencoded({ extended: true }));

// 如果是低于4.16.0的旧版本，需要先安装body-parser依赖，再用如下配置
// npm i body-parser
// const bodyParser = require('body-parser');
// app.use(bodyParser.urlencoded({ extended: true }));

2. 补全表单输入框的name属性
   修改HTML表单代码，给两个输入框添加和服务端字段名匹配的name属性，顺便修正不规范的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BMI Calculator</title>
</head>
<body>
    <h1>bmi cal</h1>
    <form action="/bmiCalculator" method="post">
        <input type="text" name="weight" placeholder="weight(kg)">
        <input type="text" name="height" placeholder="height(m)">
        <button type="submit">bmi calculate</button>
    </form>
</body>
</html>

可以在计算前增加输入合法性校验，避免用户输入非数字内容时返回NaN：

app.post("/bmiCalculator", (req, res) => {
    var w = parseFloat(req.body.weight)
    var h = parseFloat(req.body.height)
    if (isNaN(w) || isNaN(h) || h <= 0 || w <=0) {
        return res.send("请输入有效的正数字体重、身高值")
    }
    var bmi = w / (h * h);
    res.send("your bmi is " + bmi.toFixed(2))
})

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