📌  相关文章
📜  使用 Express.js 的 BMI 计算器(1)

📅  最后修改于: 2023-12-03 15:06:46.268000             🧑  作者: Mango

使用 Express.js 的 BMI 计算器

本篇介绍如何使用 Express.js 开发一个简单的 BMI 计算器应用程序。

什么是 BMI 计算器

BMI 计算器是一个用于计算身体质量指数（BMI）的工具。身体质量指数（BMI）是用体重（公斤）除以身高（米）的平方得出的数字。BMI 范围指示您是否处于健康体重范围内。

环境设置

在开始之前，确保以下环境已安装并配置：

  • Node.js
  • Express.js
创建 Express.js 应用程序

首先，创建一个新的 Express.js 应用程序。

  1. 在终端中，进入项目的目录。

  2. 执行以下命令来初始化新的 Node.js 项目：

npm init -y
  1. 然后，安装 Express.js：
npm install express --save
  1. 创建新的 app.js 文件：
touch app.js
  1. 将以下代码复制并粘贴到 app.js 文件中：
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
  1. 启动服务器：
node app.js
  1. 在浏览器中访问 http://localhost:3000，您应该会看到“Hello, World!”字样。
创建 BMI 计算器

在新建应用程序之后，现在开始创建我们的 BMI 计算器。

  1. 首先在 app.js 文件中增加处理 GET 请求的代码：
app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>BMI 计算器</title>
      </head>
      <body>
        <h1>BMI 计算器</h1>
        <form action="/" method="POST">
          <label>身高（米）:<input type="text" name="height"></label><br>
          <label>体重（公斤）:<input type="text" name="weight"></label><br>
          <button type="submit">计算</button>
        </form>
      </body>
    </html>
  `);
});

这样，当用户访问网页时，将会看到一个包含两个输入框和一个提交按钮的表单。用户需要输入身高和体重，然后点击“计算”按钮来提交表单。

  1. 在 app.js 文件中增加处理 POST 请求的代码：
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: false }));

app.post('/', (req, res) => {
  const height = Number(req.body.height);
  const weight = Number(req.body.weight);
  const bmi = weight / (height ** 2);
  res.send(`您的 BMI 是: ${bmi.toFixed(2)}。`);
});

这里我们使用了 body-parser 中间件来解析 POST 请求体中的数据。然后，我们可以从 req.body 中获取用户输入的身高和体重，并计算出对应的 BMI 值。

  1. 最后，在启动服务器之前添加以下代码：
app.use((req, res, next) => {
  res.status(404).send(`
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>404 Not Found</title>
      </head>
      <body>
        <h1>404 Not Found</h1>
        <p>请求的页面不存在。</p>
      </body>
    </html>
  `);
});

当用户访问一个不存在的页面时，将会看到一个包含“404 Not Found”字样的页面。

  1. 启动服务器：
node app.js

现在您可以访问 http://localhost:3000 来尝试使用 BMI 计算器。输入身高和体重，点击“计算”按钮，将会看到您的 BMI 值。