从零开始学习Node.js系列教程四：多页面实现的数学运算示例

2023年5月28日上午8:53 • JavaScript

以下是“从零开始学习Node.js系列教程四：多页面实现的数学运算示例”的完整攻略：

第一部分：前置准备

在开始学习本教程前，请确保您已经具备以下知识和软件环境：

熟练掌握HTML、CSS和JavaScript等前端技术
熟练掌握Node.js开发环境和npm包管理工具
了解Node.js的http模块和路由(Route)的基本用法

第二部分：项目结构

首先，我们需要构建项目的基本结构。在您喜欢的目录下，创建一个文件夹，取一个名字，比如 calculator。进入 calculator 文件夹，我们可以创建以下文件夹和文件：

public 静态资源文件夹，用于保存所有的html、css、js文件
routes 路由文件夹，用于保存所有的路由文件
views 视图文件夹，用于保存所有的页面文件

现在，我们需要安装相关的依赖项：

npm init -y
npm i --save express ejs body-parser

接下来，开始编写代码。

第三部分：实现路由

打开 routes 文件夹下的 index.js 文件，并编写以下代码：

const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Calculator' });
});

/* POST result page. */
router.post('/', function(req, res, next) {
  const num1 = parseInt(req.body.num1);
  const num2 = parseInt(req.body.num2);
  const operator = req.body.operator;
  let result;

  if (operator === '+') {
    result = num1 + num2;
  } else if (operator === '-') {
    result = num1 - num2;
  } else if (operator === '*') {
    result = num1 * num2;
  } else if (operator === '/') {
    result = num1 / num2;
  }

  res.render('result', { title: 'Result', num1, num2, operator, result });
});

module.exports = router;

这里我们定义了两个路由，一个用于渲染首页，另一个用于处理表单提交，并渲染计算结果页面。此外，我们还定义了一些变量来存储表单提交的信息，以及计算结果，并将它们传递给结果页。

第四部分：实现静态资源

接下来，打开 app.js 文件，并编写以下代码：

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const routes = require('./routes/index');

const app = express();

// 设置视图文件夹
app.set('views', path.join(__dirname, 'views'));

// 设置模板引擎为ejs
app.set('view engine', 'ejs');

// 设置静态文件夹
app.use(express.static(path.join(__dirname, 'public')));

// 处理请求参数
app.use(bodyParser.urlencoded({ extended: false }));

// 路由
app.use('/', routes);

// 启动服务器
app.listen(3000);
console.log('Server started on port 3000.');

这里我们启动了一个Express服务器，并定义了一些中间件来处理请求，如静态资源处理中间件、请求参数处理中间件。最后，我们启用了路由，将请求交给路由处理。

第五部分：实现页面

最后，打开 views 文件夹下的 index.ejs 和 result.ejs 两个文件，并编写以下代码：

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>

    <form action="/" method="POST">
      <input type="number" name="num1" required>
      <select name="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="number" name="num2" required>
      <input type="submit" value="计算">
    </form>
  </body>
</html>

result.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>

    <p><%= num1 %> <%= operator %> <%= num2 %> = <%= result %></p>

    <a href="/">返回</a>
  </body>
</html>

这里我们定义了两个页面，一个用于表单提交，另一个用于显示计算结果。我们使用了ejs作为模板引擎，并通过ejs提供的模板语法，来动态渲染页面。

示例说明

假如我们要计算 1+2 和 2*3。

在浏览器中访问 http://localhost:3000/，我们可以看到一个表单，输入 1、+、2，点击 计算，我们就可以看到 3。同理，我们输入 2、*、3，点击 计算，我们可以看到 6。

这就是多页面实现的数学运算示例，如果您需要学习更多关于Node.js的知识，可以继续查看“从零开始学习Node.js”系列教程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：从零开始学习Node.js系列教程四：多页面实现的数学运算示例 - Python技术站